Question

我在每张图片上都有带有下载按钮的灯箱库。我对chrome的下载没有问题，但是IE有问题。这就是为什么我这样做的canvas：

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);

昨天我看到，当您通过IE浏览器下载图片时，图片大小比上传的图片大，或者是否通过Chrome下载。我查看了图片信息，我发现唯一的区别是bit depth。它在IE canvas下载的图像中较大。

如何手动设置bit depth或有更好的方法？

Answer 1

在画布上绘制图像会将此图像从任何格式转换为原始的24位RGB + 8位Alpha（8位深度）。目前没有自己设置的正式选项。

您可以做的就是选择在导出画布时将使用哪种压缩（jpeg，png，webp），但无论如何都要对此8位深度原始数据进行此压缩。无论你做什么，在画布上画画都很松散，结果将与原始的Image文件无关。

但无论如何，你的解决方法并不正确。

您最初的问题是您要在IE中启用for f = 1 : u1 = [1 0 0 0] ; u2 =[0 1 0 0]; u3 = [0 0 1 0] and u4 =[0 0 0 1]; for f = 2 : u2 = [1 1 0 0] ; u2 =[1 1 0 0]; u3 = [1 0 1 0] and u4 =[1 0 0 1]; u5 = [0 1 1 0]; u6 = [0 0 1 1]; for f = 3 : u1 = [1 1 1 0]; u2 = [1 1 0 1]; u3 = [1 0 1 1] and u4 = [0 1 1 1]; for f = 4 : u1 = [1 1 1 1];。

不是在画布上绘制图像，而是通过ajax作为Blob请求它。然后，您就可以轻松使用<a href="someURL" download="myFile.png">：

navigator.msSaveBlob

使用此代码，您将通过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(); }下载的内容是存储在服务器上的真实文件，就像msSaveBlob一样。

重要提示

这显然只适用于同源资源，就像<a download>一样，甚至像画布解决方法一样。

在IE10 +上下载时，HTML Canvas图像位深度发生了变化

1 个答案:

重要提示