将画布导出为不带透明度的PNG（alpha通道）

Question

**编辑**我必须导出一个大画布（5Mo

当我导出我的画布（使用toDataUrl）时，它总是返回一个带有alpha通道的. png文件的bas64表示。阿尔法通道权重约为图像数据的25%，我不需要它。

建议的答复：

1. PNG压缩是好的。如果alpha通道是平坦的（所有值都相同），则不会占用太多空间。即使使用完全不透明的alpha通道，也会显示（压缩）。png文件更大。（在一些测试中约为10%）

有没有办法将我的画布导出为. png，但没有alpha通道？如果"否"，是否有一种方法（lib）在javascript修剪alpha通道？导出为. jpeg不是一个解决方案，我需要一个. png文件。

谢谢！：）

Answer 1

在画布上绘图之前，应该先填充画布（使用您想要的背景颜色）。

例如，以前：

var ctx = canvas.getContext('2d');
drawEverythingOnMyContext(ctx);
image = canvas.toDataURL();

之后：

var ctx = canvas.getContext('2d');
// draw a background
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// draw then
drawEverythingOnMyContext(ctx);
image = canvas.toDataURL();

Answer 2

我的目标和你的相似：导出PNG格式的画布，并在将其发送到服务器之前从其数据URL表示中删除alpha通道信息。然而，我的理由和你的不同。我想在另一端将结果图像文件合并为PDF，我使用的img2pdf库无法处理alpha通道信息。我为画布使用的库fabric.js，但是通过toDataUrl（）导出任何HTML5画布时都会出现问题。

幸运的是，有一个很好的javascript库，名为pngjs，它可以在javascript中操作PNG文件。它附带异步和同步例程。这就是我如何将DataURL从Alpha转换为非Alpha。您的第3步（博客的数据URL）应该足以完成这项工作。

let PNG = require('pngjs').PNG;

/* thehref: DataURL form of a png file. */
function removeAlphaFromDataUrl(thehref) {
  let dataurlstring = "data:image/png;base64,"
  let buff = new Buffer(thehref.slice(22), 'base64')
  let png = PNG.sync.read(buff);
  let options = { colorType: 2 };
  let buffer = PNG.sync.write(png, options);
  let output = buffer.toString('base64');
  let newhref = dataurlstring + output
  return newhref;
}

Answer 3

PNG压缩是好的。如果alpha通道是平坦的（所有值都相同），则不会占用太多空间。

您可以使用复合操作“destination over”填充透明和半透明像素。

以下函数将所有像素的alpha值设置为1。

function fillAlpha(ctx, bgColor){  // bgColor is a valid CSS color ctx is 2d context
   // save state
   ctx.save();
   // make sure defaults are set
   ctx.globalAlpha = 1;
   ctx.setTransform(1, 0, 0, 1, 0, 0);
   ctx.filter = "none";

   // fill transparent pixels with bgColor
   ctx.globalCompositeOperation = "destination-over";
   ctx.fillStyle = bgColor;
   ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

   // cleanup
   ctx.restore();
}

然后，您可以将图像保存为PNG，阿尔法通道尽可能小。