HTML Canvas image bit depth changed when download on IE10+

Question

I have lightbox gallery with download button on each image. I have no problem with the download on chrome but I have problems with IE. That is why I am doing it with canvas like this:

if (browser() === 'IE') {
            var canvas = document.getElementById("canvas"),
            ctx = canvas.getContext("2d");
            var img = $('.lb-image')[0];
            imgWidth = $(img).prop('naturalWidth');
            imgHeight = $(img).prop('naturalHeight');
            canvas.width = imgWidth;
            canvas.height = imgHeight;
            ctx.drawImage(img, 0, 0, imgWidth,imgHeight,0, 0, canvas.width, canvas.height);
            window.navigator.msSaveBlob(canvas.msToBlob(), imgName);

Yesterday I saw that when you download a picture through IE browser, the image size is larger than the uploaded one or if it is downloaded via chrome. I inspected the images info and I saw that the only difference is the bit depth. It is larger on the IE's canvas downloaded image.

How can I manually set the bit depth or is there a better approach ?

You mean that you don't have the same bit-depth of image in chrome and IE when both comes from the canvas ? Or just between the other way vs the canvas one ? If the former, that's really odd. What result do you gt on FF ? If the latter, it's completely normal, your image when drawn to the canvas is not the same image anymore, and you won't even have the same result on [different machines](https://stackoverflow.com/questions/36273990/canvas2d-todataurl-different-output-on-different-browser/36274211#36274211). — Kaiido, Jun 26 '17 at 13:19
There might be a better way of doing what you want, but since you provided only the workaround, it's hard to help you. Ps: there is currently no way to set the bit-depth of an canvas image, it should always default to 8bits. Of some interest : https://stackoverflow.com/questions/43412842/reconstruct-original-16-bit-raw-pixel-data-from-the-html5-canvas/43413784#43413784 — Kaiido, Jun 26 '17 at 13:19
I do not have the same bit-depth between the canvas one and the original image(the other way - chrome way). This is the listener func - https://jsfiddle.net/y1afh2L3/ As I said, I have a lightbox carousel and when the image is changed, it recreate the download button with the correct path. — digode, Jun 26 '17 at 14:35

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

Drawing an Image on a canvas will convert this Image from whatever format to raw 24bits of RGB + 8bits Alpha (8bits depth). Currently there is no official option to set it yourself.

All you can do is to choose which compression (jpeg, png, webp) will be used when exporting the canvas, but this compression is made on this 8bits depth raw data anyway. So whatever you do, drawing on a canvas is loosy and the result will have nothing to do with the original Image file anymore.

But anyway, your workaround is not the correct one.

Your original problem is that you want to enable the <a href="someURL" download="myFile.png"> in IE.

Instead of drawing the image on a canvas, request it through ajax as an Blob. Then you'll be able to use navigator.msSaveBlob easily :

if (browser() === 'IE') {
  var xhr = new XMLHttpRequest();
  xhr.open('get', img.src);
  xhr.responseType = 'blob';
  xhr.onload = function(){
    window.navigator.msSaveBlob(xhr.response, imgName);
    }
  xhr.send();
}

With this code, what you will download through msSaveBlob is the real file stored on the server, just like <a download>.

Important note

This will obviously work only with same-origin resources, just like <a download> and even like the canvas workaround.

HTML Canvas image bit depth changed when download on IE10+

1 Answers1

Important note