保存画布图像失败

我在下面创建一个测试代码，你可以操纵它的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，1.7.0的PhoneGap工作），尤其是如果我存储大量将base64字符串转换为数组，将它们分配给许多图像DOM元素，它肯定会失败。
三，如果用户只画在画布上的东西，它总能正常工作。（除的jsfiddle示例代码，但它的作品在我的Android系统上......）但如果他绘制图像context.drawImage(~)图像不会显示图片。
太多混乱...
我需要让用户可以查看他们的图纸在小图标，任何替代？

一些参考：

1
2
3

来源

2013-02-17 Stallman

我只是碰到了这个问题绊倒了。

点击把图像，然后单击保存到dataURL，然后检查你的JavaScript控制台类似：

SecurityError: DOM Exception 18

这是一个浏览器的安全功能。由于您已插入来自其他网域的图片，因此将其视为一个跨网申请。

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

来源

2013-04-02 16:43:44 c24w

嗯，我在移动设备上工作（发展与PhoneGap），DOM Exception 18不应该发生。或者你认为这个错误也可能发生？ – Stallman 2013-04-06 07:52:33

该例外不应限于任何特定设备或浏览器;这是一个普遍的安全机制。除非网站响应标题专门配置为允许其他域名，否则通常不允许跨域请求。更多信息[在这里]（http://en.wikipedia.org/wiki/Cross-origin_resource_sharing）:) – c24w 2013-04-06 10:09:51

代码中的另一件事。

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

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

您test_img.src声明之前，你必须把：

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

此外，您尝试访问的图像不能访问 - >For me it does not work

来源

2014-11-13 09:17:48

保存画布图像失败

回答

相关问题