Image sur Toile / HTML5 Conversion

Sont là de logiciels/services pour l'automatisation de la conversion d'un type de format d'image (png, jpg, bmp, gif, même) sur la Toile /HTML5?

OriginalL'auteur ina | 2010-06-11

  1. 12

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

    Merci pour réellement répondre à l'OP de la question. Les autres réponses sur cette page ne sont pas pertinents.
    Cet outil fait le travail, mais il est également très inefficace. Il fait un fillRect pour chaque pixel et ne reconnaît pas les lignes continues ou des boîtes à tout, et encore moins des cercles ou d'autres formes.

    OriginalL'auteur Abhinay

  2. 9

    Vous n'avez pas besoin de conversion, il suffit d'utiliser l'image (soit nouveau par url ou tout seul 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)

    (prises de ici).

    Voir le tutoriel sur developer.mozilla.org.

    s/toile/contexte
    que faire si vous voulez manipuler les données de pixel de l'image à l'aide de la toile?

    OriginalL'auteur mkluwe

  3. 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, j'ai mis en place un travail jsfiddle démo.

    Cette fonction convertit une toile à une image, mais la question était de convertir une image dans un canvas.

    OriginalL'auteur Dan H

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

    OriginalL'auteur Savaratkar

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

    OriginalL'auteur Chetan Ghadiya