Javascript 不带alpha通道的Canvas toDataURL

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

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

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

此外，我可以使用画布中的数据对图像进行编码，但我不希望这样做：

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

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

// export a full-quality jpg dataUrl

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

---

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