将svg转换为带有图像标签的png以获得Base64

Question

I'm having trouble of generating my SVG to PNG using <image> in order of getting Base64, my fiddle example shows that is not possible. Is there any workaround for this?

Or is it possible to transform this data = "data:image/svg+xml;base64," + btoa(xml) into image/png;base64 ? Based on this fiddle example

Answer 1

The xlink:href attribute appear to be cross-origin , which would result in error

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement':
Tainted canvases may not be exported.

being returned when canvas.toDataURL() called http://jsfiddle.net/meertskm/5/

---

Updated

Try utilizing XMLHttpRequest see Sending and Receiving Binary Data

Also you can read a binary file as a Blob by setting the string "blob" to the responseType property.

  // create `img` element var img = new Image; img.width = 100; img.height = 100; // log when complete img.onload = function () { // see `src` at `this` console.log(this.complete, this); }; // set `url` of `request` with `svg` `image` `xlink:href` var link = document.querySelectorAll("svg")[0] .children[0].attributes .getNamedItem("xlink:href").value; var request = new XMLHttpRequest(); request.responseType = "blob"; request.open("GET", link, true); request.onload = function (e) { var blob = this.response; var reader = new FileReader(); reader.onload = function (e) { // `data URI` of request image console.log(e.target.result); // set `img` `src` to `e.target.result`:`data URI` img.src = e.target.result; // append `img` next to `svg` document.body.appendChild(img); }; reader.readAsDataURL(blob); }; // log error request.onerror = function(e) { console.log(e); }; request.send(); 

 <svg height="100" width="100" id="asd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <image id="testimg1" xlink:href="http://i.imgur.com/LQIsf.jpg" width="100" height="100" x="0" y="0" /> </svg> 

jsfiddle http://jsfiddle.net/meertskm/4/