Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas></canvas>
<script>
(async() => {
const canvas = document.querySelector("canvas");
const data = "data:image/png;base64,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";
// https://stackoverflow.com/q/56801191
// https://github.com/web-platform-tests/wpt/commit/36bfff9e3bafa41e22da654525c3c3f42b6362eb
const IMAGE = atob(data.split(",").pop());
console.log(IMAGE);
const bytes = new Array(IMAGE.length);
for (let i = 0; i < IMAGE.length; i++) {
bytes[i] = IMAGE.charCodeAt(i);
}
const blob = new Blob([new Uint8Array(bytes)]);
let imageBitmap;
try {
imageBitmap = await window.createImageBitmap(blob);
} catch (e) {
console.error(e);
}
console.log(imageBitmap);
canvas.width = imageBitmap.width;
canvas.height = imageBitmap.height;
const ctx = canvas.getContext("2d");
ctx.drawImage(imageBitmap, 0, 0);
})();
</script>
</body>
</html>
@guest271314

This comment has been minimized.

Copy link
Owner Author

commented Jun 29, 2019

@ouroborus The data URL renders at Firefox 69, throws a DOMException at Chromium 77 https://plnkr.co/edit/FgLpwYmvEY8xHSzQdtn5?p=preview

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.