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

你也可以通过设置字符串＆＃34; blob＆＃34;来读取二进制文件作为Blob。到responseType属性。

＆＃13;

    // 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();

＆＃13;

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

＆＃13;

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

将svg转换为png，其中包含图像标记，以获得Base64

1 个答案: