使用 drawImage 缩放透明图像时出现故障

Question

我正在尝试使用 CanvasRenderingContext2D.drawImage 缩放具有透明像素的图像，但每当我绘制图像时，我最终得到的是原始尺寸图像和在 [=22 上绘制的缩放版本=].下面是一些重现故障的代码：

<canvas id="cvs" width=200 height=100></canvas>

const canvas = document.getElementById('cvs');
const ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;
const imageData = ctx.createImageData(100, 50);
const data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
  if (i % 400 > 360) {
    data[i]     = 255;
    data[i + 1] = 0;
    data[i + 2] = 0;
    data[i + 3] = 255;
  }
  else {
    data[i]     = 0;
    data[i + 1] = 0;
    data[i + 2] = 0;
    data[i + 3] = 0; // Change this to 255 to get rid of the glitch
  }
}
ctx.putImageData(imageData, 0, 0);
ctx.drawImage(canvas, 0, 0, 100, 50, 0, 0, 200, 100);

https://jsfiddle.net/o4sv6qhb/2/

我不明白为什么会这样。如果我不使用任何透明像素，那么问题就会消失。

我想一个解决方法是直接填充最终尺寸图像的像素，而不是使用 drawImage 的缩放，但我宁愿不必这样做。

Answer 1

您绘制到 canvas 两次，一次使用 putImageData 以 1:1 像素的比例绘制，然后再次使用 drawImage 放大版本。

第二次绘制与第一次重叠，因此如果您没有透明像素，您就看不到原始图像，因为它被覆盖了。

但是如果你确实有透明像素，那么较大的图像不会覆盖后面的图像，你会看到旧图像。

如果您只想要 drawImage 命令中的图像，您可以尝试创建一个单独的 canvas 来绘制图像数据，然后将 canvas 绘制到第一个上，但是放大。

const canvas = document.getElementById('cvs');

// create a second hidden canvas/context pair
const offscreenCanvas = document.createElement('canvas');
const hiddenContext - offscreenCanvas.getContext('2d');

const ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;
const imageData = ctx.createImageData(100, 50);
const data = imageData.data;

for (var i = 0; i < data.length; i += 4) {
  if (i % 400 > 360) {
    data[i]     = 255;
    data[i + 1] = 0;
    data[i + 2] = 0;
    data[i + 3] = 255;
  }
  else {
    data[i]     = 0;
    data[i + 1] = 0;
    data[i + 2] = 0;
    data[i + 3] = 0; // Change this to 255 to get rid of the glitch
  }
}

// draw to the hidden canvas
hiddenContext.putImageData(imageData, 0, 0);

// draw the hidden canvas content to the visible one and scale
ctx.drawImage(offscreenCanvas, 0, 0, 100, 50, 0, 0, 200, 100);

使用 drawImage 缩放透明图像时出现故障

Glitch when scaling transparent image using drawImage

javascript

html5-canvas

drawimage