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

我在下面创建了一个测试代码，您可以在Jsfidle:上操作它

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];
});

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

Jsfidle中的代码在我的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）

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

一些参考文献：

1
2
3