Bild auf Canvas / HTML5-Konvertierung

Gibt es software/Dienste für die automatisierte Konvertierung von einem typischen Bild-format (png, bmp, jpg/gif auch) auf Canvas /HTML5?

InformationsquelleAutor ina | 2010-06-11
  1. 13

    Hier ist ein tool, das generiert JavaScript-code zum zeichnen des Bildes auf der Leinwand: http://lab.abhinayrathore.com/img2canvas/

    • Vielen Dank für die Beantwortung OP ' s Frage. Die anderen Antworten auf dieser Seite sind irrelevant.
    • Dieses tool macht den job, aber es ist auch wirklich ineffizient. Es macht einen fillRect wird für jeden pixel und nicht erkennt, kontinuierliche Linien oder Boxen überhaupt, viel weniger Kreise oder andere Formen.
    InformationsquelleAutor Abhinay
  2. 9

    Brauchen Sie nicht, kein Umbau, nur die Bilder verwenden (entweder neue url oder einen in der DOM) von

    canvas.drawImage(image, dx, dy)
canvas.drawImage(image, dx, dy, dw, dh)
canvas.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

    (entnommen aus hier).

    Finden Sie in der Anleitung auf developer.mozilla.org.

    • s/Leinwand/Rahmen
    • was, wenn Sie wollen, zu manipulieren, um die Pixeldaten für das Bild mit canvas?
    InformationsquelleAutor mkluwe
  3. 1

    Können Sie die Website oben aufgeführten, aber hier ist der relevante code:

    function convertImage(canvas, callback) {
var image = new Image();
image.onload = function(){
callback(image);
}
image.src = canvas.toDataURL("image/png");
}

    Auch, ich habe einen arbeiten jsfiddle demo.

    • Dieser wandelt eine Leinwand zu einem Bild, aber die Frage war, zu konvertieren, ein Bild auf eine Leinwand.
    InformationsquelleAutor Dan H
  4. 1

    w3school hat die Antwort:
    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);
};
    InformationsquelleAutor 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>
    InformationsquelleAutor Chetan Ghadiya
Schreibe einen Kommentar