Bonjour, J’espère pouvoir expliquer mon problème et avoir une solution. J’ai trouvé un javascript qui me permet, dans une page html, de transformer des .svg en .png et de les télécharger. Le problème c’est que tous les svg présents sur le page sont transformés et téléchargés. Dans mon cas il y a en 2 : svg id="dessin_1" et svg id="dessin_2" Je souhaiterais donc que lorsque je clique sur le bouton de téléchargement, je puisse télécharger uniquement svg id="dessin_2"… donc qu’il y ait qu’une seule transformation de svg à png càd cibler l’action sur un seul svg.
Voici le javascript :
(function (global) {
let document = global.document;
let body = document.body;
let svg = document.querySelectorAll('svg')
let download_button = document.querySelector('#download');
download_button.addEventListener('click', function () {
for (let i = 0; i < svg.length; i++) {
let canvas = document.createElement("canvas");
let context = canvas.getContext("2d");
let image = new Image;
let width = 750;
let height = 750;
let imageUrl = URL.createObjectURL(new Blob([(new XMLSerializer).serializeToString(svg[i])], { type: "image/svg+xml" }));
image.onload = function () {
setTimeout(function () {
context.drawImage(image, 0, 0, width, height);
canvas.toBlob(function (blob) {
let link = document.createElement("a");
let linkUrl = URL.createObjectURL(blob);
link.download = "image.png";
link.href = linkUrl;
body.appendChild(link);
setTimeout(function () {
link.click();
linkUrl = URL.revokeObjectURL(linkUrl);
imageUrl = URL.revokeObjectURL(imageUrl);
body.removeChild(link);
}, 10);
});
}, 10);
};
canvas.width = width;
canvas.height = height;
image.src = imageUrl;
}
})
})(this);
Y a-t-il un élément à rajouter ou à transformer dans ce script / si oui, lequel et comment ?
Merci pour votre aide
+0
-0
