Image to Canvas / HTML5 Conversion

Question

Are there software/services for automated conversion of a typical image format (png, bmp, jpg/gif even) to Canvas / HTML5?

score 14 · Answer 1 · answered Jun 30 '11 at 14:05

14

Here is a tool that will generate JavaScript code to draw the image on canvas: http://lab.abhinayrathore.com/img2canvas/

answered Jun 30 '11 at 14:05

Abhinay

141
1
2

4

Thanks for actually answering OP's question. The other answers on this page are irrelevant. – Feb 22 '12 at 16:53
1

This tool does the job, but it's also really inefficient. It does a fillRect for each pixel and doesn't recognize continuous lines or boxes at all, much less circles or other shapes. – Samuel Neff Apr 04 '13 at 19:15

score 9 · Answer 2 · edited Mar 05 '14 at 09:25

9

You don't need no conversion, just use the image (either new by url or any one in the DOM) by

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

(taken from here).

See the tutorial on developer.mozilla.org.

edited Mar 05 '14 at 09:25

groovecoder

1,551
1
17
27

answered Jun 11 '10 at 10:47

mkluwe

3,823
2
28
45

2

what if you want to manipulate the pixel data of the image using canvas? – ina Jul 11 '11 at 09:41

score 1 · Answer 3 · answered Apr 29 '14 at 17:17

1

You can use the site listed above, but here is the relevant code:

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

Also, I put together a working jsfiddle demo.

answered Apr 29 '14 at 17:17

Dan H

51
2

1

This converts a canvas to an image, but the question was to convert an image to a canvas. – Mike Chamberlain Nov 05 '15 at 10:09

score 1 · Answer 4 · answered Oct 06 '16 at 10:28

w3school has the answer: 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);
};

score 0 · Answer 5 · answered Jul 04 '14 at 11:52

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

score 0 · Answer 6 · answered Oct 25 '19 at 06:53

0

Inkscape can actually save files to HTML5 Canvas format. Tested for SVG.

answered Oct 25 '19 at 06:53

Matti Haapamäki

1
2

Image to Canvas / HTML5 Conversion

6 Answers6