Javasctipt Canvasアプリをブログに入れる二つの方法。
Two ways to migrate JavaScript Canvas application to Blog
Javascriptは完成品のWebベースの展開が容易であることから、簡易なAIの開発については今後Tensorflow.jsが主流になるだろう。ここでは、ML5もしくはTensorflow.jsアプリをブログに掲載する場合の変更点を書いた。Tensorflow.js will be mainstream for light AI development going forward due to its product scalability through Web. Here I wrapped the points of changes when migrating the ML5 or Tensorflow.js application to blog.
Method１-ML5）
制御がML5にあり、CallBack スタイルなため、Parent関数を使って、Canvasが属しているdivを指定する Control is under ML5 due to call-back style, specify the div where Canvas belongs using Parent function.
Sample https://randomwalkjapan.blogspot.com/2019/10/mobilenetusing-mobilenet-inside-blogspot.html
div id="myContainer379"
MyCanvas=createCanvas(320, 240);
MyCanvas.parent('myContainer379');
video = createCapture(VIDEO);
video.parent('myContainer379')
Method２-Tensorflow.js）
制御が自分にあるため、appendChild関数を使って、Canvasをdivに帰属させる User has control, hence let Canvas belong to div using appendChild function.
Sample .. Pls implement below to any apps, then it will be part of your blog.
div id="mainContent1432"
var canvas = document.createElement("canvas");
var mydiv = document.getElementById("mainContent1432");
mydiv.appendChild(canvas);