如何从画布制作缩略图？

Question

我有一个HTML5画布，包含一些包含图片的div。我需要将这个画布设为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>

所以它是在两个步骤中完成的。首先将外部图像绘制到画布上，然后将整个画布保存到“缩略图”图像。