Question

我有一个遍历图像的脚本。图像开始像素化，然后在查看时变为非像素化。我通过使用x

调用此函数requestAnimationFrame次来实现这一点

Images.prototype.setPixels = function() {
    var sw          = this.imageWidth,
        sh          = this.imageHeight,
        imageData   = this.context.getImageData( 0, 0, sw, sh ),
        data        = imageData.data,
        y, x, n, m;

    for ( y = 0; y < sh; y += this.pixelation ) {
        for ( x = 0; x < sw; x += this.pixelation ) {

            var red = data[((sw * y) + x) * 4];
            var green = data[((sw * y) + x) * 4 + 1];
            var blue = data[((sw * y) + x) * 4 + 2];

            for ( n = 0; n < this.pixelation; n++ ) {
                for ( m = 0; m < this.pixelation; m++ ) {
                    if ( x + m < sw ) {
                        data[((sw * (y + n)) + (x + m)) * 4] = red;
                        data[((sw * (y + n)) + (x + m)) * 4 + 1] = green;
                        data[((sw * (y + n)) + (x + m)) * 4 + 2] = blue;
                    }
                }
            }
        }
    }

    this.context.putImageData( imageData, 0, 0 );
}

问题：我如何使单个像素比现在的像素大。现在，它们很小，效果有些刺耳。我希望通过减少屏幕上的像素块，使其更大来解决此问题。

我希望这是有道理的，我的画布相当绿，所以您能做的一切正确的方向都很好！

Answer 1

实现这种效果的最佳方法是简单地使用drawImage并让浏览器处理像素化，这要归功于可以通过将imageSmoothingEnabled属性更改为来设置最近邻抗锯齿算法。错误。

然后将像素像素化为任何 pixel_size 的过程分为两步：

以原始尺寸/ pixel_size 绘制完整质量的图像（或画布/视频...）。
在此阶段，每个“像素”都大一个像素。
再次绘制此小图像，但按pixel_size放大。为此，您只需要在其自身上绘制画布即可。
现在每个像素都 pixel_size 大。

我们不必处理难以读取的drawImage的许多参数，而只需使用ctx.scale()方法就可以非常轻松地处理缩放。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

function drawPixelated( source, pixel_size ) {
  // scale down
  ctx.scale(1 / pixel_size, 1 / pixel_size)
  ctx.drawImage(source, 0, 0);
  // make next drawing erase what's currently on the canvas
  ctx.globalCompositeOperation = 'copy';
  // nearest-neighbor
  ctx.imageSmoothingEnabled = false;
  // scale up
  ctx.setTransform(pixel_size, 0, 0, pixel_size, 0, 0);
  ctx.drawImage(canvas, 0, 0);
  
  // reset all to defaults
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.globalCompositeOperation = 'source-over';
  ctx.imageSmoothingEnabled = true;
}

const img = new Image();
img.onload = animeLoop;
img.src = "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png";

let size = 1;
let speed = 0.1;
function animeLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  size += speed;
  if(size > 30 || size <= 1) {
    speed *= -1
  }

  drawPixelated( img, size );

  requestAnimationFrame(animeLoop);
}

<canvas id="canvas" width="800" height="600"></canvas>

对于那些真正需要使用ImageData的应用程序来说，例如，因为它们正在生成像素艺术，然后知道您可以简单地使用相同的技术：

将ImageData的每个像素放大1像素。
将上下文缩放为pixel_size
在放大后的画布上绘制画布

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

function putPixelated( imageData, pixel_size ) {
  ctx.putImageData(imageData, 0, 0);
  // make next drawing erase what's currently on the canvas
  ctx.globalCompositeOperation = 'copy';
  // nearest-neighbor
  ctx.imageSmoothingEnabled = false;
  // scale up
  ctx.setTransform(pixel_size, 0, 0, pixel_size, 0, 0);
  ctx.drawImage(canvas, 0, 0);
  
  // reset all to defaults
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.globalCompositeOperation = 'source-over';
  ctx.imageSmoothingEnabled = true;
}

const img = new ImageData(16, 16);
crypto.getRandomValues(img.data);

let size = 1;
let speed = 0.1;

animeLoop();

function animeLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  size += speed;
  if(size > 30 || size <= 1) {
    speed *= -1
  }

  putPixelated( img, size );

  requestAnimationFrame(animeLoop);
}

<canvas id="canvas" width="800" height="600"></canvas>

画布像素化-调整像素大小

1 个答案: