如何在HTML canvas中缩放imageData？

Question

我在我的网页中有一个画布；我在这个画布中创建了一个新的图像数据，然后我通过myImgData.data[]数组修改了一些像素。现在我想缩放这张图片，把它放大。我试着缩放上下文，但图像仍然很小。有可能做到这一点吗？谢谢

Answer 1

您可以将imageData绘制到新画布，缩放原始画布，然后将新画布绘制到原始画布。

像这样的东西应该是有效的：

var imageData = context.getImageData(0, 0, 100, 100);
var newCanvas = $("<canvas>")
    .attr("width", imageData.width)
    .attr("height", imageData.height)[0];

newCanvas.getContext("2d").putImageData(imageData, 0, 0);

context.scale(1.5, 1.5);
context.drawImage(newCanvas, 0, 0);

这是一个功能正常的http://jsfiddle.net/Hm2xq/2/演示。

Answer 2

我需要在不使用putImageData()引起的插值的情况下完成它，所以我通过将图像数据缩放到一个新的、调整了大小的ImageData对象来实现。我想不出其他任何时候，我认为使用5个嵌套的for循环是一个好主意：

function scaleImageData(imageData, scale) {
  var scaled = c.createImageData(imageData.width * scale, imageData.height * scale);

  for(var row = 0; row < imageData.height; row++) {
    for(var col = 0; col < imageData.width; col++) {
      var sourcePixel = [
        imageData.data[(row * imageData.width + col) * 4 + 0],
        imageData.data[(row * imageData.width + col) * 4 + 1],
        imageData.data[(row * imageData.width + col) * 4 + 2],
        imageData.data[(row * imageData.width + col) * 4 + 3]
      ];
      for(var y = 0; y < scale; y++) {
        var destRow = row * scale + y;
        for(var x = 0; x < scale; x++) {
          var destCol = col * scale + x;
          for(var i = 0; i < 4; i++) {
            scaled.data[(destRow * scaled.width + destCol) * 4 + i] =
              sourcePixel[i];
          }
        }
      }
    }
  }

  return scaled;
}

我希望至少有一位其他程序员可以复制并粘贴到他们的编辑器中，同时低声说：“如果不是上帝的恩典，我就去那里。”

Answer 3

我知道这是一个古老的主题，但是像这样的人可能会发现它很有用，所以我在rodarmor的代码中添加了我的优化：

function scaleImageData(imageData, scale) {
    var scaled = ctx.createImageData(imageData.width * scale, imageData.height * scale);
    var subLine = ctx.createImageData(scale, 1).data
    for (var row = 0; row < imageData.height; row++) {
        for (var col = 0; col < imageData.width; col++) {
            var sourcePixel = imageData.data.subarray(
                (row * imageData.width + col) * 4,
                (row * imageData.width + col) * 4 + 4
            );
            for (var x = 0; x < scale; x++) subLine.set(sourcePixel, x*4)
            for (var y = 0; y < scale; y++) {
                var destRow = row * scale + y;
                var destCol = col * scale;
                scaled.data.set(subLine, (destRow * scaled.width + destCol) * 4)
            }
        }
    }

    return scaled;
}

这段代码使用更少的循环，运行速度大约快30倍。例如，对于100*100区域的100倍缩放，这个编码需要250毫秒，而另一个编码需要8秒以上。