Convert Svg with image tag into PNG
Question
I want to convert an SVG data into PNG. For that I am using canvas and drawimage() function. This Works 100% fine and convert my svg to png, but if my svg has any image tag, then it wont work.
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:-
<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 ? need help thanks
2 answers
solution1
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. SVG images aren't allowed to load any external resources, for example, even ones that appear to be from the same domain. Resources such as raster images (such as JPEG images) or <iframe>s have to be inlined as data: URIs.
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.):
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 ; they don't apply when SVG content is viewed directly, or when it's embedded as a document via the <iframe>, <object>, or <embed> elements.
This means you need to provide the image as a Blob object set with a data-uri. 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).
solution2
1 2014-04-17 07:55:04
first download a js library svg_todataurl.js and include it
then just paste this code
var SVGtopngDataURL = document.getElementById("svg_element_id").toDataURL("image/png");
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.