程序员经验分享-hwhale

将 D3 svg 保存为高质量图像

2024-04-25

有没有办法将 D3 SVG 图像保存为高质量图像？如果是的话请解释一下... 截至目前，我正在使用以下代码将 svg 保存为图像，但我得到的图像质量不高-

var canvas1 = document.createElement('canvas');
canvas1.id     = "canvas1";
canvas1.width  = w+50;
canvas1.height = h+50;
document.getElementById('pngcon').appendChild(canvas1);

var html = new XMLSerializer().serializeToString(document.getElementById(chartId).querySelector('svg'));

var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);

 var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
var canvasdata;
var image = new Image;
image.src = imgsrc;
image.onload = function() {
context.drawImage(image, 0, 0);

  canvasdata = canvas.toDataURL("image/png");

var a = document.createElement("a");
a.id="imagepng"
a.download = chartname+".png";
a.href = canvasdata;
document.body.appendChild(a);
document.getElementById("imagepng").click();

只需更改width/height你的画布应该给你一个更大的输出图像。

此外，您可能需要更改context.drawImage(image, 0, 0); to context.drawImage(image, 0, 0, canvas.width, canvas.height);)

var w = 100,
  h = 100;
var canvas1 = document.createElement('canvas');
canvas1.id = "canvas1";
canvas1.width = w * 50;
canvas1.height = h * 50;
document.getElementById('pngcon').appendChild(canvas1);

var html = new XMLSerializer().serializeToString(document.getElementById(`chartId`).querySelector('svg'));

var imgsrc = 'data:image/svg+xml;base64,' + btoa(html);

var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
var canvasdata;
var image = new Image;
image.src = imgsrc;
image.onload = function() {
  context.drawImage(image, 0, 0, canvas.width, canvas.height);

  canvasdata = canvas.toDataURL("image/png");

  var a = document.createElement("a");
  a.id = "imagepng"
  a.innerHTML = "output file, right click - save as since click() won't work in snippet";
  a.download = "output.png";
  a.href = canvasdata;
  document.body.insertBefore(a, document.getElementById(`chartId`));
}
<div id="chartId">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 800 800" xml:space="preserve" height="500" width="500">

    <g id="layer1" transform="translate(-3.6028037,-330.49911)">
      <g id="g3691">
        <path id="path1160" fill="#FFFFFF" stroke="#000000" stroke-width="17.9963" stroke-linecap="round" stroke-linejoin="round" d="
			M24.5,518.1c27.3-62.2,84.5-97.3,127.7-78.3c43.2,19,56.1,84.8,28.8,147c-27.3,62.2-35.6,91.9-117.7,58.7
			C19.6,627.8-2.8,580.3,24.5,518.1S-2.8,580.3,24.5,518.1z" />

        <path id="path1162" fill="#FFFFFF" stroke="#000000" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" d="
			M736.6,520.7c-27.3-62.2-84.5-97.3-127.7-78.3c-43.2,19-56.1,84.8-28.8,147s35.6,91.9,117.7,58.7
			C741.5,630.4,763.9,582.9,736.6,520.7L736.6,520.7z" />

        <path id="path1159" fill="#FFFFFF" stroke="#000000" stroke-width="3.5115" stroke-linecap="round" stroke-linejoin="round" d="
			M641.7,645.4c0,390.6-532.8,390.6-532.8,0S641.7,254.8,641.7,645.4z" />
        <path id="path3026" fill="#FFFFFF" stroke="#000000" stroke-width="8.9982" d="M375.4,513.3
			c-6.5,0-84.5-26.3-124.4-16.8c-71.2,16.8-102.3,69.9-84.2,169.7c8.7,48,33.7,79,33.7,79s-55.7,19.6-47.9,97.2
			c10.4,103.6,121,147.3,238.3,146.4c98.6-0.8,211-47.9,212.4-141.2c1.1-83.1-24.6-86.8-46.6-103.6c5.2-6.5,16.7-41.7,31.1-93.3
			c22-79-15.5-142.5-107.5-155.4C443.3,489.9,383.1,513.3,375.4,513.3z" />

        <path id="path3027" fill="none" stroke="#000000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="
			M299.4,556.7c27.3-1.1,30.3,75.3,3,76.4l0,0C275.1,634.1,272.1,557.8,299.4,556.7z" />

        <path id="path3028" fill="none" stroke="#000000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="
			M450.2,633c-27.3,1.2-30.6-75.2-3.3-76.4l0,0C474.2,555.5,477.5,631.9,450.2,633z" />

        <path id="path3029" fill="none" stroke="#000000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="
			M420.4,694.6c0,32-92.5,32-92.5,0l0,0C327.9,662.6,420.4,662.6,420.4,694.6z" />
        <path id="path3030" fill="none" stroke="#000000" stroke-width="31.4936" stroke-linecap="round" d="
			M214.7,826.6c63.5,86.8,242.2,111.4,330.3,2.6" />
      </g>
    </g>
  </svg>
</div>
<div id="pngcon"></div>

旁注，如果您只需要下载图像，则不需要实际将画布附加到文档中，可以将其保留在浏览器的缓存中。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

SVG

d3js

将 D3 svg 保存为高质量图像 的相关文章

  • ios safari - getUserMedia 无法正常工作

    我真的有this https stackoverflow com q 45692526 6048715问题 但 OP 的解决方案对我不起作用 重申一下 我正在使用navigator mediaDevices getUserMedia 在浏览

  • JavaScript 闭包与匿名函数

    我和我的一个朋友目前正在讨论 JS 中什么是闭包 什么不是 我们只是想确保我们真正正确地理解它 我们以这个例子为例 我们有一个计数循环 想要在控制台上延迟打印计数器变量 因此我们使用setTimeout and closures捕获计数器变

  • 使用 ChartJS v2.0 自定义图例

    我正在尝试在 ChartJS v2 0 中创建自定义图例模板 在 ChartJS v1 中 我只是向新的 Chart 构造函数添加了一个属性 例如 legendTemplate ul li span style background col

  • 在 Three.js 中使用多种材质来合并几何体

    我想使用 2 个网格创建一棵松树 其中 1 个用于树干 另一个用于灌木 这就是我所做的 var pine geometry new THREE Geometry var pine texture 1 THREE ImageUtils loa

  • D3js 多折线图 mouseOver

    我正在努力适应this http bl ocks org mbostock 3902569D3js 折线图示例 将鼠标悬停在我的多线图表上的使用情况 看起来d3 mouse this 0 on the mousemove函数生成以下错误 无

  • Raphael JS 中的动画字体大小是否有流畅的过渡可能性？

    到目前为止似乎它不流畅 但波涛汹涌 例如 如果您有一个 font size 14 的状态属性 并且想要以动画方式显示 font size 16 的状态 则过渡看起来并不平滑 它分两步跳跃 首先更改为 15 然后更改为 16px 可以强迫它看

  • 弹出窗口显示来自 php 和 javascript 的结果

    我正在尝试实现 javascript 来显示 php 的结果 基本上 我有一个登录页面 对于登录失败 我希望结果显示在弹出窗口中 而不是仅仅用 php 回显它们 我尝试实现警报框 但看起来我错过了一些东西 成功登录将被重定向到logged

  • Chrome 的萤火虫

    谁能推荐一个类似于 Firebug 的不错的 Google Chrome 扩展程序 我确实看到这里有几个类似的问题 但答案似乎非常过时 Thanks It s built in Press Ctrl Shift I Or Tools gt

  • 使用 var 与 let/const 进行块级变量重新声明

    Part 1 给出这个例子 var number 10 var number 42 console log number 42 为什么第 4 行不抛出Uncaught SyntaxError Identifier number has al

  • 在 Codeigniter 中使用/嵌入 Ember js

    我即将开始开发一个 Web 应用程序 使用 Ember js 作为前端技术 使用 Codeigniter 作为后端 我遇到的问题是如何在 codeigniter 中嵌入或使用 ember js 可以通过 Web 服务从 codeignite

  • 在 WordPress 页面上嵌入 swf

    我正在尝试将 swf 嵌入到 WordPress 页面中 这听起来很简单 但它不起作用 我不明白为什么 我已将所有相关文件上传到服务器上 并且我相当确定所有文件路径都是正确的 包含 fla 和 swf 文件的文件夹还包含一个 index h

  • 在 JavaScript 中将整数数组转换为字符串数组

    我有一个如下所示的数组 var sphValues 1 2 3 4 5 然后我需要转换上面的数组 如下所示 var sphValues 1 2 3 4 5 我怎样才能转换 我用它来自动完成 您可以使用map https developer

  • 在javascript中调用c#函数[重复]

    这个问题在这里已经有答案了 可能的重复 从 Javascript 调用 ASP NET 函数 https stackoverflow com questions 3713 call asp net function from javascr

  • 我们可以使用 axios 的 onDownloadProgress 来加载 API 吗？

    我需要使用 axios 创建一个用于在 React 项目中加载 API 的进度条 我为此发现了 onDownloadProgress 函数 但我不知道我们是否可以使用它来获取诸如加载百分比之类的信息 或者它是否仅用于文件下载 所以我不确定我

  • 同步 jQuery 动画

    我正在尝试同时获得淡入 不透明度切换 和边框淡入 使用jquery 动画颜色 http www bitstorm org jquery color animation 同时开火 但我遇到了一些麻烦 有人可以帮忙查看以下代码吗 fn exte

  • 在 JavaScript 中添加事件的最佳方式是什么？

    我发现在 JavaScript 中设置事件有两种主要方法 直接在标签内添加一个事件 如下所示 a href do foo a 通过 JavaScript 设置它们 如下所示 a href do bar a 并在 a 中添加一个事件

  • 确定$.ajax错误是否是超时

    我正在利用魔法jQuery ajax settings 不过 我想知道是否有人经常使用超时设置 我知道它基本上是为了规定请求的本地时间 但是如果达到超时 它会触发任何事情吗 或者它只是停止监听响应 阅读 jQuery 站点 我可以看到没有传

  • 从 BLOB 打印 PDF

    我从外部 API 获取 PDF 文件 使用此代码我可以正确下载该文件 var req new XMLHttpRequest req open POST url true req responseType blob req setReques

  • Selenium - 运行 javascript

    我有一个愚蠢的问题 如何运行位于测试站点上的脚本 我可以运行警报 但我无权访问我编写的脚本 我尝试过 runscript geteval 没有任何效果 由于 Selenium 是用 JavaScript 编写的 因此 window 对象会移

  • 查找 div 元素中的所有链接并禁用它们

    假设我有一些如下所示的 HTML 元素 div span a href some link Click me a span div Hello everybody Click a href some link else me a to do

随机推荐

热门标签