Canvas toDataURL不带alpha通道

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

简化代码（不上传部分）看起来是这样的：

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图像库之一，但其中大多数依赖于画布。

而且，我可以编码使用帆布数据的图像，但我宁愿不这样做:)

来源

2015-01-14 nutrija

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

但你可以导出jpg格式画布在您不想要的字母被消除：

// export a full-quality jpg dataUrl 

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

来源

2015-01-14 16:40:29 markE

谢谢，这是非常有用的信息！只是忘了提及的问题，PNG格式是必需的。我想这对于toDataURL方法是不可能的。 – nutrija

好吧，我想你可以使用.jpg dataUrl作为src创建一个新的Image（）。然后将非透明图像绘制到画布上。然后.toDataURL（'image/png'）第二次获得阿尔法变平的dataUrl。一个可能的问题是，允许浏览器使用alpha和gamma正确的画布图形，所以有可能在第二个.drawImage期间重新引入一些alpha。尝试一下，看看它是否适合您的需求。祝你的项目好运！ :-) – markE

Canvas toDataURL不带alpha通道

回答

相关问题