如何缩放 HTML 画布中的图像数据？

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 秒以上。

Answer 4

您可以使用drawImage方法缩放画布。

context = canvas.getContext('2d');
context.drawImage( canvas, 0, 0, 2*canvas.width, 2*canvas.height );

这会将图像缩放至两倍大小并将其西北部分渲染到画布上。缩放是通过drawImage方法的第三个和第四个参数来实现的，它们指定了图像的最终宽度和高度。

请参阅 MDN 上的文档 https://developer.mozilla.org /en-US/docs/DOM/CanvasRenderingContext2D#drawImage%28%29

Answer 5

如今，渲染缩放的 ImageData 对象的最佳方法通常是创建一个 ImageBitmap 来自它。
所有现代浏览器最终都支持它。

这将使用更快的路径将 ImageData 的内容渲染为可供 drawImage() 绘制的位图，理论上比第二个最佳选项要快得多将 ImageData 放在辅助 上并重新绘制该 。

主要的问题是 createImageBitmap() 是异步*，因此它可能不太适合动画帧。

(async () => {
  // here I'll just make some noise in my ImageData
  const imagedata = new ImageData(100, 100);
  const arr = new Uint32Array(imagedata.data.buffer);
  for( let i = 0; i < arr.length; i++ ) {
    arr[i] = Math.random() * 0xFFFFFF + 0xFF000000;
  }
  // now to render it bigger
  const bitmap = await createImageBitmap(imagedata);
  const canvas = document.querySelector("canvas");
  const ctx = canvas.getContext("2d");
  ctx.imageSmoothingEnabled = false; // keep pixel perfect
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
})();

<canvas width="1000" height="1000"></canvas>

^{* 从技术上讲，只有 Firefox 会异步实现 createImageBitmap()，Chrome 和 Safari 会同步解析返回的 Promise，因此在动画帧中使用它是安全的：< a href="https://jsfiddle.net/vraz3xcg/" rel="nofollow noreferrer">https://jsfiddle.net/vraz3xcg/}

Answer 6

@Castrohenge 的答案有效，但正如 Muhammad Umer 指出的那样，它会弄乱原始画布上的鼠标坐标。如果您想保持执行额外缩放（用于裁剪等）的能力，那么您需要使用第二个画布（用于缩放），然后从第二个画布获取图像数据并将其放入原始画布中。就像这样：

function scaleImageData(imageData, scale){
    var newCanvas = $("<canvas>")
      .attr("width", imageData.width)
      .attr("height", imageData.height)[0];

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

    // Second canvas, for scaling
    var scaleCanvas = $("<canvas>")
      .attr("width", canvas.width)
      .attr("height", canvas.height)[0];

    var scaleCtx = scaleCanvas.getContext("2d");

    scaleCtx.scale(scale, scale);
    scaleCtx.drawImage(newCanvas, 0, 0);

    var scaledImageData =  scaleCtx.getImageData(0, 0, scaleCanvas.width, scaleCanvas.height);

    return scaledImageData;
}