Question

我想在浏览器中调整上传的图片大小。我使用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通道，尽管上下文是在alpha设置为false的情况下创建的。

是否可以在没有Alpha通道的情况下获取数据网址？

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

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

Answer 1

alpha:false仅用于WebGL。创建二维上下文时会忽略它。

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

// export a full-quality jpg dataUrl

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

没有alpha通道的Canvas toDataURL

1 个答案: