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

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

当前回答

更改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

其他回答

这是一个老问题，在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

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

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

2010-10-20 08:35:10

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

更改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

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

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

推荐文章

最新文章

标签