Как установить фоновое изображение холста html 5 в изображение .png - PullRequest
Новая
       24

Как установить фоновое изображение холста html 5 в изображение .png

24 голосов
/ 09 марта 2011

Я хотел бы знать, как можно установить фоновое изображение холста в файл .png. Я не хочу добавлять изображение в конец холста и сделать холст прозрачным.

Я хочу, чтобы пользователь мог на самом деле рисовать на этом холсте с фоном, являющимся изображением .png, чтобы я мог извлечь его позже в виде .png с рисунками, которые сделал пользователь.

Ответы [ 4 ]

36 голосов
/ 09 марта 2011

Как показано в в этом примере , вы можете применить фон к элементу canvas с помощью CSS, и этот фон не будет считаться частью изображения, например, при извлечении содержимого через toDataURL().

Вот содержание примера для потомства 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>
15 голосов
/ 28 августа 2012

Вы можете дать фоновое изображение в css: 

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

покажет вам холст на заднем плане

4 голосов
/ 09 марта 2011

Вы можете нарисовать изображение на холсте и позволить пользователю рисовать поверх него.

Функция drawImage() поможет вам в этом, см. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

0 голосов
/ 12 июня 2013

Вы можете использовать этот плагин, но для целей печати я добавил некоторый код типа <button onclick="window.print();">Print</button> и для сохранения изображения <button onclick="savePhoto();">Save Picture</button>

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

оформить заказ на этот плагин http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app

...