1

我有一个画布，并putImageData()在更新了由getImageData.data.

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

当然，我也可以通过重复每行两次来毫无疑问地做到这一点，但是它需要太多时间来渲染一帧（我每秒显示 25 帧）。我已经阅读了有关使用方法缩放图像的能力drawImage()。据我所知，唯一的问题是 usingdrawImage()比 using 慢putImageData()，并且在 Firefox/2 （或类似的）等旧浏览器版本中是必需的。

如何尽可能快地将 Y 方向的图像放大两倍？

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

4

2 回答 2

6

如果您希望整个画布可以缩放，则无需任何额外的 javascript 即可完成此操作。只需在 CSS 中设置一个尺寸，使其具有画布中指定的宽度和高度的两倍。

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

请参阅W3 规范。

编辑：

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

canvas {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}
于 2013-07-01T14:06:20.663 回答
3

您可以通过一次抓取一个图像行，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/以获得在我的机器上在 3 毫秒内完成的工作示例。

于 2013-07-01T14:28:36.300 回答