SVG要素とcsvファイルから生成されたPNG画像をダウンロード可能なZIPファイルにエクスポートする方法

SVGをPNG画像にエクスポートしています。このPNG画像とCSVファイルをZIPフォルダにダウンロードします。 2つのファイルをZIPフォルダに圧縮する目的でJSZIPを使用しています。ダウンロードボタンをクリックするとZIPがダウンロードされます。ダウンロードしたZIPには必要に応じてCSVファイルが含まれていますが、空の画像で構成されています。必要なZIPフォルダに必要な画像をダウンロードするには？SVG要素とcsvファイルから生成されたPNG画像をダウンロード可能なZIPファイルにエクスポートする方法

私の現在のコードは次のとおりです。あなたの場合は

<!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>

出典

2016-05-26 Jason

あなたは拡張子を変更しようとしたことがありますか？私が正しく覚えていれば、同様の問題があり、拡張子とMIMEタイプに関連していたことを覚えていれば、JPEGを設定しようとする – torresomar

、あなたは画像の内容が文字列data:image/png;base64,iVBORw0K...であることJSZipを教えてください。最も簡単な解決策はdata:image/png;base64,一部を除去し、base64: trueを使用することです：

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

しかし、base64で文字列を解析/作成（私もあなたのコードで3000x3000グレー画像を得るが、それは無関係です）効率的ではありません。

また、BASE64操作を避ける（とそれをサポートするためにJSZip V3を使用）するためにBlobを使用することができます。canvas.toBlobブロブとしてPNG形式のファイルを取得するには、URL.createObjectURL中間画像のURLを生成します。

この解決策の例は、（私はzipファイルに画像を入れて、完璧なイメージが、あなたの問題を得ることができなかった、固定）：

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

出典

2016-05-26 19:38:00

SVG要素とcsvファイルから生成されたPNG画像をダウンロード可能なZIPファイルにエクスポートする方法

答えて

関連する問題