<!DOCTYPE html>
<html dir="ltr" lang="es-es">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
<style>
* {
margin: 0;
border: none;
position: relative;
}
html {
height: 100%;
}
body {
width: 100%;
height: 100%;
}
#contenedor {
width: 700px; /* mismo alto y ancho que #lienzo */
height: 600px;
margin: 0 auto;
overflow: hidden;
border: 1px solid red;
}
#caja {
width: 200px; /* mismo alto y ancho que #lienzoupload */
height: 200px;
float: left;
top: 0;
left: 0;
cursor: move;
visibility: hidden;
position: absolute;
opacity: 1;
overflow: hidden;
background-color: rgb(255, 255, 255);
border: 1px solid rgb(204, 204, 204);
z-index: 101;
}
#caja > img {
position: absolute;
top: 0;
left: 0;
display: block;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
new dNdCrop('#caja', '#caja > img', '#contenedor', '#lienzo', '#lienzoupload', '#guardar', '#tablon');
}, false);
function dNdCrop(caja, imagen, contenedor, lienzo, lienzoupload, guardar, tablon) {
this.caja = document.querySelector(caja);
this.imagen = document.querySelector(imagen);
this.contenedor = document.querySelector(contenedor);
this.lienzo = document.querySelector(lienzo);
this.lienzoupload = document.querySelector(lienzoupload);
this.guardar = document.querySelector(guardar);
this.tablon = document.querySelector(tablon);
this.posLeftCaja = 0;
this.posTopCaja = 0;
this.foo;
this.cajaW = this.caja.offsetWidth;
this.cajaH = this.caja.offsetHeight;
this.contenedorW = this.contenedor.offsetWidth;
this.contenedorH = this.contenedor.offsetHeight;
this.dNd();
var lienzo = this.lienzo,
context = lienzo.getContext('2d'),
img = document.createElement('img'),
texto = true,
limpiaCavas = function () {
if (texto) {
context.clearRect(0, 0, lienzo.width, lienzo.height);
texto = false;
}
},
_this = this;;
context.fillText('Arrastra una imagen aquí', 240, 300);
img.addEventListener('load', function () {
limpiaCavas();
context.drawImage(img, 0, 0);
_this.caja.style.visibility = 'visible';
_this.lienzo.style.opacity = '.4';
}, false);
lienzo.addEventListener('dragover', function (evt) {
evt.preventDefault();
}, false);
lienzo.addEventListener('drop', function (evt) {
var files = evt.dataTransfer.files;
var file = files[0];
if (typeof FileReader !== 'undefined' && file.type.indexOf('image') != -1) {
var reader = new FileReader();
reader.addEventListener('load', function(evt) {
img.src = evt.target.result;
_this.imagen.src = evt.target.result;
});
reader.readAsDataURL(file);
}
evt.preventDefault();
}, false);
this.guardar.addEventListener('click', function() {
var lienzoupload = _this.lienzoupload,
context = lienzoupload.getContext('2d');
context.drawImage(img, _this.posLeftCaja, _this.posTopCaja, lienzoupload.width, lienzoupload.height, 0, 0, lienzoupload.width, lienzoupload.height);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'subirArchivo.php', true);
xhr.onreadystatechange = function(){
if(xhr.status == 200) _this.tablon.textContent = xhr.responseText;
}
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send('archivo="'+ lienzoupload.toDataURL());
}, false);
}
dNdCrop.prototype.dNd = function() {
var _this = this;
this.caja.addEventListener('mousedown', function(evt) {
evt.preventDefault();
evt.stopPropagation();
this.addEventListener('mousemove', _this.foo = function(evt) {
evt.preventDefault();
evt.stopPropagation();
var coorCursor = {x : evt.layerX, y : evt.layerY};
if (coorCursor.x >= (_this.cajaW/2) && coorCursor.x <= (_this.contenedorW - (_this.cajaW/2) - 2)) {
_this.posLeftCaja = coorCursor.x - (_this.cajaW/2);
_this.caja.style.left = _this.posLeftCaja + 'px';
_this.imagen.style.left = -_this.posLeftCaja + 'px';
}
if (coorCursor.y >= (_this.cajaH/2) && coorCursor.y <= (_this.contenedorH - (_this.cajaH/2) - 2)) {
_this.posTopCaja = coorCursor.y - (_this.cajaH/2);
_this.caja.style.top = _this.posTopCaja + 'px';
_this.imagen.style.top = -_this.posTopCaja + 'px';
}
}, false);
}, false);
this.caja.addEventListener('mouseup', function(evt) {
evt.preventDefault();
evt.stopPropagation();
this.removeEventListener('mousemove', _this.foo, false);
}, false);
this.contenedor.addEventListener('mouseout', function(evt) {
evt.preventDefault();
evt.stopPropagation();
_this.caja.removeEventListener('mousemove', _this.foo, false);
}, false);
}
</script>
</head>
<body>
<div id="contenedor">
<canvas id="lienzo" width="700" height="600"></canvas>
<div id="caja">
<img src="">
</div>
<canvas id="lienzoupload" width="200" height="200"></canvas>
</div>
<input type="button" id="guardar" value="guardar">
<span id="tablon"></span>
</body>
</html>
)
