Save canvas to image via toDataURL failed

Question

I create a test code below and you can manipulate it on 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];

});

I develop a drawing plate on Android system, saving the drawings to a dataURL string. They can draw something on the canvas and put images on the canvas. And I need to let the users see their drawings on small icons.
I use canvas.toDataURL("image/png") to save the base64 string. And I choose <img> as the small icon container. However, what I got is only the drawings can be shown on the icon, and usually, when I write img.src= canvas.toDataURL("image/png"); the image shows nothing!
I investigate the issue for long time.
1. I think the problem might be the dataURL string is too long?
2. The support of the OS: Android?

The code in Jsfiddle here shows a similar procedure on my Android PhoneGap development.
First , you just draw something on the canvas, and press Press an image, and then Save to dataURL. But you should do the process three times. In this condition, the string array contains the base64 string generated by the drawings and the image.
In the final, you press Final step: draw 3 images back., nothing will be shown on the image icon.
In conclusion:
In my experience, as I write img.src= canvas.toDataURL("image/png"); (no matter the img is an dom element or var img = new Image();). It can't always work: sometimes it works... but sometimes not...(I work on Android 4.0.1, phonegap 1.7.0)

Second, especially if I store lots of base64 strings to an array, assigning them to lots of image DOM element, it definitely fails.
Third, if the user only draw something on the canvas, it can always work.( Except the example code in the Jsfiddle, but it works on my Android system...) But if he draw an image context.drawImage(~) the image wouldn't show the pic.
Too much confusions...
I need to let the user can view their drawings in small icon, any alternative?

Some References:

1
2
3

c24w · Answer 1 · 2013-10-23T15:03:52.077

1

I just stumbled across this question.

Click Put an image, then click Save to dataURL, then check your JavaScript console for something like:

    SecurityError: DOM Exception 18

It's a browser security feature. Because you've inserted an image from a different domain, it counts as a cross-origin request.

If you eliminate the security error, you can export the canvas to a data URL.

edited Oct 23 '13 at 15:03

answered Apr 02 '13 at 16:43

c24w

7,421
7
39
47

Well, I work on mobile device(develop with PhoneGap), the DOM Exception 18 shouldn't happen. Or do you think this error might happen too? – Alston Apr 06 '13 at 07:52
The exception shouldn't be limited to any particular device or browser; it's a general security mechanism. Cross-origin request are generally disallowed unless web response headers are specifically configured to allow other domains. More info [here](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) :) – c24w Apr 06 '13 at 10:09

Pierrick Martellière · Answer 2 · 2014-11-13T09:23:25.483

Another thing in your code.

The image you try to draw onto the canvas into your test_put_btn onclick event handler, your image will never show up (or it will sometimes work accidentally) because you don't wait for your image to be loaded to draw it onto the canvas.

You have to handle the "onload" event of your image and draw it into the handler to permit the drawing of your image.

Before your test_img.src statement, you have to put :

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

Plus, the image you try to access is not accessible --> For me it does not work

Save canvas to image via toDataURL failed

2 Answers2