javascript - 如何使用 toDataURL() 将图像作为背景图像与 Canvas 内容一起添加到一个图像中？

Question

这里我有一张图片作为 Canvas 背景图片:

<canvas id="colors_sketch" width="320" height="568" 
    style="background:url('./image/ufo/UFO2.png')" ></canvas>

我可以在这个 Canvas 上绘制，但是当我使用以下代码将 base64 格式发布到服务器时，它只发布了我绘制的 Canvas 内容。但我想要的是将 UFO2.png 作为背景与我作为 base64 绘制的内容一起发布到服务器。

var pic = document.getElementById("colors_sketch");
$.post("function/storage.php",{ picdata:pic.toDataURL() },function(result){
    window.location.href= 'piclist.php';
});

我怎样才能做到这一点？

Answer 1

你的 HTML

<canvas id="colors_sketch" width="320" height="568"></canvas>
<button id="foo">Save</button>

然后在 Canvas 上绘制图像

var canvas = document.getElementById("colors_sketch");
var context = canvas.getContext('2d');
var source = "./image/ufo/UFO2.png";

var imageObj = new Image();
imageObj.onload = function() {
   context.drawImage(this, 0, 0);
   // Your Draw Code
   context.strokeStyle = "blue";
   context.strokeRect(5, 5, 50, 50);
   context.lineWidth = 5;
   context.strokeRect(135, 5, 50, 50);
};

imageObj.crossOrigin = "Anonymous";  // CORS
imageObj.src = source; // Set The Image URL

添加一个事件监听器，这样当您单击保存按钮(在此示例中)时，它将在新窗口/选项卡中打开图像

document.getElementById('foo').addEventListener('click', function () {
    window.open(canvas.toDataURL("image/png"));
}); 

基本上，如果您希望 toDataURL 包含背景图像，您应该将图像绘制为 Canvas 的一部分

我制作了一个 jsbin 来显示这个 ... jsbin

最后，在了解其工作原理后，发送由 canvas.toDataURL("image/png") 生成的 base-64，您就可以开始了