Skip to content

Instantly share code, notes, and snippets.

@ricardosiri68

ricardosiri68/crop-image.php

Last active August 7, 2017 08:20
Show Gist options
  • Save ricardosiri68/927858fd44f0589f8fbb to your computer and use it in GitHub Desktop.
Save ricardosiri68/927858fd44f0589f8fbb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
crop-image.php
<?php
/**
* Jcrop image cropping plugin for jQuery
* Example cropping script
* @copyright 2008-2009 Kelly Hallman
* More info: http://deepliquid.com/content/Jcrop_Implementation_Theory.html
*/
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
$targ_w = $targ_h = 150;
$jpeg_quality = 90;
$src = 'demo_files/pool.jpg';
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
$targ_w,$targ_h,$_POST['w'],$_POST['h']);
header('Content-type: image/jpeg');
imagejpeg($dst_r,null,$jpeg_quality);
exit;
}
// If not a POST request, display page below:
?>
Raw
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Foto</title>
<style>
#capture{display: none;}
.inactive{
display: none;
}
</style>
<link rel="stylesheet" href="jquery.Jcrop.min.css" type="text/css" />
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.Jcrop.min.js"></script>
<script language="javascript" type="text/javascript" src="webcam-capture.js"></script>
<script language="javascript" type="text/javascript" src="script.js"></script>
</head>
<body>
<img src="" id="img" >
<video id="webcam"></video>
<canvas id="capture"></canvas>
<button id="take_btn">Toma una foto</button>
<button id="another_btn" style="display: none;" >Otra</button>
<button id="ready_btn" style="display: none;" >Listo</button>
<button id="cropCapture" style="display: none;" >Crapear</button>
</body>
</html>
Raw
save-image.php
<?php
/**
*----------------------------------------------------------------------------
* save-image
*
* PHP version 5.4.12
*
* modulo encargado de recibir la imagen
*
*----------------------------------------------------------------------------
*/
$imageData = base64_decode(explode(',', $_POST['image'])[1]);
// moverlo a una carpeta con una ruta relativa
file_put_contents('una_carpeta/image.png', $imageData, LOCK_EX);
// moverlo a una carpeta con una ruta absoluta
// file_put_contents('/home/mihost/public_html/una_carpeta/image.png', $imageData, LOCK_EX);
?>
Raw
script.js
/*jslint nomen: true, debug: true, evil: true, vars: true, browser: true,
devel: true */
/*global $, WebcamCapture */
(function(){
function checkCoords() {
if (parseInt($('#w').val(), 10)) {
return true;
}
alert('Please select a crop region then press submit.');
return false;
}
function init() {
var webcam = new WebcamCapture({
video: "webcam",
canvas: "capture",
image: "img",
takeBtn: "take_btn",
anotherBtn: "another_btn",
ready: "ready_btn",
post: 'save-image.php'
});
}
window.addEventListener('load', init);
}());
Raw
webcam-capture.js
/*jslint nomen: true, debug: true, evil: true, vars: true, browser: true,
devel: true */
/*global $ */
var WebcamCapture = function(conf){
this.conf = conf;
this.video = document.getElementById(conf.video);
this.canvas = document.getElementById(conf.canvas);
this.image = document.getElementById(conf.image);
this.takeBtn = document.getElementById(conf.takeBtn);
this.anotherBtn = document.getElementById(conf.anotherBtn);
this.readyBtn = document.getElementById(conf.ready);
window.navigator.getUserMedia = (
window.navigator.getUserMedia ||
window.navigator.webkitGetUserMedia ||
window.navigator.mozGetUserMedia ||
window.navigator.msGetUserMedia
);
if (window.navigator.getUserMedia) {
window.navigator.getUserMedia(
{video:true},
this.startWebcam.bind(this),
this.error.bind(this)
);
} else {
alert('Tienes un navegador obsoleto');
}
this.video.addEventListener(
'loadedmetadata',
this.handleMetadata.bind(this),
false
);
this.takeBtn.addEventListener('click', this.takePicture.bind(this));
this.anotherBtn.addEventListener('click', this.hide.bind(this));
this.readyBtn.addEventListener('click', this.sendCapture.bind(this));
};
WebcamCapture.prototype = {
startWebcam: function(stream){
this.video.src = window.URL.createObjectURL(stream);
this.video.play();
},
error: function(e){
console.log(e);
},
handleMetadata: function(){
this.canvas.width = this.video.videoWidth;
this.canvas.height = this.video.videoHeight;
},
takePicture: function(){
this.canvas.getContext('2d').drawImage(this.video, 0, 0);
this.imgData = this.canvas.toDataURL('image/png');
this.image.setAttribute('src', this.imgData);
console.debug(this.imgData);
$('#img').Jcrop({
aspectRatio: 1,
onSelect: this.updateCoords.bind(this)
});
this.toggle(true);
},
updateCoords: function(crop){
this.crop = crop;
},
toggle: function(show){
var toggle_one = show ? 'inline-block':'none';
var toggle_two = !show ? 'inline-block':'none';
this.image.style.display = toggle_two;
this.readyBtn.style.display = toggle_one;
this.anotherBtn.style.display = toggle_one;
this.takeBtn.style.display = toggle_two;
this.video.style.display = toggle_two;
},
hide: function(){
this.toggle(false);
},
getData: function(){
var formdata = new FormData();
formdata.append('image', this.imgData);
formdata.append('x', this.crop.x);
formdata.append('x2', this.crop.x2);
formdata.append('y', this.crop.y);
formdata.append('y2', this.crop.y2);
formdata.append('w', this.crop.w);
formdata.append('h', this.crop.h);
return formdata;
},
sendCapture: function(){
$.ajax({
url: this.conf.post,
type: 'POST',
data: this.getData(),
processData: false,
contentType: false,
success: this.success.bind(this)
});
},
success: function(data){
console.log(data);
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment