如何将 html 5 画布的背景图像设置为 .png 图像答案

【问题标题】：How to set the background image of a html 5 canvas to .png image如何将 html 5 画布的背景图像设置为 .png 图像
【发布时间】：2011-07-11 14:42:49
【问题描述】：

我想知道如何将画布的背景图像设置为 .png 文件。我不想在画布背面添加图像并使画布透明。

我希望用户能够在背景为 .png 图像的画布上实际绘图，以便稍后我可以将其提取为带有用户绘制的绘图的 .png。

【问题讨论】：

标签： html canvas background-image

【解决方案1】：

您可以在画布上绘制图像并让用户在其上进行绘制。

drawImage() 函数将帮助您，请参阅 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

【讨论】：

这需要用户记录用户的绘图命令并在空白画布上“重放”它们以提取无背景结果。首先不绘制背景图像要容易得多，这样您就可以毫无问题地提取结果。
确实如此。我不知何故错过了他问题的最后一句话，还是他添加了它？

【解决方案2】：

如this example 所示，您可以通过 CSS 为canvas 元素应用背景，并且此背景不会被视为图像的一部分，例如通过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>

【讨论】：

是否有某种方式可以将 CSS 背景视为图像的一部分？我试图帮助这个fellow overflowian
@JoseRuiSantos 不，不是通过 CSS。您需要 drawImage() 到画布才能使其成为其中的一部分。
我就是这么想的。正如您在链接中看到的，我正在处理运行时生成的内容-moz-element，所以恐怕没有办法“获取”这个图像。无论如何感谢您的帮助。

【解决方案3】：

你可以在css中给出背景图片：

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

它会显示画布背景图像

【讨论】：

【解决方案4】：

您可以使用此插件，但出于打印目的，我添加了一些代码，例如 <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

【讨论】：