canvas.toDataURL() not working properly except mozilla firefox

Question

I have developed a coupon generator module in the site I create a coupon in the html format and fill that html value in canvas by using JavaScript function which is

function checkcanvas(id) {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var data = "<svg xmlns='http://www.w3.org/2000/svg' width='437' height='262'>" 
        +  "<foreignObject width='100%' height='100%'>"
        + "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>"
        +  $("#coupon_td").html()
        + "</div>"
        + "</foreignObject>"
        + "</svg>";

    var DOMURL = self.URL || self.webkitURL || self;
    var img = new Image();
    var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
    var url = DOMURL.createObjectURL(svg);
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
        DOMURL.revokeObjectURL(url);
    };
    img.src = url;

    if(id == 2) {
        document.getElementById('base_64_img').value = canvas.toDataURL();
    }
}

base_64_img is just a hidden element so I can post the data into my php code and create a image using base64 code.

The biggest issue I am facing that this code perfectly worked in Mozilla Firefox almost every version but not working in Google chrome.

Are you getting any errors? What is happening that shouldn't happen? (Or what's not happening that should?) — Cerbrus, Jan 02 '13 at 08:20
Hi i was trying to reproduce your error, please do check this url http://jsfiddle.net/n3qSs/5/ your code here is working. Is there any difference in your code ? — thomasbabuj, Jan 02 '13 at 08:54
@Cerbrus yess my code is working in only Mozilla Firefox not in google chrome or any other browser — Mohammad Fakira, Jan 02 '13 at 09:29
@thomasbabuj yess exactly as i written above that my code have a problem that i want canvas base64 encoded string in my input type hidden named base_64_img. there is no issue in mozilla firefox but its not working in google chrome or any other browsers except mozilla.. — Mohammad Fakira, Jan 02 '13 at 09:33
will you please post your html code as well? In the jsfilddle link above, the canvas is rendering svg image with the content of the "coupon_td" div — thomasbabuj, Jan 02 '13 at 09:37
http://jsfiddle.net/zyDg5/ this is the url where i paste my code please review it and do one thing try to make run when convert button press over there call function its not working in jsfiddle and i am new to use the jsfiddle. Thank you very much :) — Mohammad Fakira, Jan 02 '13 at 09:53
http://jsfiddle.net/zyDg5/2/ -> check out this Its working in Chrome please also note this BLOB only works in IE 10 and above. — thomasbabuj, Jan 02 '13 at 10:03
yess sir that's working just seeing the image in canvas thats already working.. :) but the problem is that base_64_img hidden input getting blank image base64 did you seen that ?? thats the problem... — Mohammad Fakira, Jan 02 '13 at 10:08
@thomasbabuj sir input type hidden named base_64_img gets blank image code thats the exactly problem what i am facing now a days.. — Mohammad Fakira, Jan 02 '13 at 10:16
@MohammadFakira Madam, your question is not clear then. Please check this url http://jsfiddle.net/zyDg5/5/ here you can see the based64 encoded value of your image which printed from the hidden value. — thomasbabuj, Jan 02 '13 at 10:37
no sir please copy that value of hidden and paste it into browser.. the result is that the image should goes to blank... its blank image sir base64 encoded code.. check it.. even canvas has a drawn image in that... — Mohammad Fakira, Jan 02 '13 at 10:51

score 1 · Accepted Answer · answered Jan 02 '13 at 11:44

In your code you are generating an "SVG IMAGE" and trying to convert into toDataURL().

var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});

This is the problem, from this URL toDataURL :

If the type requested is not image/png, and the returned value starts with data:image/png, then the requested type is not supported.

In this fiddlecode if you see the printed output , "data:image/png;base64". its supposed to be "data:image/svg;base64".

Instead of creating svg image, use canvas element and javascript to draw the related banner image and if you take the output then try copy & paste in your browser. ( it may work ).

Check this js plugin called SVG.toDataURL

Hope this helps.

canvas.toDataURL() not working properly except mozilla firefox

1 Answers1