jquery - キャンバスからサムネイル画像を作成するにはどうすればよいですか?

Question

画像を含むいくつかの div を含む HTML5 キャンバスがあります。このキャンバスを img にして、別の div (キャンバスの外側) の img 要素に転送し、サイズを変更する必要があります (img 要素はキャンバスより小さい)。

繰り返しますが、基本的には、キャンバスにすべてのコンテンツを「描画」し、それを (キャンバスよりも) 小さい img 要素に入れたいと考えています。

※絵の幅と高さの比率はキャンバスと同じと仮定しています。

Answer 1

これは効きますか??

    <canvas id="myCanvas"></canvas>

    <img id="otherImage" src="..." />
    <img id="otherOtherImage" src="..." />

    <img id="savedPic" />

<form>
<input type="button" name="SavePic" value="Save Picture" onClick="savePic()">
</form>


<script type="text/javascript">
     function savePic(){
          var canvas = document.getElementById("myCanvas");
          if (canvas.getContext) {
               var ctx = canvas.getContext("2d");
               var iOne = document.getElementById("otherImage");
               var iTwo = document.getElementById("otherOtherImage");
               ctx.drawImage(iOne,0,0);
               ctx.drawImage(iTwo,50,50);

               var toSave = canvas.toDataURL("image/png");
               var imageElement = document.getElementById("savedPic");  
               imageElement.src = toSave;

          }
}
</script>

したがって、それは2段階のプロセスで行われます。最初に外部画像をキャンバスに描画し、次にキャンバス全体を「サムネイル」画像に保存します。