画布到客户端上的PNG

Question

我有一个画布，我想将其转换并显示在标签中。 我知道我们可以使用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+">"); }); 

Answer 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/

Answer 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);
  }
}