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。 希望這可以幫助某人。