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

【问题标题】：How to add image as background image together with canvas content into one image using toDataURL()?如何使用 toDataURL() 将图像作为背景图像与画布内容一起添加到一张图像中？
【发布时间】：2015-02-08 02:50:10
【问题描述】：

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

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

我可以在此画布上绘制草图，但是当我使用以下代码以 base64 格式发布到服务器时，它只发布了我绘制的画布内容。但我想要的是将UFO2.png 作为背景以及我绘制为base64 的内容发布到服务器。

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

我怎样才能做到这一点？

【问题讨论】：

标签： javascript css html canvas

【解决方案1】：

你的 HTML

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

然后在画布上绘制图像

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 包含背景图像，您应该将图像绘制为画布的一部分

我做了一个 jsbin 来展示这个...jsbin

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

【讨论】：

谢谢，但我还是不知道该怎么做。
我更新了答案以提供更多演示...还添加了一个 jsbin
也可以。也可以在这里下载jsbin
你真好。