I wanted to upload images with dynamic Crop. I have already looked at tutorials and etc., and I can not do it.
I wanted to, for example, load an image by input and at the time open a modal with dynamic Crop, type Facebook, then send the crop to the bank and save the cropped image and the original in a folder. How?
Yes, you can use the Jcrop , which is a simple jQuery plugin for capturing the cut dimensions in the browser :
$(setup)
function setup() {
$('#picture').Jcrop({
onSelect: function(c) {
updateStats(c);
sendToServer(c);
},
});
}
function updateStats(c) {
$('#stats').text(JSON.stringify(c, null, 2));
}
function sendToServer(c) {
// Mande essas coordenadas para o seu servidor,
// com a imagem.
// 'c.h' - Altura cortada
// 'c.w' - Largura cortada
// 'c.x' - Coordenada x do corte
// 'c.y' - Coordenada y do corte
// 'c.x2' - Coordenada x do fim do corte
// 'c.y2' - Coordenada y do fim do corte
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://raw.githubusercontent.com/tapmodo/Jcrop/master/js/jquery.Jcrop.min.js"></script>
<img id="picture" src="https://gs1.wac.edgecastcdn.net/8019B6/data.tumblr.com/tumblr_mathkh9Vuo1ruwwtio1_500.jpg"height="300" width="250" />
<pre id="stats"></pre> Since this data is on your server, it should not be too difficult to resize the image using some tool like graphicsmagick . The documentation for PHP is available here .
The most recommended plugin I know is Cropper , see the examples on the official website here .
Installation is handy, see a small tutorial below, according to official documentation . p>
HTML
<div class="container">
<img src="picture.jpg">
</div>
<div id="previewImg">
<img src="picture.jpg">
</div>
JavaScript
$('.container > img').cropper({
aspectRatio: 16 / 9,
crop: function(data) {
// Saída do resultado da imagem 'cropado'.
// Como enviar a imagem cortado para seu servidor.
},
preview: "$('#previewImg')", // Pré-visualização Imagem
});
The full documentation is here
I hope I have helped you. =)