画布到数据不带 alpha 通道的URL

Canvas toDataURL without alpha channel

本文关键字：alpha 通道 URL 数据      更新时间：2023-09-26

我想在浏览器中调整上传图像的大小。我正在使用画布将上传的图像绘制到画布，然后调整其大小，并使用 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 的情况下创建的。

是否可以在没有阿尔法通道的情况下获取数据 URL？

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

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

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

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

// export a full-quality jpg dataUrl
canvas.toDataURL("image/jpeg", 1.0);
相关文章：