Question

这里我有一个图像作为画布背景图像：

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

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

然后在画布上绘制图像

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，你很高兴

如何使用toDataURL（）将图像作为背景图像与画布内容一起添加到一个图像中？

1 个答案: