Skip to content

Instantly share code, notes, and snippets.

@XianYeeXing
Last active May 16, 2024 15:45
Show Gist options
  • Save XianYeeXing/b5372e87e9485a2753b8e2a54136c3d9 to your computer and use it in GitHub Desktop.
Save XianYeeXing/b5372e87e9485a2753b8e2a54136c3d9 to your computer and use it in GitHub Desktop.
Convert SVG (data url) into PNG (data url) and scale it to the desired size.
/*
EXAMPLE
=======
svgToPng(
'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgaGVpZ2h0PSczMDBweCcgd2lkdGg9JzMwMHB4JyAgZmlsbD0iIzAwMDAwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCA1LjU1NiAxMDAgODguODg5IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgNS41NTYgMTAwIDg4Ljg4OSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PHBhdGggZD0iTTkwLDE2LjY2N1Y1LjU1Nkg1NS41NTZ2MTEuMTExSDQ0LjQ0NFY1LjU1NkgxMHYxMS4xMTFINy42NDFIMFY1MGg3LjY0MUgxMHYxMi4yMjNoMTEuMTExdjEwaDExLjExMXYxMi4yMjJoMTEuMTExdjEwDQoJCWgxMy4zMzN2LTEwaDExLjExVjcyLjIyM2gwLjk5NGgxMC4xMTd2LTEwSDkwVjUwaDIuMjgzSDEwMFYxNi42NjcgTTI0LjQ0NCwyOS4wMTZ2MTIuMDk2SDExLjExMVYyOS4wMTZWMTcuNzc4aDEzLjMzM1YyOS4wMTZ6Ij48L3BhdGg+PC9nPjwvc3ZnPg==',
65,
65
)
.then(console.log);
*/
const svgToPng = (svgDataurl, width, height) => new Promise((resolve, reject) => {
let canvas;
let ctx;
let img;
img = new Image();
img.src= svgDataurl;
img.onload = () => {
canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, width, height);
img = new Image();
img.src = canvas.toDataURL('image/png');
img.onload = () => {
canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
resolve(canvas.toDataURL('image/png'));
}
};
});
@Sivakumar00
Copy link

Really helpful 👍

@tsogzark
Copy link

21 - canvas.width = img.width;
22 - canvas.height = img.height;
21 + canvas.width = width;
22 + canvas.height = height;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment