将D3 svg保存为高质量图像 [英] Save D3 svg as a high quality image
本文介绍了将D3 svg保存为高质量图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有什么办法可以将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（）;
解决方案
只需更改 / code> / height 应该给出一个更大的输出图像。
此外，您可能需要将 context.drawImage（image，0，0）; 更改为 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 =imagepnga.innerHTML =输出文件，右键单击 - 保存为自从点击（）将不工作在代码段; a.download =output.png; a.href = canvasdata; document.body.insertBefore（a，document.getElementById（`chartId`））;}
< div id =chartId> < svg version =1.1xmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/xlinkx =0pxy =0pxviewBox =0 0 800 800xml：space =preserveheight =500width =500> < g id =layer1transform =translate（-3.6028037，-330.49911）> < g id =g3691> < path id =path1160fill =＃FFFFFFstroke =＃000000stroke-width =17.9963stroke-linecap =roundstroke-linejoin =roundd =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.1 S-2.8， 580.3,24.5,518.1z/> < path id =path1162fill =＃FFFFFFstroke =＃000000stroke-width =18stroke-linecap =roundstroke-linejoin =roundd =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 =path1159fill =＃FFFFFFstroke =＃000000stroke-width =3.5115stroke-linecap =roundstroke-linejoin =roundd =M641.7,645.4c0,390.6 -532.8,390.6-532.8,0S641.7,254.8,641.7,645.4z/> < path id =path3026fill =＃FFFFFFstroke =＃000000stroke-width =8.9982d =M375.4,513.3 c-6.5,0-84.5-26.3-124.4-16.8c- 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.3 z/> < path id =path3027fill =nonestroke =＃000000stroke-width =2.5stroke-linecap =roundstroke-linejoin =roundd =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 =path3028fill =nonestroke =＃000000stroke-width =2.5stroke-linecap =roundstroke-linejoin =roundd =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 =path3029fill =nonestroke =＃000000stroke-width =2.5stroke-linecap =roundstroke-linejoin =roundd =M420.4,694.6c0,32- 92.5,32-92.5,010,0C327.9,662.6,420.4,662.6,420.4,694.6z/> < path id =path3030fill =nonestroke =＃000000stroke-width =31.4936stroke-linecap =roundd =M214.7826.6c63.5,86.8,242.2,111.4,330.3 ，2.6/> < / g> < / g> < / svg>< / div>< div id =pngcon>< / div>
注意，如果您只需要下载图片，则不需要将canvas附加到文档中，您可以将其保留在浏览器的缓存中。
is there any way to save a D3 SVG image as a high quality image? If yes please explain... As of now i am using following code to save svg as image,but images i am getting are not high quality-
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();
解决方案
Simply changing the width/height of your canvas should give your a bigger output image.
Furthermore, you'll probably need to change 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>
Side note, if you only need to download the image, you don't need to actually append the canvas to the document, you can leave it in browser's cache.
这篇关于将D3 svg保存为高质量图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
