在浏览器中将SVG转换为图像(JPEG、PNG等)

我想通过JavaScript将SVG转换为位图图像(如JPEG, PNG等)。

下面是你如何通过JavaScript来做到这一点:

使用Canvas JavaScript库渲染SVG图像:https://github.com/gabelerner/canvg 根据以下说明，从画布中捕获编码为JPG(或PNG)的数据URI:

2010-10-20 08:35:10

Jbeard4解决方案工作得很好。

我使用Raphael SketchPad创建SVG。链接到步骤1中的文件。

对于保存按钮(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...
});

2012-06-27 14:27:55

这似乎在大多数浏览器中都有效:

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

2017-06-26 21:40:59

更改SVG以匹配您的元素

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

2018-11-21 09:56:53

我最近发现了几个用于JavaScript的图像跟踪库，它们确实能够构建一个可接受的位图近似值，包括大小和质量。我正在开发这个JavaScript库和CLI:

https://www.npmjs.com/package/svg-png-converter

它为所有这些提供了统一的API，支持浏览器和节点，不依赖于DOM，以及命令行工具。

对于转换标志/卡通/喜欢的图像，它做得很好。对于照片/现实主义，需要一些调整，因为输出大小可以增长很多。

它有一个游乐场，虽然现在我正在做一个更好的，更容易使用，因为添加了更多的功能:

https://cancerberosgx.github.io/demos/svg-png-converter/playground/#

2019-06-19 12:48:55

我的用例是从网络加载svg数据，这个ES6类做了这项工作。

class SvgToPngConverter {
  constructor() {
    this._init = this._init.bind(this);
    this._cleanUp = this._cleanUp.bind(this);
    this.convertFromInput = this.convertFromInput.bind(this);
  }

  _init() {
    this.canvas = document.createElement("canvas");
    this.imgPreview = document.createElement("img");
    this.imgPreview.style = "position: absolute; top: -9999px";

    document.body.appendChild(this.imgPreview);
    this.canvasCtx = this.canvas.getContext("2d");
  }

  _cleanUp() {
    document.body.removeChild(this.imgPreview);
  }

  convertFromInput(input, callback) {
    this._init();
    let _this = this;
    this.imgPreview.onload = function() {
      const img = new Image();
      _this.canvas.width = _this.imgPreview.clientWidth;
      _this.canvas.height = _this.imgPreview.clientHeight;
      img.crossOrigin = "anonymous";
      img.src = _this.imgPreview.src;
      img.onload = function() {
        _this.canvasCtx.drawImage(img, 0, 0);
        let imgData = _this.canvas.toDataURL("image/png");
        if(typeof callback == "function"){
            callback(imgData)
        }
        _this._cleanUp();
      };
    };

    this.imgPreview.src = input;
  }
}

下面是你如何使用它

let input = "https://restcountries.eu/data/afg.svg"
new SvgToPngConverter().convertFromInput(input, function(imgData){
    // You now have your png data in base64 (imgData). 
    // Do what ever you wish with it here.
});

如果你想要一个普通的JavaScript版本，你可以访问Babel网站并在那里编译代码。

2019-07-22 22:02:42

解决方案转换SVG到blob URL和blob URL到png图像

2019-09-28 00:18:33

Svg到png可以根据条件转换:

如果svg的格式是svg(字符串)路径:

创建画布创建新的Path2D()并设置svg为参数在画布上绘制路径创建图像并使用canvas.toDataURL()作为src。

例子:

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
let svgText = 'M10 10 h 80 v 80 h -80 Z';
let p = new Path2D('M10 10 h 80 v 80 h -80 Z');
ctx.stroke(p);
let url = canvas.toDataURL();
const img = new Image();
img.src = url;

注意，ie中不支持Path2D, edge中部分支持。填充物解决了这个问题: https://github.com/nilzona/path2d-polyfill

使用.drawImage()创建svg blob并在画布上绘制:

制作画布元素从svg xml生成一个svgBlob对象从domUrl.createObjectURL(svgBlob)创建一个url对象; 创建一个Image对象并将url分配给Image src 将图像绘制到画布中从canvas获取png数据字符串:canvas. todataurl ();

漂亮的描述: https://web.archive.org/web/20200125162931/http://ramblings.mcpher.com:80/Home/excelquirks/gassnips/svgtopng

注意，在ie中，你会在canvas.toDataURL()的阶段得到异常;这是因为IE有很高的安全性限制，在那里绘制图像后将canvas视为只读。所有其他浏览器只限制图像是交叉来源。

