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

客户端的Canvas到PNG

2 个答案: