7
votes

Image sur la conversion en toile / HTML5

Y a-t-il des logiciels / services pour une conversion automatisée d'un format d'image typique (PNG, BMP, JPG / GIF) sur Canvas / HTML5?

html image canvas file-conversion

0 commentaires

6 Réponses :

9
votes

Vous n'avez pas besoin de conversion, utilisez simplement l'image (nouvelle par URL ou n'importe quel dans le 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)

1 commentaires

Et si vous souhaitez manipuler les données de pixels de l'image à l'aide de toile?

13
votes

Voici un outil qui générera du code JavaScript pour dessiner l'image sur Canvas: http: //lab.abhinayratore .com / img2Canvas /

2 commentaires

Merci d'avoir répondu à la question de OP. Les autres réponses sur cette page sont hors de propos.

Cet outil fait le travail, mais c'est aussi vraiment inefficace. Il fait un fillrect pour chaque pixel et ne reconnaît pas de lignes ou de boîtes continues du tout, beaucoup moins de cercles ou d'autres formes.

1
votes

Vous pouvez utiliser le site répertorié ci-dessus, mais voici le code correspondant: xxx

aussi, je mets ensemble un Jsfiddle Demo .

1 commentaires

Cela convertit une toile en une image, mais la question était de convertir une image en toile.

0
votes

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

0 commentaires

1
votes

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

0 commentaires

0
votes

INKScape peut réellement enregistrer des fichiers au format HTML5 Canvas. Testé pour SVG.

0 commentaires