跨来源图像加载被拒绝-仅限iPhone-简单图像上传

Cross-origin image load denied - iPhone only - simple image upload

本文关键字:图像 iPhone- 仅限 简单 拒绝 加载      更新时间:2023-09-26

我正试图从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
  }  

这似乎是iOS中基于webkit的浏览器的一个缺陷/限制。

至于解决方法:您可以尝试将图像上传为ArrayBuffer(readAsArrayBuffer()),并创建一个Blob和一个对象url以设置为源。

有关详细信息,请参阅此答案。