通过 toDataURL 将画布保存到图像失败答案

【问题标题】：Save canvas to image via toDataURL failed通过 toDataURL 将画布保存到图像失败
【发布时间】：2013-02-17 03:41:55
【问题描述】：

我在下面创建了一个测试代码，你可以在 Jsfiddle 上操作它：

http://jsfiddle.net/Stallman41/57hvX/31/
HTML：

<canvas id="test_canvas" style="background-color : #FFFF00" ; width="500px"
; height="340px"></canvas>
<br>
<button id="test_put_btn">Put an image</button>
<br>
<button id="save_dataURL">Save to dataURL</button>
<br>
<button id="draw_back">Final step: draw 3 images back.</button>
<br>
<img id="first_img"; width="100px" ; height="100px" ;></img>
<img id="second_img"; width="100px" ; height="100px" ></img>
<img id="third_img"; width="100px" ; height="100px" ;></img>

Javascript：

var drawing_plate;
var context;
var dataURL_arr = new Array();
$(document).ready(function () {
drawing_plate = document.getElementById("test_canvas");
context = drawing_plate.getContext('2d');


$("#test_canvas").bind("mousedown", Touch_Start);
$("#test_canvas").bind("mousemove", Touch_Move);
$("#test_canvas").bind("mouseup", Touch_End);


}); //document ready. 



function Touch_Start(event) {
event.preventDefault();
touch = event;
touch_x = touch.pageX;
touch_y = touch.pageY;

line_start_x = touch.pageX - 0;
line_start_y = touch.pageY - 0;

context.beginPath();
context.moveTo(line_start_x, line_start_y);
}

function Touch_Move(event) {
event.preventDefault();
touch = event; //mouse
line_end_x = touch.pageX - 0;
line_end_y = touch.pageY - 0;
context.lineTo(line_end_x, line_end_y);
context.stroke();
}


$("#test_put_btn").click(function () {
var test_img = new Image();
test_img.src = "http://careerscdn.sstatic.net/careers/gethired/img/careers2-      ad-header-so-crop.png";
context.drawImage(test_img, 0, 0);
});

$("#save_dataURL").click(function () {

dataURL_arr.push(drawing_plate.toDataURL("image/png"));
});

$("#draw_back").click(function () {
  var f_image= $("#first_img")[0];
  var s_image= $("#second_img")[0];
  var t_image= $("#third_img")[0];

f_image.onload= function()
{
    f_image.src= dataURL_arr[0];
}
    f_image.src= dataURL_arr[0];

s_image.onload= function()
{
    s_image.src= dataURL_arr[0];
}
    s_image.src= dataURL_arr[0];      

t_image.onload= function()
{
    t_image.src= dataURL_arr[0];
}
     t_image.src= dataURL_arr[0];

});

我在Android系统上开发了一个绘图板，将绘图保存到一个dataURL字符串中。他们可以在画布上绘制一些东西并将图像放在画布上。而且我需要让用户在小图标上看到他们的绘图。
我使用canvas.toDataURL("image/png") 来保存base64 字符串。我选择<img>作为小图标容器。但是，我得到的只是图标上可以显示图纸，通常，当我写img.src= canvas.toDataURL("image/png");时，图像什么也没有显示！
我对这个问题进行了很长时间的调查。
1。我认为问题可能是 dataURL 字符串太长？
2。操作系统支持：Android？

这里 Jsfiddle 中的代码显示了我在 Android PhoneGap 开发中的类似过程。
首先，您只需在画布上绘制一些东西，然后按Press an image，然后按Save to dataURL。但是你应该把这个过程做三遍。在这种情况下，字符串数组包含由图纸和图像生成的 base64 字符串。
最后，您按下Final step: draw 3 images back.，图像图标上不会显示任何内容。
结论：
根据我的经验，当我写 img.src= canvas.toDataURL("image/png"); 时（无论 img 是 dom 元素还是 var img = new Image();）。它并不总是有效：有时有效……但有时无效……（我在 Android 4.0.1 上工作，phonegap 1.7.0）

第二，特别是如果我将大量 base64 字符串存储到数组中，并将它们分配给大量图像 DOM 元素，它肯定会失败。
第三，如果用户只在画布上画东西，它总是可以工作的。（除了Jsfiddle中的示例代码，但它在我的Android系统上工作......）但是，如果他绘制图像context.drawImage(~)，图像将不会显示图片。
太多的困惑...
我需要让用户以小图标查看他们的绘图，还有其他选择吗？

一些参考资料：

1
2
3

【问题讨论】：

标签： javascript image html canvas base64

【解决方案1】：

我只是偶然发现了这个问题。

点击Put an image，然后点击Save to dataURL，然后检查你的JavaScript控制台是否有类似的东西：

    SecurityError: DOM Exception 18

这是一项浏览器安全功能。因为您插入了来自不同域的图像，所以它被视为跨域请求。

如果您eliminate the security error，您可以将画布导出到数据 URL。

【讨论】：

好吧，我在移动设备上工作（使用 PhoneGap 开发），不应该发生 DOM 异常 18。或者你认为这个错误也可能发生？
例外不应局限于任何特定的设备或浏览器；这是一种通用的安全机制。除非 Web 响应标头专门配置为允许其他域，否则通常不允许跨域请求。更多信息here :)

【解决方案2】：

代码中的另一件事。

您尝试在您的 test_put_btn onclick 事件处理程序中绘制到画布上的图像，您的图像将永远不会显示（或者它有时会意外工作），因为您无需等待图像加载到帆布。

您必须处理图像的“onload”事件并将其绘制到处理程序中以允许绘制图像。

在你的 test_img.src 语句之前，你必须把：

test_img.onload = function() 
{
   context.drawImage(test_img, 0, 0);
};

另外，您尝试访问的图像无法访问 --> For me it does not work

【讨论】：