跨域图像加载被拒绝 - 仅限 iPhone - 简单的图像上传答案

【问题标题】：Cross-origin image load denied - iPhone only - simple image upload跨域图像加载被拒绝 - 仅限 iPhone - 简单的图像上传
【发布时间】：2016-08-11 21:49:06
【问题描述】：

我正在尝试从我的 iPhone 上传图像并多次使用该图像绘制到画布上，然后最终保存图像（尽管我还没有实现保存部分）。我在这里使用示例：http://code.hootsuite.com/html5/，我可以使用它来绘制图像，但是，如果我尝试修改图像，则会出现跨域错误。图像上传和编辑适用于 Chrome 上的 android 设备（但不适用于 Safari 上的 iPhone）。有没有人遇到过类似的问题或可以提供一些解决方案？

  if (window.File && window.FileReader && window.FormData) {
    var inputField = document.getElementById('file');
    inputField.addEventListener('change', function(e){
      var file = e.target.files[0];
      if (file) {
          if (/^image\//i.test(file.type)) {
              readFile(file);
          } else {
              alert('Not a valid image!');
          }
      }
  })
  } else {
    alert("FILE UPLOAD NOT SUPPORTED");
  }

  function readFile(file) {
    var reader = new FileReader();

    reader.onloadend = function () {
      console.log('reader.onloadend');
      processFile(reader.result, file.type);
  };

  reader.onerror = function () {
      alert('There was an error reading the file!');
  };

  reader.readAsDataURL(file);
  }

  function processFile(dataURL, fileType) {
    var maxWidth = 600;
    var maxHeight = 600;

    var image = new Image();
    image.src = dataURL;

    image.onload = function () {
      var width = image.width;
      var height = image.height;
      var shouldResize = (width > maxWidth) || (height > maxHeight);

      main(image); // this passes image to function that draws image to canvas and crops
  }

【问题讨论】：

由于经典场景，我将其标记为重复。有问题的浏览器还有可能对 data-uris 的支持有限，并将其视为本地文件。在这种情况下，它似乎是浏览器错误或当前限制（假设其他情况均不适用）。
好的，我去看看。谢谢！
@K3N 如果您建议的答案是在添加 src 之前添加 .crossOrigin = 'Anonymous' 属性，我已经尝试过了，它以同样的方式破坏了程序。注意：我写的是 chrome，意思是 safari，所以这可能是一个不同的问题。
是的，我一直在挖掘，这一切都指向 webkit 的错误/限制。让我重新打开，因为在这种情况下解决方案不正确。
两者都基于 webkit，所以问题可能出在某个地方。至于解决方法：您可以尝试将图像作为 arraybuffer (readAsArrayBuffer) 上传，并创建一个 object-url 设置为源 (stackoverflow.com/questions/30864573/…)

标签： javascript ios html canvas cors

【解决方案1】：

这似乎是 iOS 中基于 webkit 的浏览器的错误/限制。

至于解决方法：您可以尝试将图像作为 ArrayBuffer (readAsArrayBuffer()) 上传，然后创建一个 Blob 和一个 object-url 以设置为源。

详情请见this answer。

【讨论】：