没有 alpha 通道的画布 toDataURL答案

【问题标题】：Canvas toDataURL without alpha channel没有 alpha 通道的画布 toDataURL
【发布时间】：2015-03-12 21:29:56
【问题描述】：

我想在浏览器中调整上传图片的大小。我正在使用画布将上传的图像绘制到画布上，然后调整它的大小，并使用 toDataURL 方法的结果。

简化的代码（没有上传部分）如下所示：

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d', { alpha: false} );
// img src contains data url of uploaded image
ctx.drawImage(img, 0, 0, imgWidth, imgHeight); 
var dataUrl = canvas.toDataURL('image/png');

问题是 dataUrl 包含 alpha 通道，尽管上下文是在 alpha 设置为 false 的情况下创建的。

是否可以在没有 alpha 通道的情况下获取数据 url？

如果没有，我考虑使用其中一个 Javascript 图像库，但大多数都依赖于画布。

另外，我可以使用画布中的数据对图像进行编码，但我不想这样做:)

【问题讨论】：

标签： javascript html canvas image-resizing todataurl

【解决方案1】：

alpha:false 仅在 WebGL 中使用。创建 2d 上下文时会忽略它。

但您可以以 jpg 格式导出画布，消除不需要的 alpha：

// export a full-quality jpg dataUrl

canvas.toDataURL("image/jpeg", 1.0);

【讨论】：

谢谢，这是有用的信息！只是忘了提到需要 png 格式的问题。我猜这对于 toDataURL 方法是不可能的。
好吧，我想你可以使用 .jpg dataUrl 作为它的 src 创建一个新的 Image()。然后将那个不透明的图像绘制到画布上。然后 .toDataURL('image/png') 第二次获取 alpha 扁平化 dataUrl。一个可能的问题是允许浏览器对画布绘图进行 alpha 和 gamma 校正，因此在第二个 .drawImage 期间可能会重新引入一些 alpha。试试看它是否符合您的需求。祝你的项目好运！ :-)