web-dev-qa-db-fra.com

Comment définir l'image d'arrière-plan d'un canevas html 5 sur une image .png

Je voudrais savoir comment il est possible de définir l'image d'arrière-plan d'une toile dans un fichier .png. Je ne veux pas ajouter l'image à l'arrière de la toile et rendre la toile transparente.

Je veux que l'utilisateur puisse réellement dessiner sur cette toile avec l'arrière-plan étant l'image .png afin que je puisse l'extraire plus tard en tant que .png avec les dessins que l'utilisateur a faits.

html5canvasbackground-image
24
Farzad Towhidi

Comme indiqué dans cet exemple , vous pouvez appliquer un arrière-plan à un élément canvas via CSS et cet arrière-plan ne sera pas considéré comme faisant partie de l'image, par exemple lors de la récupération du contenu via toDataURL().

Voici le contenu de l'exemple, pour la postérité Stack Overflow:

<!DOCTYPE HTML>
<html><head>
  <meta charset="utf-8">
  <title>Canvas Background through CSS</title>
  <style type="text/css" media="screen">
    canvas, img { display:block; margin:1em auto; border:1px solid black; }
    canvas { background:url(lotsalasers.jpg) }
  </style>
</head><body>
<canvas width="800" height="300"></canvas>
<img>
<script type="text/javascript" charset="utf-8">
  var can = document.getElementsByTagName('canvas')[0];
  var ctx = can.getContext('2d');
  ctx.strokeStyle = '#f00';
  ctx.lineWidth   = 6;
  ctx.lineJoin    = 'round';
  ctx.strokeRect(140,60,40,40);
  var img = document.getElementsByTagName('img')[0];
  img.src = can.toDataURL();
</script>
</body></html>
36
Phrogz

Vous pouvez donner l'image d'arrière-plan en CSS:

#canvas { background:url(example.jpg) }

il vous montrera l'image de fond de toile

15
user1325775

Vous pouvez dessiner l'image sur la toile et laisser l'utilisateur dessiner dessus.

La fonction drawImage() vous aidera avec cela, voir https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

4
oberhamsi

Vous pouvez utiliser ce plugin, mais à des fins d'impression, j'ai ajouté du code comme <button onclick="window.print();">Print</button> et pour enregistrer l'image <button onclick="savePhoto();">Save Picture</button>

     function savePhoto() {
     var canvas = document.getElementById("canvas");
     var img    = canvas.toDataURL("image/png");
     window.location = img;}

extraire ce plugin http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app

0
Raza