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

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

Answer 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).