使用canvg JavaScript库。它是一个单独的库，但有有用的功能。

如:

ctx.drawSvg(rawSvg);
var dataURL = canvas.toDataURL();

2019-10-25 17:56:57

下面是一个函数，它在没有库的情况下工作，并返回一个Promise:

/**
 * converts a base64 encoded data url SVG image to a PNG image
 * @param originalBase64 data url of svg image
 * @param width target width in pixel of PNG image
 * @return {Promise<String>} resolves to png data url of the image
 */
function base64SvgToBase64Png (originalBase64, width) {
    return new Promise(resolve => {
        let img = document.createElement('img');
        img.onload = function () {
            document.body.appendChild(img);
            let canvas = document.createElement("canvas");
            let ratio = (img.clientWidth / img.clientHeight) || 1;
            document.body.removeChild(img);
            canvas.width = width;
            canvas.height = width / ratio;
            let ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            try {
                let data = canvas.toDataURL('image/png');
                resolve(data);
            } catch (e) {
                resolve(null);
            }
        };
        img.onerror = function() {
            resolve(null);
        };
        img.src = originalBase64;
    });
}

在Firefox上，svg没有设置宽度/高度是有问题的。

请参阅此工作示例，其中包括Firefox问题的修复。

2020-11-12 08:46:47

使用Canvg库有几种方法将SVG转换为PNG。

在我的例子中，我需要从内联SVG中获取PNG blob。

库文档提供了一个示例(参见OffscreenCanvas示例)。

但是这个方法目前在Firefox中不起作用。是的，你可以在设置中启用gfx. offscreenvas .enabled选项。但是网站上的每个用户都会这么做吗?：）

然而，还有另一种方法也适用于Firefox。

const el = document.getElementById("some-svg"); //this is our inline SVG

var canvas = document.createElement('canvas'); //create a canvas for the SVG render
canvas.width = el.clientWidth; //set canvas sizes
canvas.height = el.clientHeight;

const svg = new XMLSerializer().serializeToString(el); //convert SVG to string

//render SVG inside canvas
const ctx = canvas.getContext('2d');
const v = await Canvg.fromString(ctx, svg);
await v.render();

let canvasBlob = await new Promise(resolve => canvas.toBlob(resolve));

最后一行多亏了这个答案

2021-01-28 08:40:39

这是我的2美分。不知怎的，下载锚标签在代码片段中不像预期的那样工作，但在Chrome中工作得很好。

这里正在使用jsFiddle

2022-07-21 05:41:52

这是一个老问题，在2022年我们有ES6，我们不需要第三方库。

下面是将svg图像转换为其他格式的一种非常基本的方法。

诀窍是将svg元素作为img元素加载，然后使用canvas元素将图像转换为所需的格式。因此，需要四个步骤:

提取svg作为xml数据字符串。将xml数据字符串加载到img元素中使用canvas元素将img元素转换为dataURL 将转换后的dataURL加载到新的img元素中

步骤1

提取svg as xml数据字符串很简单，我们不需要将其转换为base64字符串。我们只是将其序列化为XML，然后将字符串编码为URI:

// Select the element:
const $svg = document.getElementById('svg-container').querySelector('svg')

// Serialize it as xml string:
const svgAsXML = (new XMLSerializer()).serializeToString($svg)

// Encode it as a data string:
const svgData = `data:image/svg+xml,${encodeURIComponent(svgAsXML)}`

步骤2

将xml数据字符串加载到img元素中:

// This function returns a Promise whenever the $img is loaded
const loadImage = async url => {
    const $img = document.createElement('img')
    $img.src = url
    return new Promise((resolve, reject) => {
        $img.onload = () => resolve($img)
        $img.onerror = reject
        $img.src = url
    })
}

步骤3

使用canvas元素将img元素转换为dataURL:

const $canvas = document.createElement('canvas')
$canvas.width = $svg.clientWidth
$canvas.height = $svg.clientHeight
$canvas.getContext('2d').drawImage(img, 0, 0, $svg.clientWidth, $svg.clientHeight)
return $canvas.toDataURL(`image/${format}`, 1.0)

步骤4

将转换后的dataURL加载到新的img元素中:

const $img = document.createElement('img')
$img.src = dataURL
$holder.appendChild($img)

这里你有一个工作片段:

2022-10-11 10:39:22

在浏览器中将SVG转换为图像(JPEG、PNG等)

推荐文章

标签

最新文章