Преобразование изображения в холст / HTML5 - PullRequest
Новая
       2

Преобразование изображения в холст / HTML5

7 голосов
/ 11 июня 2010

Существуют ли программы / сервисы для автоматического преобразования типичного формата изображения (png, bmp, jpg / gif even) в Canvas / HTML5?

Ответы [ 5 ]

12 голосов
/ 30 июня 2011

Вот инструмент, который сгенерирует код JavaScript для рисования изображения на холсте: http://lab.abhinayrathore.com/img2canvas/

9 голосов
/ 11 июня 2010

Вам не нужно конвертировать, просто используйте изображение (новое по URL или любое другое в DOM) по 

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

(взято из здесь ).

См. Учебник по developer.mozilla.org .

1 голос
/ 06 октября 2016

У w3school есть ответ: 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);
};
1 голос
/ 29 апреля 2014

Вы можете использовать сайт, указанный выше, но вот соответствующий код: 

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

Также я собрал рабочую демонстрацию jsfiddle .

0 голосов
/ 04 июля 2014 
     <!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>
...