Question

我试图动态生成svg图像。我有几乎所有我需要的代码，它几乎可以工作。

我剩下要做的就是能够包含远程图片，并且需要将图片包含在内（可能作为base64），然后再将其转换为png，但这并不起作用。

这是一个包含我已经到目前为止的代码的codepen，点击圈子下载它，看看我在说什么：https://codepen.io/NickHG/pen/NXNbzY?editors=0010

代码（仅供参考）在这里。对不起格式化，抱歉。

var arrayString = [{"name":"test","color":"3b5999"}];

for (item of arrayString) {
  var htmlItem = '<svg height="200" width="200" onclick="clickSVG(event)" data-name="' + item.name + '">
  <circle cx="100" cy="100" r="100" fill="#'+ item.color + '" />
  <image x="0" y="0" width="200" height="200" xlink:href="https://vignette.wikia.nocookie.net/simpsons/images/2/28/3e9aa19b_homer.png/revision/latest?cb=20141025143722" />
</svg>';

  document.getElementById('result').insertAdjacentHTML('beforeend', htmlItem);

}

function triggerDownload (imgURI, name) {
  var evt = new MouseEvent('click', {
    view: window,
    bubbles: false,
    cancelable: true
  });

  var a = document.createElement('a');
  a.setAttribute('download', name + '.png');
  a.setAttribute('href', imgURI);
  a.setAttribute('target', '_blank');

  a.dispatchEvent(evt);
}

function clickSVG(evtent){
  var canvas = document.getElementById('canvas');
  canvas.width  = 200;
  canvas.height = 200;
  var ctx = canvas.getContext('2d');
  var data = (new XMLSerializer()).serializeToString(event.currentTarget);
  var DOMURL = window.URL || window.webkitURL || window;
  var name = event.currentTarget.getAttribute('data-name');
  var img = new Image();
  var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
  var url = DOMURL.createObjectURL(svgBlob);

  img.onload = function () {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);

    var imgURI = canvas
        .toDataURL('image/png')
        .replace('image/png', 'image/octet-stream');

    triggerDownload(imgURI, name);
  };

  img.src = url;
}

SVG远程图像无法正常保存

0 个答案: