1779963 - toDataUrl() or drawImage() not producing image

Status: RESOLVED DUPLICATE of bug 700533

(Core :: Graphics: Canvas2D, defect)

Description

[rustem.yuzlibaev]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
Firefox for Android

Steps to reproduce:

There is a string image/svg+xml (base64) that needs to be transformed to image/png (base64) (to show this icon in browser notifications):

data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyMiAyMicgPjxwYXRoIGZpbGw9JyNFMzIzMkMnIGQ9J00yMiwxMWMwLDYuMS00LjksMTEtMTEsMTFTMCwxNy4xLDAsMTFTNC45LDAsMTEsMFMyMiw0LjksMjIsMTF6Jy8+PHBhdGggZmlsbD0nI0ZGRkZGRicgZD0nTTUuOCwyMC43YzEuNy0yLjYsMy41LTUuMiw1LjMtNy44bDUuMiw3LjhjMC4zLTAuMSwwLjUtMC4zLDAuOC0wLjVzMC41LTAuMywwLjctMC41IGMtMS45LTIuOS0zLjktNS44LTUuOC04LjdoNS44VjkuMkgxMlY3LjNoNS44VjUuNUg0LjN2MS44aDUuOHYxLjlINC4zVjExaDUuOGwtNS44LDguN0M0LjUsMTkuOSw0LjcsMjAsNSwyMC4yIEM1LjMsMjAuNCw1LjUsMjAuNiw1LjgsMjAuN3onLz48L3N2Zz4=

Function that does transformation:

function base64SvgToBase64Png(imgsrc: string): Promise<string> {
return new Promise((resolve, reject) => {
const canvas = document.createElement('canvas');

canvas.setAttribute('width', '80');
canvas.setAttribute('height', '80');

const context = canvas.getContext('2d');

const image = new Image();
image.src = imgsrc;

image.onload = function () {
  try {
    if (context) {
      context.drawImage(image, 0, 0);
      const base64PNG = canvas.toDataURL('image/png');
      resolve(base64PNG);
    }
  } catch (e) {
    reject(e);
  }
};

});
}

Actual results:

Resolved value of the promise:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAA+0lEQVR4Xu3SsQ0AAAzCsPL/0z3Ca9izWOwaCYzq4gsQTxBggCiAeQ8MEAUw74EBogDmPTBAFMC8BwaIApj3wABRAPMeGCAKYN4DA0QBzHtggCiAeQ8MEAUw74EBogDmPTBAFMC8BwaIApj3wABRAPMeGCAKYN4DA0QBzHtggCiAeQ8MEAUw74EBogDmPTBAFMC8BwaIApj3wABRAPMeGCAKYN4DA0QBzHtggCiAeQ8MEAUw74EBogDmPTBAFMC8BwaIApj3wABRAPMeGCAKYN4DA0QBzHtggCiAeQ8MEAUw74EBogDmPTBAFMC8BwaIApj3wABRAPMeiIAPQ+gAUT8dGT4AAAAASUVORK5CYII=

(image corrupted)

Expected results:

