Ver Mensaje Individual
  #3 (permalink)  
Antiguo 05/08/2011, 23:20
Avatar de Triby
Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 10.106
Antigüedad: 16 años, 3 meses
Puntos: 2237
Respuesta: Crop de imagenes estilo facebook

Bueno, nuestro primer intento funciona a medias, porque puedo crear un marco y posicionarlo dentro de la imagen, incluso cambiarle tamaño, pero "manualmente" con un par de inputs... seguiremos probando a ver que sale:

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es" dir="ltr" >
  3.     <title>Crop in Javascript</title>
  4.     <meta http-equiv="content-type" content="text/html; charset=utf8" />
  5.  
  6. <style type="text/css">
  7. #div-js {
  8.     position:relative;
  9.     margin:0;
  10.     padding:0;
  11. }
  12. #click-js {
  13.     margin:0;
  14.     padding:0;
  15. }
  16. #frame-js {
  17.     position:absolute;
  18.     top:0;
  19.     left:0;
  20.     width:98px;
  21.     height:48px;
  22.     border:1px #888 dotted;
  23.     margin:0;
  24.     padding:0;
  25. }
  26.  
  27. <script type="text/javascript">
  28. var divcont = "div-js";
  29. var clickable = "click-js";
  30. var frame = "frame-js";
  31. function $(target) {
  32.     return document.getElementById(target);
  33. }
  34. function clickMe(event) {
  35.     posX = (event.offsetX) ? event.offsetX : event.pageX - $(divcont).offsetLeft;
  36.     posY = (event.offsetY) ? event.offsetY : event.pageY - $(divcont).offsetTop;
  37.     $(frame).style.left = posX + 'px';
  38.     $(frame).style.top = posY + 'px';
  39.     $(frame).style.visibility = "visible" ;
  40.     $("inputx").value = posX;
  41.     $("inputy").value = posY;
  42. }
  43. function changeWidth(width) {
  44.     $(frame).style.width = width + 'px';
  45. }
  46. function changeHeight(height) {
  47.     $(frame).style.height = height + 'px';
  48. }
  49.  
  50. </head>
  51. <div id="div-js">
  52.     <img src="triby.jpg" alt="Imagen de prueba" id="click-js" onclick="clickMe(event);" />
  53.     <div id="frame-js" style="visibility:hidden;"></div>
  54. </div>
  55. <div>
  56.     X: <input type="text" name="inputx" id="inputx" size="5" readonly="readonly" /><br />
  57.     Y: <input type="text" name="inputy" id="inputy" size="5" readonly="readonly" /><br />
  58.     Width: <input type="text" name="width" value="100" onchange="changeWidth(this.value)" /><br />
  59.     Height: <input type="text" name="height" value="100" onchange="changeHeight(this.value)" />
  60. </div>
  61. </body>
  62. </html>
__________________
- León, Guanajuato
- GV-Foto