在浏览器中将SVG转换为图像（JPEG，PNG等）-Java 学习之路

255

我想通过JavaScript将SVG转换为位图图像（如JPEG，PNG等） .

6 回答

219
以下是通过JavaScript实现的方法：
- 使用canvg JavaScript库使用Canvas渲染SVG图像：https://github.com/gabelerner/canvg
- 根据以下说明从Canvas中捕获编码为JPG（或PNG）的数据URI：Capture HTML Canvas as gif/jpg/png/pdf?
回复于 2024-04-19T19:36:46+08:00

jbeard4解决方案工作得很漂亮 .

我正在使用Raphael SketchPad创建一个SVG . 链接到步骤1中的文件 .

对于Save按钮（svg的id是“editor”，canvas的id是“canvas”）：

$("#editor_save").click(function() {

// the canvg call that takes the svg xml and converts it to a canvas
canvg('canvas', $("#editor").html());

// the canvas calls to output a png
var canvas = document.getElementById("canvas");
var img = canvas.toDataURL("image/png");
// do what you want with the base64, write to screen, post to server, etc...
});

回复于 2024-04-19T19:36:46+08:00

-1

这似乎适用于大多数浏览器：

function copyStylesInline(destinationNode, sourceNode) {
   var containerElements = ["svg","g"];
   for (var cd = 0; cd < destinationNode.childNodes.length; cd++) {
       var child = destinationNode.childNodes[cd];
       if (containerElements.indexOf(child.tagName) != -1) {
            copyStylesInline(child, sourceNode.childNodes[cd]);
            continue;
       }
       var style = sourceNode.childNodes[cd].currentStyle || window.getComputedStyle(sourceNode.childNodes[cd]);
       if (style == "undefined" || style == null) continue;
       for (var st = 0; st < style.length; st++){
            child.style.setProperty(style[st], style.getPropertyValue(style[st]));
       }
   }
}

function triggerDownload (imgURI, fileName) {
  var evt = new MouseEvent("click", {
    view: window,
    bubbles: false,
    cancelable: true
  });
  var a = document.createElement("a");
  a.setAttribute("download", fileName);
  a.setAttribute("href", imgURI);
  a.setAttribute("target", '_blank');
  a.dispatchEvent(evt);
}

function downloadSvg(svg, fileName) {
  var copy = svg.cloneNode(true);
  copyStylesInline(copy, svg);
  var canvas = document.createElement("canvas");
  var bbox = svg.getBBox();
  canvas.width = bbox.width;
  canvas.height = bbox.height;
  var ctx = canvas.getContext("2d");
  ctx.clearRect(0, 0, bbox.width, bbox.height);
  var data = (new XMLSerializer()).serializeToString(copy);
  var DOMURL = window.URL || window.webkitURL || window;
  var img = new Image();
  var svgBlob = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
  var url = DOMURL.createObjectURL(svgBlob);
  img.onload = function () {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
    if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob)
    {
        var blob = canvas.msToBlob();         
        navigator.msSaveOrOpenBlob(blob, fileName);
    } 
    else {
        var imgURI = canvas
            .toDataURL("image/png")
            .replace("image/png", "image/octet-stream");
        triggerDownload(imgURI, fileName);
    }
    document.removeChild(canvas);
  };
  img.src = url;
}

回复于 2024-04-19T19:36:46+08:00

6
这是基于PhantomJS的服务器端解决方案 . 您可以使用JSONP对映像服务进行跨域调用：

https://github.com/vidalab/banquo-server

例如：

http://[host]/api/https%3A%2F%2Fvida.io%2Fdocuments%2FWgBMc4zDWF7YpqXGR/viewport_width=980&viewport_height=900&delay=5000&selector=%23canvas

然后你可以用img标签显示图像：
```
<img src="data:image/png;base64, [base64 data]"/>
```
它适用于浏览器 .
回复于 2024-04-19T19:36:46+08:00

更改 svg 以匹配您的元素

function svg2img(){
    var svg = document.querySelector('svg');
    var xml = new XMLSerializer().serializeToString(svg);
    var svg64 = btoa(xml);
    var b64start = 'data:image/svg+xml;base64,';
    var image64 = b64start + svg64;
    return image64;
};svg2img()

回复于 2024-04-19T19:36:46+08:00

39

如果您不是以编程方式表示，则此问题应该属于superuser.com .

无论哪种方式，Batik SVG Toolkit都可能有所帮助，尤其是SVG Rasterizer .

回复于 2024-04-19T19:36:46+08:00

在浏览器中将SVG转换为图像（JPEG，PNG等）

6 回答

相关问题