快速缩小图像？

Question

我正在为视频文件编写“电视滤镜”（你知道那种，RGB 条放大），我一直在研究一些缩小图像的方法，以保留尽可能多的细节尽可能。

为了进行测试，我将采样图像绘制回屏幕以查看质量 - 在实际过滤器中，我将仅采样像素并获取所得计算颜色的 RGB 值。

我试过三个，Hermite滤镜看起来不错，但与速度“硬件”最近邻版本相比，它不适合处理视频。

JavaScript 中是否有任何“技巧”可用于加速图像缩小，如 2，但质量如 1 或 3？

1：蛮力：http://codepen.io/SarahC/pen/VpvWvb?editors=1010

2：内部最近邻：http://codepen.io/SarahC/pen/ryeQgN?editors=1010

3：Hermite 过滤器：http://codepen.io/SarahC/pen/ryMNWZ?editors=1010

这里是“硬件”？版本：

function processResize(percent) {
  var size = percent * 0.01;
  var sw = canvas.width * size;
  var sh = canvas.height * size;
  ctx.drawImage(canvas2, 0, 0, sw, sh);
  ctx.drawImage(canvas, 0, 0, sw, sh, 0, 0, w, h);
}

Answer 1

从描述中我不完全确定您尝试实现什么，但从代码笔看来，当您尝试创建马赛克效果时。

您可以使用画布上下文的内置插值设置，通过关闭图像平滑来使用最近邻，然后将图像绘制为表示您想要多少“块”的小尺寸。然后再次将该版本拉回全尺寸：

// blocks = initial number of pixels (video aspect is usually 16:9 so you may want
// to calculate a separate values for height.
var blocks = 24;

// draw initial size representing "blocks"
ctx.drawImage(video, 0, 0, blocks, blocks);

// turn off image smoothing (see below for prefixing)
// This uses nearest neighbor
ctx.imageSmoothingEnabled = false;

// enlarge the mosaic back to full size
ctx.drawImage(c, 0, 0, blocks, blocks, 0, 0, c.width, c.height);

视频示例

（视频可能需要几秒钟才能加载...）

var ctx = null;
var blocks = 24;
var video = document.createElement("video");
video.preload = "auto"; video.muted = video.autoplay = video.loop = true;
video.oncanplay = function() {  // initialize for demo
  if (!ctx) {
    c.width = this.videoWidth;
    c.height = this.videoHeight;
    ctx = c.getContext("2d");

    document.querySelector("input").oninput = function() {blocks = +this.value};
    requestAnimationFrame(loop);
  }
}
video.src = "//media.w3.org/2010/05/sintel/trailer.mp4";

function smoothing(state) {
  ctx.oImageSmoothingEnabled = ctx.msImageSmoothingEnabled =
  ctx.mozImageSmoothingEnabled = ctx.webkitImageSmoothingEnabled =
  ctx.imageSmoothingEnabled = state;
}

function loop() {
  smoothing(true);  // improve quality of first step
  ctx.drawImage(video, 0, 0, blocks, blocks);

  smoothing(false); // mosaic step
  ctx.drawImage(c, 0, 0, blocks, blocks, 0, 0, c.width, c.height);
  
  // loop and throttle to 30 fps
  requestAnimationFrame(function() {requestAnimationFrame(loop)});
}

<label>Blocks: <input type=range min=8 max=128 value=24></label><br>
<canvas id=c></canvas>