问题

Question

我想在我的DOM中下载SVG图像。我已经搜索了堆栈溢出，执行此操作的常用方法是执行以下步骤：

将svg序列化为XML字符串

var svgImage = document.getElementById('maskedImage')
var svgXML = (new XMLSerializer).serializeToString(svgImage)

使用XML字符串作为来源创建一个javascript图像

var img = new Image();
var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svgBlob);

img.onload = function () {
    /* next steps go here */
}

img.src = url;

在画布上绘制该图像

var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
canvas.width = width
canvas.height = height
ctx.drawImage(img, 0,0, width, height)

将画布转储到网址并让用户下载

window.open(canvas.toDataURL('image/png'))  // not the point of the question

问题是，我的SVG有<image>标签，带有SVG蒙版（黑白<image>）。更糟糕的是，其中一个图像有一个对象URL（由URL.createObjectUrl(...)返回的对象URL）。这些是要求，不能更改。

按照上述过程，初始SVG在第二步“丢失”图像。即使我移除了遮罩并显示，图像img也不会显示<image>。

我还尝试删除掩码并将<image>网址从使用URL.createObjectURL创建的内容更改为内嵌图像（data:image/png;base64,...），再更改为虚拟网址{{1} }）我仍然无法显示图像。

请注意，这个问题与询问如何下载SVG的所有问题并不重复，而是在您拥有图像时的特殊情况。

问题

如何在不丢失http://www.tuvotacion.com/imagenes_unicas/cual-perrito-es-mas-tierno-450089.jpg的情况下将SVG“翻译”为图像，以便在画布上有效地将其打印出来？

下载带图像的SVG

问题

0 个答案: