Recortar archivo de imagen local

I got a form that allow user to upload image and crop it I already figured out the flow of it

1.User upload the image
2.Server process it and send back to the browser
3.User crop it and send to the server
4.Server process and save it

¿Hay alguna otra forma de lograrlo?
Perhaps using javascript to load the image and then crop it then after that send to server to process it.
¿Hay alguna manera?

Editado Im looking to avoid sending those image to server to process it.
Probably load the file using FileReader..
I have no luck on googling it

preguntado el 24 de diciembre de 12 a las 21:12

You might want to check out this link... loquehasintentado.com -

2 Respuestas

Puedes usar el FileReader + Canvas to read the local file and then crop it without sending it to the server.

Here's a demo showing how to do that.

<form><input type="file" id=f></form>
<canvas id=c width="600" height="600"></canvas>
<script>
var f = document.getElementById('f');
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
f.onchange = function() {
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function(evt) {
        var img = new Image();
        img.onload = function() {
          context.drawImage(this, 0, 0, 100, 100, 0, 0, 100, 100);
          var pngUrl = canvas.toDataURL();
          //alert(pngUrl); // send this url to server to save the image
        }
        img.src = evt.target.result;
    }
    reader.readAsDataURL(file);
}
</script>

What you still need to do is use the jquery jcrop plugin in order to let the user select the cropping area because in this demo I just hard coded a crop of the top left 100x100 pixels.

It looks like you'll want to use jcrops onSelect event to get the origin + width + height of the cropping area, and feed those values into context.drawImage

hopefully you can handle the rest, good luck

Respondido el 25 de diciembre de 12 a las 06:12

this is what i want, thx u so much, sure not probem sir, i ll upvote it - escurridizo

Para esto, I'd use jCrop. Make sure you have access to ImageMagick and/or GD on your system--you'll most likely need that for processing.

EDIT (Oct 2, 2021) - The original link/library looks to be abandoned. I haven't tried this yet but it looks like it will work: https://jcrop.com/

Respondido 03 Oct 21, 00:10

so basically i need to send to the server to process it first and then send back to browser and use jcrop to allow user to crop it right?..what im looking is, is there a way to load the image using javascript itself and then crop it - escurridizo

well, the server part will come into play after you make your crop selection. i would check out the examples here deepliquid.com/projects/Jcrop/demos.php - jbnunn

yes that what i want, after user crop it first then send to server rather than send the uploaded image without crop it first...still, thx for ur suggestion - escurridizo

link looks broken - Félix Adriyel Gagnon-Grenier

Thanks @FélixAdriyelGagnon-Grenier, I updated the answer - jbnunn

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.