在客户端将画布转为 PNG答案

【问题标题】：Canvas to PNG on Client Side在客户端将画布转为 PNG
【发布时间】：2017-11-27 07:37:54
【问题描述】：

我有一个画布，我想将它转换并显示在标签中。我知道我们可以使用toDataURL() 和toBlob() 将画布转换为图像，但是这两种方法都给了我不是图像的base64 数据。

$("#upload_feedback_btn").on("click", function() {
let feedbackSrc = document.getElementById("capture").toDataURL('image/png', 1.0);
        $("#feedback_canvas_image").append("<img id='upload_canvas_img' src="+feedbackSrc+">");
    });

【问题讨论】：

Can I get image from canvas element and use it in img src tag?的可能重复

标签： javascript jquery html canvas

【解决方案1】：

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

ctx.fillRect(50,50,50,50);

var img = new Image();
img.src = can.toDataURL();
document.body.appendChild(img);

http://jsfiddle.net/simonsarris/vgmFN/

【讨论】：

谢谢，但我也照做了。它不是我想要的。它给了我一个 base64 图像，但我想要 png/jpg 图像
您要下载 png / jpeg 图像类型吗？ @shehzad940
不，我可以下载，但我想在正文中附加图像作为 png/jpeg 图像....我的代码附加图像但在 base64 中。
其实我想把画布复制到剪贴板上，这样我就可以把它作为图像粘贴到 MS-Word / 写字板中

【解决方案2】：

使用这个，纯javascript：

var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = 'img/base.png';
  base_image.onload = function(){
    context.drawImage(base_image, 100, 100);
  }
}

【讨论】：