Conversion d'image en canevas/HTML5

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

Source

2010-06-11 ina

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.

Source

2010-06-11 10:47:52 mkluwe

s/toile/contexte –

si vous souhaitez manipuler les données de pixels de l'image en utilisant la toile? – ina

Voici un outil qui va générer du code JavaScript pour dessiner l'image sur la toile: http://lab.abhinayrathore.com/img2canvas/

Source

2011-06-30 14:05:23 Abhinay

Merci d'avoir répondu à la question de OP. Les autres réponses sur cette page ne sont pas pertinentes. –

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. –

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.

Source

2014-04-29 17:17:01

Cela convertit un canevas en une image, mais la question était de convertir une image en canevas. –

 <!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>

Source

2014-07-04 11:52:31

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); 
};

Source

2016-10-06 10:28:58 Savaratkar

Conversion d'image en canevas/HTML5

Répondre

Questions connexes