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中也是如此。

svg to png图片下载iPhone

0 个答案: