Canvas.toDataURL 无法在移动 Safari iOS 上运行？

Question

我尝试了以下方法。我从 svg 图像创建了一个

<img>

。然后我将其绘制在画布上，最后将其导出为 PNG 并将生成的 PNG 设置为新的

<img>

。它在 Android、Chrome、Safari、FireFox 上运行良好。但是，

canvas.toDataUrl()

不适用于 iOS 上的移动 Safari。仅当您不在画布上使用 SVG 图像时，它才有效。

这是我用于测试的代码：

<div id="mydiv"></div>
<img id="image2">

var mydiv  = document.getElementById('mydiv'),
    image2 = document.getElementById('image2');

image2.crossOrigin="anonymous";

var image3 = new Image();
mydiv.appendChild(image3);
image3.onload = function() {
  var canvas = document.createElement('canvas'),
  ctx = canvas.getContext('2d');

  canvas.width = image3.width;
  canvas.height = image3.height;

  ctx.drawImage(image3,0,0, canvas.width, canvas.height);
  var dataUrl = canvas.toDataURL('image/png');
  image2.src = dataUrl;
}
image3.crossOrigin="anonymous";
image3.src = "https://dl.dropboxusercontent.com/u/47067729/sticker4.svg";

我在这里创建了一个 JSFiddle：http://jsfiddle.net/confile/ZqJYG/

仅当您在 iOS 上运行时才会出现该问题。它不能在移动 Safari 上运行，也不能在移动 Chrome 上运行。

这个问题有解决办法吗？

Answer 1

这可能是也可能不是同一个问题，但我从 iOS 上的这次调用中得到了“data:,”（在其他地方都有效），并通过大幅减小画布的大小来解决问题。我认为它耗尽了内存，无论是加载图像还是返回字符串，并以一种特别无用的方式处理它。

Answer 2

我认为您的浏览器可能不支持它。请参阅以下内容。

http://caniuse.com/#search=canvas

iPhone 3GS        - Mobile Safari 4.0.5
iPhone 4          - Mobile Safari 4.0.5
iPhone 4s         - Mobile Safari 5.1
iPad 1 / 3.2.2    - Mobile Safari 4.0.4
iPad 2 / 4.3.3    - Mobile Safari 5.02
iPad 2 / 5.0      - Mobile Safari 5.1
iPad 3 / 5.1      - Mobile Safari 5.1
iPhone 5 / 6.0    - Mobile Safari 6.0
iPad 4 / 6.0      - Mobile Safari 6.0

您还可以使用以下代码测试您的浏览器支持：

function supportsToDataURL()
{
    var c = document.createElement("canvas");
    var data = c.toDataURL("image/png");
    return (data.indexOf("data:image/png") == 0);
}

希望这有帮助。

Answer 3

使用有效的 svg url 进行测试，但托管在同一域上，并且工作正常。

另一种测试方法是通过

<input type='file'>

加载图像。请参阅https://jsfiddle.net/ogrfLhtd/

var newImage = new Image()
newImage.id = "newImage"
document.querySelector("div").appendChild(newImage) 

function loadImage(event) {
  console.log("loadImage")
  var imagePreview = document.getElementById("imagePreview")
  imagePreview.src='null';
  newImage.src='null';

  var file = event.target.files[0] 
  if (!file) {
    console.error("No file selected")
    return
  }

  var reader = new FileReader()

  reader.onload = function (e) {
    imagePreview.src = e.target.result 
    console.log("loadImage set ", imagePreview.src)

    runTest() 
  }

  reader.readAsDataURL(file)
}

function runTest() {
  var imagePreview = document.querySelector("#imagePreview")

  newImage.crossOrigin = "anonymous"
  newImage.onload = function () {
    var canvas = document.createElement("canvas"),
      ctx = canvas.getContext("2d")

    canvas.width = imagePreview.naturalWidth
    canvas.height = imagePreview.naturalHeight

    ctx.drawImage(imagePreview, 0, 0, canvas.width, canvas.height)
    var dataUrl = canvas.toDataURL("image/png")
    newImage.src = dataUrl
  }

  newImage.src = imagePreview.src
}

img {
  height:40vh;
}
#imagePreview {
  border:solid 5px orange;
}
#newImage {
  border:solid 5px green;
}
input {
  margin:10px;
}

Image <br />
<input type="file" onChange="loadImage(event)" />

<div id="mydiv">
    <img id="imagePreview" alt="Preview Image" />
</div>