jquery - 如何从画布制作缩略图？

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>

因此，它分两步完成。首先将外部图像绘制到画布上，然后将整个画布保存到“缩略图”图像。

Answer 2

我使用了下面的代码并且它工作得很好，它将整个画布转换为图像并下载该图像：

                const canvas = document.getElementById('main-canvas');
                const context = canvas.getContext('2d');
                context.save();
                context.globalCompositeOperation = 'destination-over';  
                context.fillStyle = 'white';
                context.fillRect(0, 0, canvas.width, canvas.height);
                context.restore();
                var dataURL = context.canvas.toDataURL("image/png", 1.0);
                var a = document.createElement('a');
                a.href = dataURL;
                a.download = "Thumbnail.png";
                document.body.appendChild(a);
                a.click();
                a.remove();