0

Need help with my function to download a PNG from a SVG. I read many similar post about that but don't succeed to apply to my code.

The image that I download is empty ...

My code :

function downloadCarteJPEG(nom,dpi) {
    var svg = document.querySelector("svg");
    var svgData = "";
    
    if (typeof window.XMLSerializer != "undefined") {
        svgData = (new XMLSerializer()).serializeToString(svg);
    } else {
        console.error("XMLSerializer undefined"); 
        return;
    }
     
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
       
    var svgSize = svg.getBoundingClientRect();
    canvas.width  = svgSize.width  * dpi / 25.4;
    canvas.height = svgSize.height * dpi / 25.4;
     
    var data = btoa(unescape(encodeURIComponent(svgData)));
    data = 'data:image/svg+xml;base64,' + data;
      
    var image = document.createElement("img");
      
    image.onload = function() {
        ctx.drawImage(image, 0, 0);
              
        var link = document.createElement("a");
        link.download = nom;
        link.href = canvas.toDataURL("image/png");
        document.querySelector("body").appendChild(link);
        link.click();
        document.querySelector("body").removeChild(link);
    };
        
    image.src = data;
    console.log("EXIT");
}
Phoenix
  • 1,045
  • 1
  • 14
  • 22
  • On which browser ? If not chrome, does your root `` node has an absolute width and height attribute set ? – Kaiido Apr 26 '17 at 08:04
  • On chrome and firefox. I test yesterday some other things and that worked on chrome (The image was full it my data) but not on firefox. I dont understand why ... –  Apr 26 '17 at 08:21
  • While you are doing some prone to error things (like `btoa(unescape(encodeURI(...)))`), we would need to see your svg markup to be sure what's the issue. But my personal advice : [don't b64 encode](http://stackoverflow.com/questions/43491033/img-onload-not-firing-when-dynamically-setting-src-to-datauri/43495497#43495497). – Kaiido Apr 26 '17 at 08:24
  • I see some things like that to prevent unicode problem but it's not a important now. Yes but how to get the image if i dont encode it ? –  Apr 26 '17 at 09:50
  • That was a link, in which you'll find two different (and preferred) ways to encode your SVGnode into an image file. First one is simply percentage encoding it, second one is creating a Blob. – Kaiido Apr 26 '17 at 09:52
  • What is Blob ? What thee difference between both ? We need a canvas to use the blob ? Note that i work with d3 and SVG format but don't know how work canvas, i use it just to download my SVG to a PNG. –  Apr 26 '17 at 09:55
  • Yes you need a canvas in any way. It's only how you'll convert your DOMNode to something that can be handled by an `` tag. Currently, you are converting it to a base64 string, which is then passed directly as a dataURI (the file is contained in the URI). This is not needed and the source of many problem, since you can directly pass the percent-encoded string as a dataURI. Or you can go the Blob way, which will create a real file, with your svg markup, just like if it were a real svg file, but only accessible in browser's memory... – Kaiido Apr 26 '17 at 10:01
  • ... So to make this file accessible to the ``, we use `URL.createObjecURL(blob)`, which returns a small uri, pointing to this file, in the memory. Canvas needs an `` as source for drawImage (other sources are allowed, but it's the only one that can handle SVG). So you need to convert your DOMNode to something that `` can read from. – Kaiido Apr 26 '17 at 10:01
  • OKay thanks it's more clear, i will test to use blob this evening. I come back to you when I tested –  Apr 26 '17 at 10:20

0 Answers0