1

I am trying to fix problem when cropping images using canvas and drawImage. I've gone through all articles in internet and couldn't find simple answer or help.

The script actually works, but the cropped images are full with noise. I would appreciate your help and ideas that will lead to fixing this.

I am using firefox(27.0.1) when i am working with these functions.

$(document).ready(function() {
    var width = 80, height = 80;
    var ctx = document.getElementById('canvas').getContext('2d'),
       img = new Image,
       w = 200,
       h = 200,
       x = 800,
       y = 100; 
    img.src = $('#image2').attr('src');

    ctx.drawImage(img, x, y, w, h, 0, 0, width, height);
});

Fiddle example of how it looks after crop:

http://jsfiddle.net/LUU28/

Example of how i see it (and how i want it to look) and how it becomes after:

enter image description here

Papa Zhi
  • 45
  • 1
  • 11
  • the js fiddle does nothing... even with a correct image url – clancer Feb 21 '14 at 04:13
  • So strange, it loads ok for me. Could anyone else confirm fiddle problem? – Papa Zhi Feb 21 '14 at 04:18
  • Use jquery <1.10 in your fiddles. Also, no the image in the fiddle does not load (IE11,FF27,Chrom32). – markE Feb 21 '14 at 04:39
  • you can cheat by scaling the canvas before drawing: `ctx.scale(0.5,0.5) ctx.drawImage(img, x, y, w, h, 0, 0, w, h);` – Jorg Feb 21 '14 at 04:55
  • For this particular example it may work, but what will happen if user decides to use image 150x150 and script scale it 50% down and draws on 80x80px canvas? I really need some kind of processing stuff done here, something that would work with no regard of the source resolution or size. – Papa Zhi Feb 21 '14 at 05:08
  • calculate the scale? `ctx.scale(80/150, 80/150)` // edit: make a temporary canvas, resize it, draw your image, convert it to an image again. – Jorg Feb 21 '14 at 05:11
  • I really appreciate your input. However i had to say at the start, i am not javascript programmer. Could you show me how this would go in the fiddle i provided? – Papa Zhi Feb 21 '14 at 05:17
  • 1
    I'm no expert either, but I'd refer you here: http://stackoverflow.com/questions/19262141/resize-image-with-javascript-canvas-smoothly – Jorg Feb 21 '14 at 05:38
  • Thanks a lot. After some careful reading further my problem i found solution that works for me. I'll edit my post and explain. – Papa Zhi Feb 22 '14 at 02:02

1 Answers1

1

Canvas works great, as far as it's handled properly. Unfortunately sometimes the programmer needs to go deep to find solution for his problems.

My solution actually came from another post: Html5 canvas drawImage: how to apply antialiasing

The problem i had was that when canvas is used to crop images from really good quality to really small size, the final crop if not processed at all is lacking any anti-aliased processing.

If you happen to have rough crop result using canvas and drawimage, the link above is one of many solutions to the problem.

Community
  • 1
  • 1
Papa Zhi
  • 45
  • 1
  • 11