7
¿Hay software/servicios para la conversión automatizada de un formato de imagen típico (png, bmp, jpg/gif par) a Canvas/HTML5?Conversión de imagen a Canvas/HTML5
A
Respuesta
9
No necesita ninguna conversión, sólo tiene que utilizar la imagen (ya sea por nueva URL o cualquiera en el DOM) por
canvas.drawImage(image, dx, dy)
canvas.drawImage(image, dx, dy, dw, dh)
canvas.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
(tomado de here).
Consulte el tutorial en developer.mozilla.org.
12
Aquí es una herramienta que va a generar el código JavaScript para dibujar la imagen sobre lienzo: http://lab.abhinayrathore.com/img2canvas/
+2
Gracias por responder la pregunta de OP. Las otras respuestas en esta página son irrelevantes. –
+1
Esta herramienta hace el trabajo, pero también es muy ineficiente. Realiza un fillRect para cada píxel y no reconoce líneas o cuadros continuos en absoluto, y mucho menos círculos u otras formas. –
1
Puede utilizar el sitio mencionado anteriormente, pero aquí está el código correspondiente:
function convertImage(canvas, callback) {
var image = new Image();
image.onload = function(){
callback(image);
}
image.src = canvas.toDataURL("image/png");
}
También, armar un working jsfiddle demo.
+1
Esto convierte un lienzo en una imagen, pero la pregunta era convertir una imagen en un lienzo. –
0
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// draw cloud
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#8ED6FF';
context.fill();
context.strokeStyle = '#0000ff';
context.stroke();
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
</script>
</body>
</html>
1
w3school tiene la respuesta: http://www.w3schools.com/tags/canvas_drawimage.asp
window.onload = function() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
};
Cuestiones relacionadas
- 1. conversión de PDF a imagen
- 2. Conversión de JPanel a la imagen
- 3. Conversión de línea de comando de Visio a imagen
- 4. Conversión de UIImage a CGImage causa rotación de la imagen
- 5. imagen de conversión a mapa de bits en android
- 6. conversión de texto html a una imagen con php
- 7. Conversión de imagen a matriz binaria (blob) con HTML5
- 8. Conversión de HTML a XML
- 9. conversión de fem a jpg
- 10. Conversión de imágenes .jpg a .png
- 11. conversión de formato de una imagen en python
- 12. Conversión de un BufferedImage a otro tipo
- 13. ¿Cómo funcionan los algoritmos de conversión de imagen artística ASCII?
- 14. Operador de conversión frente a operador de conversión: precedencia
- 15. Programando el formato de conversión de imagen a JPEG o PNG para la pantalla de Silverlight
- 16. Conversión de imagen OpenCV de RGB a escala de grises utilizando imread dando resultados pobres
- 17. Python: Conversión de marcos GIF a PNG
- 18. conversión de página web en imagen jpeg usando java
- 19. Conversión de puntero a miembro
- 20. Conversión de QString a char *
- 21. conversión de QString a char *
- 22. Conversión de cadena a entero
- 23. Conversión de complemento a dos
- 24. Conversión de System.Windows.Media.Color a System.Drawing.Color
- 25. Conversión de RGB a monocromo
- 26. conversión de HTML a RTF
- 27. Conversión de CGAffineTransform a NSString
- 28. Conversión de DocBook a Word?
- 29. Conversión de ArrayList a Colección
- 30. conversión de DataHandler a byte []
s/lienzo/contexto –
lo que si se quiere manipular los datos de píxeles de la imagen usando la lona? – ina