Question

我有一个画布，在更新putImageData()得到的钳位数组中的字节后，通过getImageData.data方法使用它显示图像。

这很好用，但我需要在Y方向上缩放* 2。

当然我也可以在没有问题的情况下通过重复每一行两次来做到这一点，但是它需要太多时间来渲染帧（我每秒显示25帧）。我已经阅读了使用drawImage()方法缩放图像的功能。据我所知，唯一的问题是使用drawImage()比使用putImageData()要慢，而且在Firefox / 2（或其他）等旧浏览器版本中也是如此。

如何以尽可能快的速度在Y方向上放大图像？

顺便说一句，是否有可能获得类似的解决方案以某种方式获得全屏分辨率（闪光灯 - 而不是JS - 例如：就像你进入全屏时youtube所做的那样）？

Answer 1

如果您希望整个画布可以缩放，则可以在不使用任何额外的javascript的情况下执行此操作。只需在CSS中设置一个大小，该大小是画布中指定宽度和高度的两倍。

<canvas width="200" height="100" style="width:200; height: 200">

请参阅W3 spec。

修改

查看下面Alnitak链接的问题：如果你想要最近邻居缩放而不是抗锯齿，你可以这样做：

canvas { image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; -ms-interpolation-mode: nearest-neighbor; }

Answer 2

您只需使用getImageData一次抓取一个图像行，然后使用putImageData多次复制该行，即可实现垂直缩放（无抗锯齿），例如：

var oy = 0;
for (var y = 0; y < sh; ++y) {
    var data = src_ctx.getImageData(0, y, sw, 1);
    for (var n = 0; n < scale; ++n) {
        dst_ctx.putImageData(data, 0, oy++);
    }
}

请参阅http://jsfiddle.net/alnitak/hYZ3U/以获取在我的计算机上3ms内完成的工作示例。

尽可能快地提升画布数据

2 个答案: