7
Existe-t-il des logiciels/services pour la conversion automatique d'un format d'image typique (png, bmp, jpg/gif même) en Canvas/HTML5?Conversion d'image en canevas/HTML5
A
Répondre
9
Vous n'avez pas besoin pas de conversion, il suffit d'utiliser l'image (soit nouveau par url ou une dans les DOM) par
canvas.drawImage(image, dx, dy)
canvas.drawImage(image, dx, dy, dw, dh)
canvas.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
(prise de here). Voir le tutoriel sur le developer.mozilla.org.
12
Voici un outil qui va générer du code JavaScript pour dessiner l'image sur la toile: http://lab.abhinayrathore.com/img2canvas/
+2
Merci d'avoir répondu à la question de OP. Les autres réponses sur cette page ne sont pas pertinentes. –
+1
Cet outil fait le travail, mais il est aussi très inefficace. Il fait un fillRect pour chaque pixel et ne reconnaît pas du tout les lignes ou les boîtes continues, encore moins les cercles ou autres formes. –
1
Vous pouvez utiliser le site ci-dessus, mais voici le code correspondant:
function convertImage(canvas, callback) {
var image = new Image();
image.onload = function(){
callback(image);
}
image.src = canvas.toDataURL("image/png");
}
Aussi, je mettre en place un working jsfiddle demo.
+1
Cela convertit un canevas en une image, mais la question était de convertir une image en canevas. –
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 a la réponse: 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);
};
s/toile/contexte –
si vous souhaitez manipuler les données de pixels de l'image en utilisant la toile? – ina