首頁猿問將SVG轉(zhuǎn)換為圖像(JPEG、PN...

將SVG轉(zhuǎn)換為圖像(JPEG、PNG等)在瀏覽器中

JavaScript

牛魔王的故事 2019-06-14 10:58:17

將SVG轉(zhuǎn)換為圖像(JPEG、PNG等)在瀏覽器中我想將SVG轉(zhuǎn)換成位圖圖像(如JPEG、PNG等)通過JavaScript。

查看完整描述

3 回答

臨摹微笑

TA貢獻(xiàn)1982條經(jīng)驗(yàn) 獲得超2個(gè)贊

Jbeard 4解決方案效果很好。

我在用拉斐爾草圖來創(chuàng)建一個(gè)SVG。鏈接到步驟1中的文件。

對(duì)于保存按鈕(SVG的id是“編輯器”，畫布的id是“畫布”)：

$("#editor_save").click(function() {// the canvg call that takes the svg xml and converts it to a canvascanvg('canvas', $("#editor").html());
// the canvas calls to output a pngvar canvas = document.getElementById("canvas");var img = canvas.toDataURL("image/png");
// do what you want with the base64, write to screen, post to server, etc...});

反對(duì) 回復(fù) 2019-06-14

紅糖糍粑

TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超6個(gè)贊

這似乎適用于大多數(shù)瀏覽器：

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;}

反對(duì) 回復(fù) 2019-06-14