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

Question

I am trying to upload an image from my iPhone and use that image multiple times to draw to the canvas and then finally save the image (though I haven't implemented the saving part yet). I am using the example here: http://code.hootsuite.com/html5/ which I can get to work for just drawing the image, however, if I try to modify the image I get the cross-origin error. The image uploading and editing works fine with android devices on Chrome (but doesn't work with iPhone on Safari). Has anyone experienced a similar problem or can offer some solution to this?

  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
  }

I marked it as duplicate due to the classic scenarios. There is additional possibility that the browser in question has limited support for data-uris and will consider it a local file. In which case it seem to be a browser bug or current limitation (assuming none of the other cases apply). — , Apr 19 '16 at 15:58
@K3N If you're suggesting the answer was to add the .crossOrigin = 'Anonymous' property before adding the src, I've tried this and it breaks the program in the same way. NOTE: I wrote chrome and meant safari so this is probably a different question. — Dave M, Apr 19 '16 at 16:07
Yeah, I have been digging around a little and it all points to a bug/limitation with webkit. Let me reopen since the solution wouldn't be right in this case. — , Apr 19 '16 at 16:08
Both are based on webkit so the problem is likely somewhere there. As to workaround: you could try to upload the image as a arraybuffer (readAsArrayBuffer) instead and create an object-url to set as source (https://stackoverflow.com/questions/30864573/what-is-blob-url-why-it-is-used-explain/30881444#30881444) — , Apr 19 '16 at 16:13
@K3N Thank you! Got it working with the arraybuffer workaround! — Dave M, Apr 19 '16 at 17:40
very good! I posted it as answer so the thread can be closed. — , Apr 19 '16 at 17:42

score 1 · Accepted Answer · answered Apr 19 '16 at 17:41

It seem to be a bug/limitation with webkit based browsers in iOS.

As to workaround: you could try to upload the image as a ArrayBuffer (readAsArrayBuffer()) instead and create a Blob and an object-url to set as source.

See this answer for details.

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

1 Answers1