2
var crop_canvas = document.createElement('canvas');
crop_canvas.width = rcWidth;
crop_canvas.height = rcHeight;
crop_canvas.getContext('2d').drawImage(image_target, rcLeft, rcTop, rcWidth, rcHeight, 0, 0, rcWidth, rcHeight);

image_target is having the image element

rcLeft: x coordinate for cropping

rcTop: y coordinate for cropping

rcWidth: width of cropped image

rcHeight: height of cropped image

Considering we do not need to crop the image, we just need a copy of the image.

The copy created is of greater size ie.If the image is of 1MB. The copy created is of 5MB approx.

yash
  • 2,101
  • 2
  • 23
  • 32
Surya Purohit
  • 1,090
  • 1
  • 9
  • 29
  • How do you measure the size of an image on a canvas in MB? – nnnnnn Sep 12 '16 at 06:30
  • http://stackoverflow.com/questions/14383557/setting-canvas-todataurl-jpg-quality – Joseph Young Sep 12 '16 at 06:31
  • Because canvas data is uncompressed row pixels, while your image is compressed (either through jpeg (lossy compression) or png (lossless compression)) – Kaiido Sep 12 '16 at 07:52
  • Ps: why do you need a copy of the image, where does the source comes from? – Kaiido Sep 12 '16 at 07:54
  • I need to crop the image, but when tried cropping the full image, come to know what the size is increased – Surya Purohit Sep 12 '16 at 07:58
  • @nnnnnn With the help of blob – Surya Purohit Sep 12 '16 at 07:59
  • "*Considering we do not need to crop the image, we just need a copy of the image.*" Do you need to crop it or not ? You can already reduce the size of your output by using the `toBlob(callback, 'image/jpeg', quality)`, where `quality` is a 0-1 float, but you'll loose in image quality though. – Kaiido Sep 12 '16 at 08:01
  • I have provided the ability to crop the image, but there can be a case the user needs the uncropped image or cropping only 2-3 pixels and I don't wanna use quality as it is somewhat near 0.92 in chrome I think and that is best-suited for it. Quality too is to be maintained – Surya Purohit Sep 12 '16 at 08:05
  • For the 2-3 px it's impossible. Since one can give you a jpeg image, already deteriored with jpeg artifacts, and compressed, you can't uncompress it, draw it on a canvas and export at the same size. You need to compress it again, which means more artifacts. For the no action, just return the original file. – Kaiido Sep 12 '16 at 08:10
  • @Kaiido it was really not meant 2-3 pixels only. It can be 100 or more but the fact is, the size of the image is considered wrong. If we take a part of 1 MB image and canvas is cropping it from more than that. It's obvious, there is something left behind which causes the increase in the image size – Surya Purohit Sep 12 '16 at 08:16
  • https://en.wikipedia.org/wiki/Image_compression canvas data is uncompressed. Your original image is compressed. Canvas compression algorithms are limited. Once uncompressed, you can't retrieve the original size of a lossy compressed image without losing more quality. That's it. End of the story. – Kaiido Sep 12 '16 at 08:29

0 Answers0