个人中心
gpt4 book ai didi

javascript - 如何将从 SVG 元素和 csv 文件生成的 PNG 图像导出到可下载的 ZIP 文件中

转载 作者：行者123 更新时间：2023-12-03 06:52:04 25 4
gpt4 key购买 nike

我正在将 SVG 导出到 PNG 图像。现在我想将此 PNG 图像和 CSV 文件下载到 ZIP 文件夹中。我使用 JSZIP 来将两个文件压缩到 ZIP 文件夹中。现在当我单击在下载按钮上，ZIP 下载。下载的 ZIP 包含所需的 CSV 文件，但包含空白图像。如何将所需的图像下载到所需的 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>

最佳答案

在您的例子中，您告诉 JSZip 图像的内容是字符串 data:image/png;base64,iVBORw0K...。最简单的解决方案是删除 data:image/png;base64, 部分并使用 base64: true:

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

但是创建/解析 base64 字符串效率不高(我还通过您的代码获得了 3000x3000 灰度图像，但这无关)。

您还可以使用Blob来避免base64操作(并使用JSZip v3来支持它):canvas.toBlob以blob形式获取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

关于javascript - 如何将从 SVG 元素和 csv 文件生成的 PNG 图像导出到可下载的 ZIP 文件中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37451210/

25 4 0
文章推荐： javascript - 如何在单击 div 时调用函数？
文章推荐： javascript - 我无法从 JSON 文件获取数据 - $.getJSON 不起作用
文章推荐： javascript - 嵌套函数的回调
文章推荐： javascript - 如何采集单栏内容
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com