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

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下载的图片尺寸要大。我检查了图像信息，发现唯一的区别是位深度。它在 IE 的 canvas 下载图像上更大。

如何手动设置位深度或者有更好的方法吗？

Answer 1

在 Canvas 上绘制图像会将该图像从任何格式转换为原始 24 位 RGB + 8 位 Alpha(8 位深度)。目前没有官方选项可以自行设置。

您所能做的就是选择导出 Canvas 时使用哪种压缩(jpeg、png、webp)，但无论如何，这种压缩都是对这个 8 位深度的原始数据进行的。因此，无论你做什么，在 Canvas 上绘图都是松散的，结果将不再与原始图像文件有关。

<小时/>

但无论如何，您的解决方法都不正确。

您最初的问题是您想要启用 <a href="someURL" download="myFile.png">在 IE 中。

不要在 Canvas 上绘制图像，而是通过 ajax 将其作为 Blob 请求。然后您就可以使用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> .

<小时/>

重要说明

这显然只适用于同源资源，就像<a download>甚至喜欢 Canvas 解决方法。