Tema: Interfaz gráfica para redimensionar imagen
Ver Mensaje Individual
  #17 (permalink)  
Antiguo 28/01/2017, 16:05
mpozo
 
Fecha de Ingreso: noviembre-2015
Mensajes: 231
Antigüedad: 9 años
Puntos: 86
Respuesta: Interfaz gráfica para redimensionar imagen
Parece que entre la documentación que te hemos dado y la que has buscado no has conseguido unificar todo para lograr lo que pretendes. Aquí te dejo un ejemplo básico y entendible que podrás seguir desarrollando
Código Javascript: 
Ver original
  1. <!DOCTYPE html>
  2. <html dir="ltr" lang="es-es">
  3.     <head>
  4.         <title></title>
  5.         <meta charset="utf-8">
  6.         <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
  7.         <style>
  8.             * {
  9.                 margin: 0;
  10.                 border: none;
  11.                 position: relative;
  12.             }
  13.  
  14.             html {
  15.                 height: 100%;
  16.             }
  17.  
  18.  
  19.             body {
  20.                 width: 100%;
  21.                 height: 100%;
  22.             }
  23.  
  24.  
  25.             #contenedor {
  26.                 width: 700px; /* mismo alto y ancho que #lienzo */
  27.                 height: 600px;
  28.                 margin: 0 auto;
  29.                 overflow: hidden;
  30.                 border: 1px solid red;
  31.             }
  32.  
  33.             #caja {
  34.                 width: 200px; /* mismo alto y ancho que #lienzoupload */
  35.                 height: 200px;
  36.                 float: left;
  37.                 top: 0;
  38.                 left: 0;
  39.                 cursor: move;
  40.                 visibility: hidden;
  41.                 position: absolute;
  42.                 opacity: 1;
  43.                 overflow: hidden;
  44.                 background-color: rgb(255, 255, 255);
  45.                 border: 1px solid rgb(204, 204, 204);
  46.                 z-index: 101;
  47.  
  48.             }
  49.  
  50.             #caja > img {
  51.                 position: absolute;
  52.                 top: 0;
  53.                 left: 0;
  54.                 display: block;
  55.             }
  56.         </style>
  57.         <script>
  58.             document.addEventListener('DOMContentLoaded', function() {
  59.  
  60.                  new dNdCrop('#caja', '#caja > img', '#contenedor', '#lienzo', '#lienzoupload', '#guardar', '#tablon');
  61.  
  62.             }, false);
  63.  
  64.  
  65.             function dNdCrop(caja, imagen, contenedor, lienzo, lienzoupload, guardar, tablon) {
  66.  
  67.                 this.caja = document.querySelector(caja);
  68.                 this.imagen = document.querySelector(imagen);
  69.                 this.contenedor = document.querySelector(contenedor);
  70.                 this.lienzo = document.querySelector(lienzo);
  71.                 this.lienzoupload = document.querySelector(lienzoupload);
  72.                 this.guardar = document.querySelector(guardar);
  73.                 this.tablon = document.querySelector(tablon);
  74.                 this.posLeftCaja = 0;
  75.                 this.posTopCaja = 0;
  76.                 this.foo;
  77.                 this.cajaW = this.caja.offsetWidth;
  78.                 this.cajaH = this.caja.offsetHeight;
  79.                 this.contenedorW = this.contenedor.offsetWidth;
  80.                 this.contenedorH = this.contenedor.offsetHeight;
  81.  
  82.                 this.dNd();
  83.  
  84.                 var lienzo = this.lienzo,
  85.  
  86.                 context = lienzo.getContext('2d'),
  87.  
  88.                 img = document.createElement('img'),
  89.  
  90.                 texto = true,
  91.  
  92.                 limpiaCavas = function () {
  93.  
  94.                     if (texto) {
  95.  
  96.                         context.clearRect(0, 0, lienzo.width, lienzo.height);
  97.  
  98.                         texto = false;
  99.                     }
  100.  
  101.                 },
  102.                 _this = this;;
  103.  
  104.                 context.fillText('Arrastra una imagen aquí', 240, 300);
  105.  
  106.  
  107.                 img.addEventListener('load', function () {
  108.  
  109.                     limpiaCavas();
  110.  
  111.                     context.drawImage(img, 0, 0);
  112.  
  113.                     _this.caja.style.visibility = 'visible';
  114.                     _this.lienzo.style.opacity = '.4';
  115.                     
  116.                 }, false);
  117.  
  118.  
  119.                 lienzo.addEventListener('dragover', function (evt) {
  120.  
  121.                     evt.preventDefault();
  122.  
  123.                 }, false);
  124.  
  125.  
  126.  
  127.                 lienzo.addEventListener('drop', function (evt) {
  128.  
  129.                     var files = evt.dataTransfer.files;
  130.  
  131.                     var file = files[0];
  132.  
  133.                     if (typeof FileReader !== 'undefined' && file.type.indexOf('image') != -1) {
  134.  
  135.                         var reader = new FileReader();
  136.  
  137.                         reader.addEventListener('load', function(evt) {
  138.  
  139.                             img.src = evt.target.result;
  140.                             _this.imagen.src = evt.target.result;
  141.                         });
  142.  
  143.                         reader.readAsDataURL(file);
  144.                     }
  145.  
  146.                     evt.preventDefault();
  147.  
  148.                 }, false);
  149.  
  150.  
  151.                 this.guardar.addEventListener('click', function() {
  152.  
  153.                     var lienzoupload = _this.lienzoupload,
  154.  
  155.                     context = lienzoupload.getContext('2d');
  156.  
  157.                     context.drawImage(img, _this.posLeftCaja, _this.posTopCaja, lienzoupload.width, lienzoupload.height, 0, 0, lienzoupload.width, lienzoupload.height);
  158.  
  159.                     var xhr = new XMLHttpRequest();
  160.  
  161.                     xhr.open('POST', 'subirArchivo.php', true);
  162.  
  163.                     xhr.onreadystatechange = function(){
  164.  
  165.                         if(xhr.status == 200) _this.tablon.textContent = xhr.responseText;
  166.                     }
  167.  
  168.                     xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  169.                     xhr.send('archivo="'+ lienzoupload.toDataURL());
  170.  
  171.                 }, false);
  172.             }
  173.  
  174.  
  175.             dNdCrop.prototype.dNd = function() {
  176.  
  177.                 var _this = this;
  178.  
  179.                 this.caja.addEventListener('mousedown', function(evt) {
  180.  
  181.                     evt.preventDefault();
  182.                     evt.stopPropagation();
  183.  
  184.                     this.addEventListener('mousemove', _this.foo = function(evt) {
  185.  
  186.                         evt.preventDefault();
  187.                         evt.stopPropagation();
  188.  
  189.                         var coorCursor = {x : evt.layerX, y : evt.layerY};
  190.  
  191.                         if (coorCursor.x >= (_this.cajaW/2) && coorCursor.x <= (_this.contenedorW - (_this.cajaW/2) - 2)) {
  192.  
  193.                             _this.posLeftCaja = coorCursor.x - (_this.cajaW/2);
  194.  
  195.                             _this.caja.style.left = _this.posLeftCaja + 'px';
  196.                             _this.imagen.style.left = -_this.posLeftCaja + 'px';
  197.                         }
  198.  
  199.                         if (coorCursor.y >= (_this.cajaH/2) && coorCursor.y <= (_this.contenedorH - (_this.cajaH/2) - 2)) {
  200.  
  201.                             _this.posTopCaja = coorCursor.y - (_this.cajaH/2);
  202.  
  203.                             _this.caja.style.top = _this.posTopCaja + 'px';
  204.                             _this.imagen.style.top = -_this.posTopCaja + 'px';
  205.  
  206.                         }
  207.  
  208.                     }, false);
  209.  
  210.                 }, false);
  211.  
  212.                 this.caja.addEventListener('mouseup', function(evt) {
  213.  
  214.                     evt.preventDefault();
  215.                     evt.stopPropagation();
  216.  
  217.                     this.removeEventListener('mousemove', _this.foo, false);
  218.  
  219.                 }, false);
  220.  
  221.                 this.contenedor.addEventListener('mouseout', function(evt) {
  222.  
  223.                     evt.preventDefault();
  224.                     evt.stopPropagation();
  225.  
  226.                     _this.caja.removeEventListener('mousemove', _this.foo, false);
  227.  
  228.                 }, false);
  229.  
  230.             }
  231.         </script>
  232.     </head>
  233.     <body>
  234.  
  235.         <div id="contenedor">
  236.             <canvas id="lienzo" width="700" height="600"></canvas>
  237.             <div id="caja">
  238.                 <img src="">
  239.             </div>
  240.             <canvas id="lienzoupload" width="200" height="200"></canvas>
  241.         </div>
  242.  
  243.         <input type="button" id="guardar" value="guardar">
  244.         <span id="tablon"></span>
  245.  
  246.     </body>
  247. </html>

subirArchivo.php
Código PHP: 
Ver original
  1. <?php
  2. $base64 = $_POST['archivo'];
  3. $base64 = explode(",", $base64);
  4. $base64 = str_replace(' ', '+', $base64[1]);
  5. $data = base64_decode($base64);
  6. $img = imagecreatefromstring($data);
  7. if ($img === false) {
  8.     echo 'Ha ocurrido un error';
  9. } else {
  10.     imagejpeg($img, 'dirarchivos/'. md5(mt_rand() * time()) .'.jpg'); // directorio donde guardar el archivo y nombre del mismo
  11.     imagedestroy($img); 
  12.     echo 'Todo salió bien';
  13. }
  14. ?>