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

Question

这里我有一张图片作为 canvas 背景图片：

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

我可以在这个 canvas 上画草图，但是当我使用跟随代码将 POST 作为 base64 格式发送到服务器时，它只 posted canvas 内容我画画。但我想要的是 post 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

添加一个事件侦听器，这样当您单击保存按钮（在此示例中）时，它将以新的方式打开图像 window/tab

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

基本上，如果您希望 toDataURL 包含背景图像，您应该将图像绘制为 canvas

的一部分

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

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