1

I'm a server side dev learning the ropes of pure JS these days. One practical example I'm working through is image processing.

This question is about exploring how to support loading (in pure JS) image files that are of the type RIFF (little-endian) data. More info on that file type is here.

For instance, if such a file type is presented to the following code, it never loads and onerror fires:

    var fr = new FileReader();//supported
    fr.onload = function(){
      var dataURL = fr.result;
      img.onload = function()  {console.log('success')}
      img.onerror = function () {console.log('error')}
      img.src = dataURL;
    }
    fr.readAsDataURL(src_img);//supported

Moreover, if one analyzes the file headers via readAsArrayBuffer, the header signature returned is 52494646 (this is neither PNG, GIF, nor JPEG). More interestingly, I tried uploading a sample .avi video file (also RIFF format). That likewise has a the same header signature.

In other words, I couldn't tell whether it was an image file through header analysis.

My question is: is there any workaround to support processing these images via pure JS, or is it impossible? By processing, I mean resizing and subsequently sending the payload via an AJAX request.

I ask about this because being a serverside developer, I'm used to Python's PIL library to upload these photos on servers, and RIFF image files work perfectly there. What's different in JS implementation and how can I overcome it? Would love to find out the technicalities behind it all, and an illustrative example is required.

In case warranted, here's how I'm analyzing the header of the file:

function validate_file(e) {
  var header = "";
  var arr = new Uint8Array(e.target.result);
  for(var i = 0; i < arr.length; i++) {
     header += arr[i].toString(16);
  }
  switch (header) {
    case "89504e47":    
       // process PNG
    break;
    case "47494638":
       // process GIF
    break;
    case "ffd8ffe0":
    case "ffd8ffe1":
    case "ffd8ffe2":
    case "ffd8ffe3":
    case "ffd8ffe8":
    case "ffd8ffdb":
       // process JPEG
    break;
    default:
       // throw error
    break;
    }
}
Hassan Baig
  • 15,055
  • 27
  • 102
  • 205
  • In order to process them you would need to import them into a arraybuffer and subsequently a typedarray. Then you can mess with the binary data. You would have to build/use a js library to parse that binary data into the right structures and program the manipulations. It's doable, but might be tedious if someone hasn't already done the work to make a library for it. – Patrick Evans Mar 12 '18 at 22:01
  • @PatrickEvans: it's interesting that the RIFF example images I have are not uploadable on either stackoverflow or imgur. What do you suggest is a doable work around? If RIFF is detected, let the server handle it? – Hassan Baig Mar 12 '18 at 22:11

0 Answers0