跨源圖像加載被拒絕 - 僅限 iPhone - 簡單的圖像上傳

Question

我正在嘗試從我的 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
  }  

Answer 1

這似乎是 iOS 中基於 webkit 的瀏覽器的錯誤/限制。

至於解決方法：您可以嘗試將圖像上傳為 ArrayBuffer ( readAsArrayBuffer() ) 並創建一個 Blob 和一個對象 url 以設置為源。

有關詳細信息，請參閱此答案。