svg 到 PNG 图片在 iPhone 中下载

Question

我的网站上有一个功能，我想将 svg 转换为 png 并允许用户将该 png 图像下载到他们的本地机器中。

我已经使用下面的代码实现了这一点。

var btn = document.querySelector('#download');
var svg = document.querySelector('svg');
var canvas = document.querySelector('canvas');
console.log(jQuery.browser);

btn.addEventListener('click', function () {
  var data = (new XMLSerializer()).serializeToString(svg);
  var DOMURL = window.URL || window.webkitURL || window;

  var img = new Image();
  var svgBlob = new Blob([data], {type: 'image/svg+xml'});
  var url = DOMURL.createObjectURL(svgBlob);

  img.onload = function () {
    alert("after load");
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      //set the image quality
      ctx.webkitImageSmoothingEnabled = true;
      ctx.imageSmoothingEnabled = true;
      ctx.imageSmoothingQuality = "high";

    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);

    // convert to png code
    if (canvas.msToBlob)
    { //for IE
        ctx.drawImage(img, 0, 0, 1226, 1066);
        var blob = canvas.msToBlob();
        window.navigator.msSaveBlob(blob, 'shnooks.png');
    }
    else
    {
        //other browsers
        var imgURI = canvas
            .toDataURL('image/png')
            .replace('image/png', 'image/octet-stream');

        if(jQuery.browser.safari)
        {
          saveImageInSafari(imgURI);
        }
        else
        {
          triggerDownload(imgURI);
        }
    }
  };
  img.src = url;
});

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

  var a = document.createElement('a');
  a.setAttribute('download', 'shnooks.png');
  a.setAttribute('href', imgURI);
  a.setAttribute('target', '_blank');
  a.dispatchEvent(evt);
}

function saveImageInSafari(imgURI)
{
  // download file using php
    jQuery.post("save.php", {data: imgURI}, function (file) {
      window.location.href =  "download.php?path=" + file;
    });
}

我还在 PHP 中为 Safari 编写了代码来下载图像，它也可以工作。

我面临的唯一问题是 iPhone。 img.onload方法在 iPhone 上不起作用。

此代码有效并在所有其他浏览器和 android 手机上下载 png，即使在 iPad 中也是如此。

Answer 1

这是一个古老的问题，我不明白你的意思：（ img.onload方法在 iPhone 上不起作用。）。 一般来说，我看到你需要将 blob 的类型替换为image/png ，现在也不需要区分浏览器，因为大多数浏览器都支持 Blob 生成和下载为 png 图像而没有任何问题。 也不需要replace('image/png', 'image/octet-stream')只需保持原样并将其传递给图像 src。 希望这可以帮助某人。