API tools faq
paste
ejherran

Canvas Save Image Test

ejherran
Feb 7th, 2014
89
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.81 KB | None | 0 0
raw download clone embed print report
  1. <?php
  2.  
  3. $msg = 'READY!'; // Mensaje de estado
  4.  
  5. if($_POST) // Verifica que existan datos POST
  6. {
  7. define('UPLOAD_DIR', '/tmp/'); // Fija el destino para almacenar la imagen en el servidor
  8. $img = $_POST['code']; // Obtiene el codigo de la imagen
  9. $img = str_replace('data:image/png;base64,', '', $img); // Limpia datos adicionales del codigo
  10. $img = str_replace(' ', '+', $img);
  11. $data = base64_decode($img); // Decodifica el contenido de la imagen
  12. $file = UPLOAD_DIR . uniqid() . '.png'; // Fija un path completo para la imagen, con un identificador unico
  13. $success = file_put_contents($file, $data); // Crea el archivo que contiene la imagen
  14.  
  15. $msg = $success ? "Saved as $file" : "Error!"; // Retorna el path de la imagen o error en caso contrario
  16. }
  17.  
  18. ?>
  19.  
  20.  
  21. <!DOCTYPE html>
  22.  
  23. <html lang="es">
  24.  
  25. <head>
  26.  
  27. <title>CANVAS TEST</title>
  28. <meta charset="utf-8" />
  29.  
  30. </head>
  31.  
  32. <body style="background: #CCC;">
  33.  
  34. <header style="text-align: center;">
  35. <h1>CANVAS TEST</h1>
  36. <h3><?php echo $msg; ?></h3>
  37. </header>
  38.  
  39. <section style="position: relative; top: 0%; left: 0%; height: 100%; width: 100%;">
  40.  
  41. <article style="position: absolute; top: 0%; left: 0%; width: 50%; text-align: center;">
  42. <canvas id="capture" width="400" height="400" style="background: #fff; border:4px solid #000; border-radius: 10px; cursor: crosshair; display: block; margin: auto;"></canvas>
  43. <input id="clear" type="button" value="LIMPIAR" />
  44. </article>
  45.  
  46. <article style="position: absolute; top: 0%; left: 50%; width: 50%; text-align: center;">
  47. <form action="#" method="post">
  48. <textarea id="code" name="code" style="width: 400px; height: 400px; display: block; margin: auto;" required></textarea>
  49.  
  50. <input id="go" type="button" value="OBTENER CODIGO" />
  51. <input name="send" type="submit" value="ENVIAR" />
  52. </form>
  53. </article>
  54.  
  55. </section>
  56.  
  57. </body>
  58.  
  59. <script type="text/javascript">
  60.  
  61. var canvas = document.getElementById('capture'); // Obtener el objeto canvas
  62. var ctx = canvas.getContext("2d"); // Obtener un "contexto" de trabajo en 2D
  63. var rect = canvas.getBoundingClientRect(); // Obtener el espacio rectangular que define el canvas
  64.  
  65. var ox = -1; // Coordenada original en X
  66. var oy = -1; // Coordenada original en Y
  67.  
  68. var code = ''; // Variable para almcaenar el codigo base64 de la imagen
  69. var pick = false; // Variable badera que define el modo "trazo"
  70.  
  71. document.getElementById('go').onclick = getCode; // Evento click para obtener el codigo de la imagen
  72. document.getElementById('clear').onclick = clear; // Evento click para limpiar el canvas y el area de codigo
  73.  
  74. canvas.onmousedown = active; // Eventos del mouse sobre el canvas "presionar"
  75. canvas.onmouseup = anule; // "soltar"
  76. canvas.onmouseover = anule; // "salir"
  77. canvas.onmousemove = move; // "mover"
  78.  
  79. function clear() // Funcion que limpia y restablece los valores iniciales
  80. {
  81. anule(); // Anula el modo trazo
  82.  
  83. ctx.clearRect(0, 0, canvas.width, canvas.height); // Limpia el canvas
  84. document.getElementById('code').value = ''; // Limpia el area de codigo
  85. }
  86.  
  87. function active() // Funcion que define el inicio de un trazo
  88. {
  89. pick = true; // Activa el modo trazo
  90. ox = -1; // Fija coordenadas originales
  91. oy = -1;
  92. }
  93.  
  94. function anule() // Funcion que define el fin de un trazo
  95. {
  96. pick = false; // Desactiva el modo trazo
  97. ox = -1; // Fija coordenadas originales
  98. oy = -1;
  99. }
  100.  
  101. function move(evt) // Funcion que "dibuja" un trazo sobre el canvas
  102. {
  103. if(pick) // Verifica que el modo trazo este activo
  104. {
  105.  
  106. var x = evt.clientX - rect.left; // Calcula las coordenadas del puntero respecto al origen del canvas
  107. var y = evt.clientY - rect.top;
  108.  
  109. ctx.lineWidth = 3; // Define el ancho de linea conque se va a dibujar
  110. ctx.strokeStyle = 'green'; // Define el color del trazo
  111.  
  112. ctx.beginPath(); // Inicia una ruta de trazo
  113.  
  114. if(ox == -1 && oy == -1) // Verifica que las coordenadas originales no esten inicializadas
  115. {
  116. ox = x; // Inicializa las coordenadas originales
  117. oy = y;
  118. }
  119. else // Si hay coordenadas originales validas
  120. {
  121. ctx.moveTo(ox,oy); // Mueve el origen del trazo a las coordenadas de origen
  122. ctx.lineTo(x,y); // Define una linea del origen a la posicion del puntero
  123. ctx.stroke(); // Dibuja el trazo
  124.  
  125. ox = x; // Almacena las coordenadas del puntero como el proximo origen
  126. oy = y;
  127. }
  128.  
  129. ctx.closePath(); // Cierra la ruta del trazo
  130.  
  131. }
  132. }
  133.  
  134. function getCode() // Funcion que obtiene el codigo de la imagen trazada
  135. {
  136. code = canvas.toDataURL(); // Obtiene el codigo base64 de la imagen
  137. document.getElementById('code').value = code; // Almacena el codigo en un area de texto
  138. }
  139.  
  140. </script>
  141.  
  142. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!