Display ArrayBuffer in canvas looks scrambled

[dnmd]

When trying to display the ArrayBuffer inside a canvas I get a scrambled looking image, I might be missing something but it seems that JPEG files are not supported? Or am I missing something...

@ViewChild('canvas') canvasRef: ElementRef;

...

if (typeof Photos !== "undefined") {

  Photos.photos(
    function (photos) {

        console.log("Grabbing: " + photos[0].id);

        Photos.thumbnail(photos[0].id,

          function (data) {

            var canvas = self.canvasRef.nativeElement;
            var ctx = canvas.getContext('2d');

            var imgData = ctx.createImageData(120, 120);
            imgData.data.set(new Uint8Array(data));

            ctx.putImageData(imgData, 0, 0);

          }, function (error) { });
          
    }, function (error) { }

  );

}

[domax]

Hmm.. I thought any kind of image data may be drawn into canvas. If it is really not supported, then I'd propose whether to use dataurl for image or save it as a file and open and draw it using file url (saving as a file feature is on my schedule, but it will be just dependency to cordova-plugin-file and JS only code).

I didn't plan to provide different content types for thumbnails, but if it is really needed, I may schedule such a feature (e.g. make thumbnail as PNG ArrayBuffer), but I cannot commit to any terms for now :(.

[domax]

BTW - looks like https://github.com/notmasteryet/jpgjs works fine for JPEGs - try to use it.

[domax]

OK, I updated README with info about JPEG decoder, so I believe it should be a solution.
I don't want to make an explicit dependency to jpgjs stuff, b/c it is optional for this plugin.

@dnmd : I would really appreciate if you confirm that jpgjs works, and if you provide code snippet for that - I'll include it in README.