So exportieren Sie ein aus einem SVG-Element und einer CSV-Datei erzeugtes PNG-Bild in eine herunterladbare ZIP-Datei

Ich exportiere ein SVG in ein PNG-Bild. Nun möchte ich dieses PNG-Bild und eine CSV-Datei in einen ZIP-Ordner herunterladen. Ich verwende JSZIP, um zwei Dateien in einen ZIP-Ordner zu zippen. Wenn ich nun auf den Download-Button klicke, werden die ZIP-Dateien heruntergeladen. Die heruntergeladene ZIP-Datei enthält die CSV-Datei wie gewünscht, besteht jedoch aus einem leeren Bild. Wie bekomme ich das benötigte Bild in den gewünschten ZIP-Ordner?So exportieren Sie ein aus einem SVG-Element und einer CSV-Datei erzeugtes PNG-Bild in eine herunterladbare ZIP-Datei

Mein aktueller Code ist:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <link href="../build/nv.d3.css" rel="stylesheet" type="text/css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script> 
    <script src="../build/nv.d3.js"></script> 
    <script type="text/javascript" src="FileSaver.js"></script> 
    <script type="text/javascript" src="jszip.js"></script> 

    <style> 
     text { 
      font: 12px sans-serif; 
     } 
     svg { 
      display: block; 
     } 
     html, body, #chart1, svg { 
      margin: 0px; 
      padding: 0px; 
      height: 100%; 
      width: 100%; 
     } 

     .dashed { 
      stroke-dasharray: 5,5; 
     } 
    </style> 
    <script type="text/javascript"> 

    function download() 
    { 


img = new Image(), 
     serializer = new XMLSerializer(), 
     svgStr = serializer.serializeToString(document.getElementById('svg')); 

    img.src = 'data:image/svg+xml;base64,'+window.btoa(svgStr); 

    // You could also use the actual string without base64 encoding it: 
    //img.src = "data:image/svg+xml;utf8," + svgStr; 

    var canvas = document.createElement("canvas"); 

    var w=3000; 
    var h=3000; 

    canvas.width = w; 
    canvas.height = h; 
    canvas.getContext("2d").drawImage(img,0,0,w,h); 

    var imgURL = canvas.toDataURL("image/png"); 


var CSV="ab"; 

var zip = new JSZip(); 

zip.file("abc.csv", CSV); 
zip.file("img.png", imgURL); 

content = zip.generate(); 
    location.href="data:application/zip;base64," + content; 
    } 

    </script> 
</head> 
<body > 

<div id="chart1" width="100%" height='100%'></div> 
<button onclick="download()">Download</button> 

<script> 


var data = [{"color":"#a215af","key":"products","values":[ 
    {"y":0,"x":0}, 
    {"y":0,"x":1}, 
    {"y":1,"x":2}, 
    {"y":6,"x":3}, 
    {"y":2,"x":4}, 
    {"y":0,"x":5}, 
    {"y":13,"x":6}]}] 

nv.addGraph(function() { 
     chart = nv.models.lineChart() 
      .options({ 
       transitionDuration: 300, 
       useInteractiveGuideline: true 
      }) 
     ;; 

    var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]; 

    chart.xAxis 
    .rotateLabels(-45) 
    .tickValues([0, 1, 2, 3, 4, 5, 6]) 
    .tickFormat(function(d){ 
     return days[d] 
    }); 


chart.yAxis 
      .axisLabel('Voltage (v)') 
      .tickFormat(function(d) { 
       if (d == null) { 
        return 'N/A'; 
       } 
       return d3.format(',.2f')(d); 
      }); 


d3.select('#chart1').append('svg') 
      .datum(data) 
      .attr("id","svg") 
      .attr("height","1000") 
      .attr("width","1000") 
      .call(chart); 

    nv.utils.windowResize(chart.update); 

    return chart; 
}); 



</script> 
</body> 
</html>

Quelle

2016-05-26 Jason

Haben Sie die Erweiterung zu ändern versucht? Versuchen Sie, JPEG zu setzen, wenn ich mich richtig erinnere, hatten wir ein ähnliches Problem und war mit der Erweiterung und dem MIME-Typ verwandt – torresomar

In Ihrem Fall Sie JSZip sagen, dass der Inhalt des Bildes die Zeichenfolge data:image/png;base64,iVBORw0K.... Die einfachste Lösung ist den data:image/png;base64, Teil zu entfernen und base64: true verwenden:

zip.file("img.png", imgURL.slice("data:image/png;base64,".length), {base64:true});

Aber Erstellen/Parsen base64-Strings nicht effizient ist (ich auch ein 3000x3000 Graubild mit Ihrem Code zu bekommen, aber das ist nicht verwandt).

Sie können auch Blob verwenden base64 Manipulation zu vermeiden (und verwenden JSZip v3 zu unterstützen): canvas.toBlob eine PNG-Datei als Blob zu bekommen, URL.createObjectURL die URL des Zwischenbild zu erzeugen.

Beispiel dieser Lösung (ich nicht ein perfektes Bild, aber Ihr Problem bekommen könnte, um ein Bild in einer Zip-Datei setzen, ist festgelegt):

var canvas = document.createElement("canvas"); 
canvas.width = 1000; 
canvas.height = 1000; 
var ctx = canvas.getContext("2d"); 

var serializer = new XMLSerializer(), 
    svgString = serializer.serializeToString(document.getElementById('svg')); 

var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"}); 
var url = URL.createObjectURL(svg); // <-- create a blob url for the svg image 
var img = new Image(); 
img.onload = function() { 
    // draw the svg to a canvas 
    ctx.drawImage(img, 0, 0); 
    URL.revokeObjectURL(url); 
    canvas.toBlob(function (blob) { // <-- convert the canvas to a png (in a blob) 

    var zip = new JSZip(); 
    zip.file("abc.csv", CSV); 
    zip.file("img.png", blob); // <-- JSZip v3 accepts blob 

    content = zip.generateAsync({type:"blob"}).then(function (blob) { 
     saveAs(blob, "result.zip"); // <-- trigger the download 
    }, function (e) { 
     console.error(e) 
    }); 
    }, "image/png"); 
}; 
img.src = url; // <-- load the blob url

Quelle

2016-05-26 19:38:00

So exportieren Sie ein aus einem SVG-Element und einer CSV-Datei erzeugtes PNG-Bild in eine herunterladbare ZIP-Datei

Antwort

Verwandte Themen