HTML5 Canvas image crop, resize, and save without losing quality

Question

I have canvas with width equal to window width.
I am drawing an image(1920x1080) to canvas.
Then I selected area to crop image inside canvas which will be 492x369.
After cropping image I want to scale that cropped image to 1024x768.

But when I scale that image it loses its quality..

How can I scale image without losing its quality?

The steps which I performed are

Added Image to Main Canvas
Selected Crop area on Canvas
using getImageData() stored croped image data in temp variable.
created new canvas in memory
using putImageData() added image data to new in memory canvas
then getting base64 image data using newcanvas.toDataURL()

user1693593 · Accepted Answer · 2013-07-12 16:30:43Z

1

The simple answer is that you can't..

The image, when scaled, is interpolated. If the source image is of low quality (as in this video snapshot) the result will be at best equal, but never better without some complex processing.

In this case the video snapshot is heavily compressed so you get a blocky image (a result of MPEG compression) which is not so apparent at the original size but becomes evident when scaled (you just see the artifacts better as they too are scaled).

answered Jul 12, 2013 at 16:30

user1693593

Sign up to request clarification or add additional context in comments.

3 Comments

Don Yogesh Over a year ago

Thanks Ken, Can you suggest any other solution for this issue. for e.g. if we see Photoshop we have image with large size, we zoom out it and crop particular area and the resulting image resolution will be set properly without losing its quality. The same I want to do it using HTML5 canvas.

user1693593 Over a year ago

@DonYogesh it's a bit more complicated than that unfortunately. You would first of all need better video quality with higher bit rate (frame dimension is not a guarantee for good quality). Result will never be better than original, it can be masqueraded and synthesized, but never contain more (actual) information than it first did. If you put this same image into Photoshop the result would be about the same when you zoom in, but when PS do an actual scaling it uses an advanced bi-cubic interpolation with additional enhancements such as blurring or sharpening depending on which you want.

Don Yogesh Over a year ago

I am actually working with Higher quality image not with the video. Anyway thanks..

Collectives™ on Stack Overflow

HTML5 Canvas image crop, resize, and save without losing quality

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related