Question

嘿伙计们，我的Ellipse里面有以下SVG：

     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
          <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="#fefefe"></ellipse>
        </svg>

我想将上面的一个（字符串格式为btw）转换为Image，以便我可以使用putImageData在画布上使用它。任何帮助将不胜感激。

Answer 1

由于<canvas>元素不允许直接将<svg>绘制到其上，因此您必须先将其“转换”为<img>。

这是一个相当简单的过程，涉及（短）步骤：

将SVG放入图像中。这可以通过创建<img>并将其.src设置为包含SVG的数据网址来完成。

var svg = document.querySelector('svg'),
    img = document.createElement('img');

img.src = 'data:image/svg+xml;utf8,' + svg.outerHTML;

如果SVG包含你需要转义的字符（尤其是#可能很讨厌），这可能会有点复杂。

将图像放在画布上。画布上有context，可以将<img>（以及其他，但不是<svg>）绘制到其中。

var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d');

//  now that we have the SVG nicely embedded in an image, we can
//  use the image to size the canvas
canvas.width = img.width;
canvas.height = img.height;

//  and draw the image onto the canvas (in the top/left corder) 
//  using the context 
ctx.drawImage(img, 0, 0);

a working fiddle for you to play with

由于问题本身标有svg-filters而这些需要#，您可能需要将img.src的分配重写为：

img.src = svg.outerHTML.replace(/#/g, '%23');

在Vanilla JavaScript中将SVG Ellipse转换为Image

1 个答案: