javascript - Upscaling canvas data as fast as possible - Stack Overflow

admin管理员组

文章数量:1393889

I have got a canvas and I display image using it via the putImageData() method after updating bytes in clamped array got by getImageData.data.

That works nicely, but I need to scale *2 in Y-direction.

Of course I can do it without a question here too by repeating every lines twice, but it requires too much time to render a frame then (I display 25 frames per second). I've read about the ability to scale image with drawImage() method. The only problem that as far as I know, using drawImage() is slower than using putImageData(), and it was required in old browser versions like Firefox/2 (or such).

How can I upscale the image in Y direction twice as fast as possible?

By the way, is it possible to get similar solution to gain full screen resolution somehow (a flash - not JS - example: like what youtube does when you go to fullscreen)?

I have got a canvas and I display image using it via the putImageData() method after updating bytes in clamped array got by getImageData.data.

That works nicely, but I need to scale *2 in Y-direction.

Of course I can do it without a question here too by repeating every lines twice, but it requires too much time to render a frame then (I display 25 frames per second). I've read about the ability to scale image with drawImage() method. The only problem that as far as I know, using drawImage() is slower than using putImageData(), and it was required in old browser versions like Firefox/2 (or such).

How can I upscale the image in Y direction twice as fast as possible?

By the way, is it possible to get similar solution to gain full screen resolution somehow (a flash - not JS - example: like what youtube does when you go to fullscreen)?

• javascript
• canvas

Share Improve this question Follow edited Jun 27, 2016 at 21:08 Darth Hunterix 1,51055 gold badges2727 silver badges3131 bronze badges asked Jul 1, 2013 at 14:01 LGBLGB 71822 gold badges1010 silver badges2020 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

If you want the whole canvas to scale, you can do this without any extra javascript. Just set a size in CSS that has twice the width and height specified in the canvas.

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

See the W3 spec.

Edit:

Looking at the question linked by Alnitak below: If you want nearest-neighbor scaling rather than antialiasing you can do this:

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

You can achieve vertical scaling (without anti-aliasing) by just grabbing one image row at a time with getImageData and then replicating that row multiple times with putImageData, e.g.:

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++);
    }
}

See http://jsfiddle/alnitak/hYZ3U/ for a worked example that pletes in 3ms on my machine.

本文标签： javascriptUpscaling canvas data as fast as possibleStack Overflow