将带有图像标签的Svg转换为PNG
[英]Convert Svg with image tag into PNG
问题描述
I want to convert an SVG data into PNG. 
我想将SVG数据转换为PNG。 For that I am using canvas and drawimage() function. 为此，我使用canvas和drawimage()函数。 This Works 100% fine and convert my svg to png, but if my svg has any image tag, then it wont work. 这可以100％正常工作，并将我的svg转换为png，但是如果我的svg具有任何图像标签，则它将无法工作。
have a look in to my dummy code:- 看看我的伪代码：
<html>
<body>
<div id="mainsvg">
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>
<rect x='0' y='0' width='50' height='100' fill='red'></rect>
<image x='50' y='0' width='100' height='100' xlink:href='http://www.rashflash.com/assets/images/homepage/bubble2.png'/>
</svg>
</div>
<p>
<canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var mainsvg=document.getElementById('mainsvg');
var data =mainsvg.innerHTML;
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
};
img.src = url;
</script>
</body>
</html>
Above code generate image only if my svg is as follow:- 上面的代码仅在我的svg如下时才生成图像：
<div id="mainsvg">
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>
<rect x='0' y='0' width='50' height='100' fill='red'></rect>
</svg>
</div>
Why isn't it converting imagetag of svg ? 为什么不转换svg的imagetag？ need help thanks 需要帮助谢谢
2 个解决方案
解决方案1
1
Sadly you won't be able to use external resources in this combination - 遗憾的是，您将无法同时使用外部资源-
This is what is stated at this link in regards to security: 以下是有关安全性的链接 ：
...the implementation of SVG images is very restrictive.
As the image is referencing an external source the security limitations kicks in when drawing to canvas. 由于图像引用的是外部来源，因此在绘制到画布时会增加安全限制。
Further it is stated at this link (same apparently applies to Chrome etc.): 此外，在此链接中进行了说明 （显然适用于Chrome等）：
Restrictions
For security purposes, Gecko places some restrictions on SVG content when it's being used as an image:
- JavaScript is disabled. - External resources (eg images, stylesheets) cannot be loaded, though they can be used if inlined through BlobBuilder object URLs or data: URIs. - :visited-link styles aren't rendered. - Platform-native widget styling (based on OS theme) is disabled.Note that the above restrictions are specific to image contexts ;
This means you need to provide the image as a Blob object set with a data-uri. 这意味着您需要将图像提供为带有data-uri的Blob对象集。 I would assume it then becomes easier to just ignore the image tag in the SVG (or extract it first) for then to simply reference the image url and draw it separately onto canvas instead (this if course, won't work smoothly if image is in the middle of a stack). 我认为，这样就可以轻松地忽略SVG中的image标签（或先提取它），然后再简单地引用image url并将其分别绘制到画布上（如果这样做，如果image为在堆栈中间）。
解决方案2
1 2014-04-17 07:55:04
first download a js library svg_todataurl.js and include it 首先下载一个js库svg_todataurl.js并包含它
then just paste this code 然后粘贴此代码
var SVGtopngDataURL = document.getElementById("svg_element_id").toDataURL("image/png");
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.