Last active
May 16, 2024 15:45
-
-
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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')); | |
} | |
}; | |
}); |
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
Really helpful 👍