Can't convert URI to ImageData on iOS

55
August 12, 2019, at 1:20 PM

Using JavaScript, I am trying to take a file from an input and convert its data URI into an ImageData value. This is properly working on desktop where a file from a location is loaded. On iOS, the device's camera opens where the user can take a picture. After the image is loaded, the data URI is properly read but the ImageData cannot be retrieved as the webpage crashes.

Here is the code:

function handleChange() { 
  var fileInput = document.querySelector('input[type=file]'); 
  var file = fileInput.files[0]; 
  var reader = new FileReader(); 
  reader.addEventListener("load", function() { 
    console.log(reader.result); // Logs on iOS 
    convertURIToImageData(reader.result).then(function(imageData) { 
      console.log(imageData); // Does not log on iOS 
    }); 
  }); 
} 
 
function convertURIToImageData(URI) { 
  return new Promise(function(resolve, reject) { 
    if (URI == null) return reject(); 
    var canvas = document.createElement('canvas'); 
    var context = canvas.getContext('2d'); 
    var image = new Image(); 
    image.addEventListener('load', function() { 
      canvas.width = image.width; 
      canvas.height = image.height; 
      context.drawImage(image, 0, 0, canvas.width, canvas.height); 
      console.log("drawn"); // Logs on iOS 
 
      resolve(context.getImageData(0, 0, canvas.width, canvas.height)); 
    }); 
    image.src = URI; 
  }); 
}
<input type="file" accept="image/*" capture="camera" onchange="handleChange()">

Why is this failing on iOS?

READ ALSO
Monte Carlo simulation for p value

Monte Carlo simulation for p value

I'm creating a back testing tool for trading, and after some reading determined that Monte Carlo Simulations can be a very good tool to establish the statistical significance of the initial results

94
Export contents with image from web page to Microsoft Word - javaScript [on hold]

Export contents with image from web page to Microsoft Word - javaScript [on hold]

I am trying to export a web page with images to a Microsoft Word document or rtf

54
React - render CSS animation onClick

React - render CSS animation onClick

I'm new to React, sorry if this is too basic

114
How to properly save async/await axios response into variable

How to properly save async/await axios response into variable

Third party API can only handle one query string at a timeSo I am trying to take multiple strings and split into array

115