javascript - 没有 alpha channel 的 Canvas toDataURL

Question

我想在浏览器中调整上传图片的大小。我正在使用 Canvas 将上传的图像绘制到 Canvas 上，然后调整它的大小，并使用 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 channel ，尽管上下文是在 alpha 设置为 false 的情况下创建的。

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

如果没有，我考虑过使用 Javascript 图片库之一，但大多数图片库都依赖于 canvas。

此外，我可以使用 Canvas 中的数据对图像进行编码，但我宁愿不这样做:)

Answer 1

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

但是您可以将 Canvas 导出为 jpg 格式，其中消除了不需要的 alpha:

// export a full-quality jpg dataUrl

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