Whereas on Chrome it resolved to this:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAAXNSR0IArs4c6QAACHRJREFUeF7tnX9wVFcVx7/nJSFgCDJWTJvsJmU3sVN2yVSgouNU7Kh1tEUR6B+F1qGMo8XfVcc6Gq221KmOv8qgcRyVtpR2tIA/mXH6Q0qdWimlduIuv5JsILsJiWkEkyBsk93j3AcPdzf79t739r19mx9vBvLHnnfuuZ93vu/ed+999xE8PPoDocYJ0pYB6bAGamGgCeCrALoCgPiXeQwD+DcYp0E4xeATgBap5PQr9bFor1fVoFIWPHTNNbXnxytvAeEmYloFwmInymfwSQDPgfHUvKqJPy06fnzUCb8qPkoCMNHcup45fRuAtSpBOWCzl0h7wtfVsdsBXwVduAawO7D8jVWU/IwGfIKBRrcrks8/AULaPx9PVf5k8clXz7oRg+MA4753zsPcka+C6ZtuBGzXJ4O2zhmjB68c7Dhn14fJRXLOXW8gvEUj3MtAnXNeHfU0pBF/q6Er+lOnvDqSgYmWJdchTd9n0HudCsxlP/s10r7c0NXxSrHlFA0wEQh9gYl+VGwgXpzPRF9q7PrnD4sp2zbAl5cvr6o7k9wBwsZiAvD8XMKukTnpzaEjR163E4stgPFgqBmgxwFcb6fQMjznEDi10R872mk1NssA4y2tK5FOPw2g1mphZW4/Ck17v7+z46CVOC0B7F/cekNKS++bhvAMZqMVae3m+p6Ov6pCVAY4jTMvl5WlTFQCeOmeJ5r86SZbs0QbBXiZvzvaJctEKUC9tT2bfGEaNRgyJsbvhwYXVr9rxeHD44VOkAKMB8I7QbhdtdRpZcfY5Y9FCta9IMCp3El26kIS892+WPTHZv5MAYrHM05r/3AqkKnsh7T023ydR17NVwdTgPFg6BlMnWdbV68PgZ/1dUffpwwwEQjfxYR2V6OaYs6Z8anGWGQSk0kZKMbzqHq0R2VIqnrl9Vi061dTDEV2uMmXXsbQhjuldSBgkJO1i/2JF89nGk8G2Bz6tupg6EwCqEMjvs/fFb3XFKAYhp9DSeWh7xkHEMDrXL0wGDv8HwNiVgb2BsNfJ2CrNJ8vGcxEgAy0NXZHHsgLMBEMn7IyATQTAYqJKl93pGkSwEtTj0+qZp+wm4kA9VshabcaU6aXJRwPhvdYnbet8NWjZu0aK8yltpW+erxh7Ufy2qX6+nFuz++lPqwYpPr67Pjc6++OrNNhiv/EioELE1UjVgp2y7ZQVqt2OdyKLdPv3MrxBWIFhA6wNxC6jUgfovf8mCoAmXlDYyz6xEWAwdAOAm3ynJ7kvlpOGcjghxu7o3caAHsIdPUsQAsEGD3+WCRAYolZiuiUhVNdNZ0qEhYQKpibqDe4dA2Bf+sqFQvOpxJABn2UeoOhNgLdb6GOl00vdmPydzns+NOvakMDataZdGMSfTi31+lujP2uEYO/QfFg+FEAd9ip8EztSBusCHiU4oHwARDePQvQDgEcEBl4AkCLndNnegYCfEIAfC3Pgm4lnrMAMSwAshKtPEazAIFZgIpD+mZJVhRAu5lb6LyFbfdg/qb8c9npkVEMvOcDEH/L5SgrgCq3hPNP/wXDWz5fLvx0CdtuRJyshbagFnV/eBIVvgapWwFQgCyDQzQioeMAvdXrYApJNze2MpJyp8jA5wCs8hKginRz4ysLKTOep0Qw/AgDH/MKoBXp5sZYBlLeWdRgghPQrUi33KSsDyZ4OZwlk66YRDq79bu4ov0h02vlpZT14SyvBlRVpDu0cTOSBw9BlqVeSVkfUBWXNh4Ix5x6d1dV1jIoYw8/pmefOHTYf9yNiob6vO49aZUJPf6uSMCTSSUV6Q6uXp/1xCE7p9RSzp5UKuG0pop0B1ffivGjxyZlmyxrSynlrGnNUk6syyCMbGvHyLb8b6OWk5SzJtb1+6CNpR2q9zvDTibD8WPHMXjL+oJuZT5KJOXspR0iYjuLi6wAlEk3PTqmrxTNJ93ccmRZ7LaU8y4u0iFaXN5mBaCs0mcf+B7GduxUcumllE2Xt4nIi5niLFRzmezsLNmQ+XRLygUXWPZcfd3CyoqJM0ppoGikIt3B1euQSvQrevy/mSyr3ZBywSW+F2W89H4Gt1mujckJskqeuafNzvo8bzrYskXmIqqButaa8fmpkwC9uViIUpk9sx/Dd32uqGKkZTg0gq38moN+L2wOfZqYthdTMxXpDqy6yZH5DVmWOyFlYmzxxSI/y2VS4FWvsBgzv9EuxFJUyojN/VaZn/VbedVLBNbX3LoszenDdgBKZeWAdHPjkpZZhJRtvWx4UcpLv0jMP7ACsZTSLUUH2/brrkZw8ebQLjBtUIVYSunmxuS4lBmP+WORgivXpG+sR5csmVOb1F4gYIUMolRGLkjXRSk788q/CDAeuLYFVCHuh6abTngpXRek7NymE5elLNlwRyZdY3helsVO/F6klJ3f9sSolNnGOzLpZg7POwFIxYcsJpNnZfc23jHLRJl0xcxa7vC8CgAnbGSqyOlgW8o8Iz5pI5KvIpmbj8mCLKV0i2iVDwG8QWWjHeUnEVkGiA15/HVNv3nLvj2mbxt6IV2rrfKFPz91LNr2tVbZBjtmPGxlYKazkW3tv6zZdPtmrXZ+VhleSle1VU4efOn5ue9YWdS6oKIBimD/tenjNyzY8sk91W9fscgI3kvpyqScGnrtQvJvL362Zs2HfyFTmux3RwAahYw9/utH5q3+0B3/3f07MibFZQGU6nejVR6PHP17VfjaDxKR8t4QhWJ0FKAoiPftv3Lgwe/cPdF/+iulgqNUDvF9voe2t9PNNw4o2SsaOQ7QKLdcNuJOi424uXp75k4bimyUzFwDmFn67FbwStdCbpT1MQKiVWBnPkYARg8TH5i2HyMwQ5v5OQwS67QZTSBcBeBN+T+HwcMAnSbgVBrcWQ6fw/gfuU54LYsutWwAAAAASUVORK5CYII=

