將圖像標記轉換爲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/