将图像标记转换为png以获取Base64对其

Question

我无法使用<image>生成我的SVG到PNG，以便获取Base64，我的fiddle example显示这是不可能的。有没有解决方法？

或者是否有可能将此data = "data:image/svg+xml;base64," + btoa(xml)转换为image/png;base64？在此基础上fiddle example

Answer 1

的xlink:href属性似乎是跨来源，这将导致错误

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

返回时canvas.toDataURL()称为http://jsfiddle.net/meertskm/5/

---

更新

尝试利用XMLHttpRequest见Sending and Receiving Binary Data

您还可以通过将字符串“blob” 设置为responseType属性来将二进制文件读为Blob。

// 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/