(here it is possible to see it in base64 image viewer)

Comment 1

[Robert Longson [:longsonr]]

what is the SVG input? Does it have width and height attributes on the root node? If it does are either of them percentages? Is the SVG self-contained i.e. no external references?

Comment 2

[rustem.yuzlibaev]

(In reply to Robert Longson [:longsonr] from comment #1)

what is the SVG input? Does it have width and height attributes on the root node? If it does are either of them percentages? Is the SVG self-contained i.e. no external references?

as stated in post it is ('imgsrc' argument that is passed in base64SvgToBase64Png function):

data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyMiAyMicgPjxwYXRoIGZpbGw9JyNFMzIzMkMnIGQ9J00yMiwxMWMwLDYuMS00LjksMTEtMTEsMTFTMCwxNy4xLDAsMTFTNC45LDAsMTEsMFMyMiw0LjksMjIsMTF6Jy8+PHBhdGggZmlsbD0nI0ZGRkZGRicgZD0nTTUuOCwyMC43YzEuNy0yLjYsMy41LTUuMiw1LjMtNy44bDUuMiw3LjhjMC4zLTAuMSwwLjUtMC4zLDAuOC0wLjVzMC41LTAuMywwLjctMC41IGMtMS45LTIuOS0zLjktNS44LTUuOC04LjdoNS44VjkuMkgxMlY3LjNoNS44VjUuNUg0LjN2MS44aDUuOHYxLjlINC4zVjExaDUuOGwtNS44LDguN0M0LjUsMTkuOSw0LjcsMjAsNSwyMC4yIEM1LjMsMjAuNCw1LjUsMjAuNiw1LjgsMjAuN3onLz48L3N2Zz4=

This image is viewable at https://jaredwinick.github.io/base64-image-viewer/, so it's correct

Comment 3

[Robert Longson [:longsonr]]

Please attach the actual SVG you're trying to convert to this question.

Comment 4

[rustem.yuzlibaev]

(In reply to Robert Longson [:longsonr] from comment #3)

Please attach the actual SVG you're trying to convert to this question.

I don't have image itself but its URI representation:
data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' %3E%3Cpath fill='%23E3232C' d='M22,11c0,6.1-4.9,11-11,11S0,17.1,0,11S4.9,0,11,0S22,4.9,22,11z'/%3E%3Cpath fill='%23FFFFFF' d='M5.8,20.7c1.7-2.6,3.5-5.2,5.3-7.8l5.2,7.8c0.3-0.1,0.5-0.3,0.8-0.5s0.5-0.3,0.7-0.5 c-1.9-2.9-3.9-5.8-5.8-8.7h5.8V9.2H12V7.3h5.8V5.5H4.3v1.8h5.8v1.9H4.3V11h5.8l-5.8,8.7C4.5,19.9,4.7,20,5,20.2 C5.3,20.4,5.5,20.6,5.8,20.7z'/%3E%3C/svg%3E

Then, by running these lines below I will got base64 encodings:

// 'icon' variable here is the URI code above

// take svg string starting from '<' char up to end
const svgUriEncoded = icon.substring(icon.indexOf('%3C'));
const svgUriDecoded = decodeURIComponent(svgUriEncoded);
const base64SvgEncoded = base64.encode(svgUriDecoded);

base64SvgEncoded variable will be this:
PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyMiAyMicgPjxwYXRoIGZpbGw9JyNFMzIzMkMnIGQ9J00yMiwxMWMwLDYuMS00LjksMTEtMTEsMTFTMCwxNy4xLDAsMTFTNC45LDAsMTEsMFMyMiw0LjksMjIsMTF6Jy8+PHBhdGggZmlsbD0nI0ZGRkZGRicgZD0nTTUuOCwyMC43YzEuNy0yLjYsMy41LTUuMiw1LjMtNy44bDUuMiw3LjhjMC4zLTAuMSwwLjUtMC4zLDAuOC0wLjVzMC41LTAuMywwLjctMC41IGMtMS45LTIuOS0zLjktNS44LTUuOC04LjdoNS44VjkuMkgxMlY3LjNoNS44VjUuNUg0LjN2MS44aDUuOHYxLjlINC4zVjExaDUuOGwtNS44LDguN0M0LjUsMTkuOSw0LjcsMjAsNSwyMC4yIEM1LjMsMjAuNCw1LjUsMjAuNiw1LjgsMjAuN3onLz48L3N2Zz4=

Last step adding PREFIX: data:image/svg+xml,base64 to above base64 string at the beginning

I don't think this is useful info as this input is the same for both Firefox and Chrome
Something is happening inside base64SvgToBase64Png() function

Comment 5

[Robert Longson [:longsonr]]

As I hinted in comment 1, you need width and height attributes on the svg root element and the values on the width and height must not be percentages.

Comment 7

[rustem.yuzlibaev]

Thank you for your support