CODEWITHSUNDEEP
javascripthtmlfirefox
Paradoxetion
Paradoxetion

Reputation: 726

Canvas toDataURL() returns blank image in Firefox even with .onload and callbacks

I have a problem with toDataURL() function in FireFox

Imagine I have such base64 image:

var url = " data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMTkgMTE5Ij48Zz48Y2lyY2xlIGN4PSI1NyIgY3k9IjYyIiByPSI1NyIgc3R5bGU9ImZpbGw6IHJnYigxNjAsIDE2MSwgMTYzKTsgb3BhY2l0eTogMC42OyIvPjxjaXJjbGUgY3g9IjU3IiBjeT0iNTciIHI9IjU3IiBzdHlsZT0iZmlsbDogcmdiKDEyMywgMjEwLCAyNDApOyIvPjxjaXJjbGUgY3g9IjU3IiBjeT0iNTciIHI9IjQ1IiBzdHlsZT0iZmlsbDogcmdiKDI1NSwgMjU1LCAyNTUpOyIvPjx0ZXh0IGR4PSI1NyIgZHk9IjY1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBzdHlsZT0iZm9udC1zaXplOjI1cHg7IGZpbGw6ICMyYjJmMmU7IGZvbnQtZmFtaWx5OiAnRElOUHJvIFJlZ3VsYXInLCBzYW5zLXNlcmlmOyBmb250LXdlaWdodDogYm9sZCI+MTUlPC90ZXh0PjwvZz48L3N2Zz4=";

And then I want to resize it and send new uri back:

function getImageUri(url, callback) {
  image = new Image();

  image.onload = function() {
    var image = this; 
    var canvas = document.createElement('canvas'),
        context = canvas.getContext('2d'),
        dataURL;

    context.drawImage(image, 0, 0, 60, 60);
    callback(canvas.toDataURL());
  }

  image.src = url;

}

At the end I just call it to get new uri

getImageUri(url, function (uri) {
    console.log(uri);
    document.getElementById('circle').innerHTML = "<img src=" + uri + ">";
});

Here is the codepen of this example. It works in Chrome, but not in FireFox.

I've searched a lot for similar questions here and most of time the reason was use of image without waiting for its loading, but I have this .onload thing, right?

And also I've tried to make same actions as in this question, but FF is still showing just transparent image. Please help!

Upvotes: 5

Views: 1529

Answers (2)

Hanz
Hanz

Reputation: 264

here is my code

const can = document.createElement('canvas');
    // 设置canvas画布大小
    can.width = 240;
    can.height = 140;

    const cans = can.getContext('2d');
    cans.rotate(-25 * Math.PI / 180); // 水印旋转角度
    cans.font = '1.2rem Vedana';
    cans.fillStyle = '#666';
    cans.textAlign = 'center';
    cans.textBaseline = 'Middle';
    cans.fillText(currentUserName, can.width / 2, can.height); // 水印在画布的位置x，y轴
    cans.fillText(currentUserLoginName, can.width / 2, can.height + 25);


    const div = document.createElement('div');
    div.style.pointerEvents = 'none';
    div.style.top = '20px';
    div.style.left = '0px';
    div.style.opacity = '0.20';
    div.style.position = 'fixed';
    div.style.zIndex = '100000';
    div.style.width = document.documentElement.clientWidth + 'px';
    div.style.height = document.documentElement.clientHeight + 'px';
    div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';

    document.body.appendChild(div);

I got the same problem
toDataURL works on chrome,not ok in ie and it do returns a blank image with the width and height i setted
turns out this

 cans.font = '1.2rem Vedana';

is not supported in ie...... i change it into

cans.font = '14px';

and works AHHHHHHHHHHH

Upvotes: -1

Ry-
Ry-

Reputation: 224904

There’s a bug open in Firefox about this: drawImage() fails silently when drawing an SVG image without @width or @height.

You can fix it by adding (go figure) width and height to the SVG:

<svg
    xmlns="http://www.w3.org/2000/svg"
    width="119" height="119" viewBox="0 0 119 119">
    …

Updated Codepen

Upvotes: 11

Related Questions