如何将 html 5 画布的背景图像设置为 .png 图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5241365/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set the background image of a html 5 canvas to .png image
提问by Farzad Towhidi
I would like to know how it is possible to set the background image of a canvas to a .png file. I do not want to add the image in the back of the canvas and make the canvas transparent.
我想知道如何将画布的背景图像设置为 .png 文件。我不想在画布背面添加图像并使画布透明。
I want the user to be able to actually draw on that canvas with the background being the .png image so that I can extract it later as a .png with the drawings that the user made.
我希望用户能够实际在画布上绘图，背景是 .png 图像，以便我稍后可以将其提取为带有用户制作的绘图的 .png。
回答by Phrogz
As shown in this example, you can apply a background to a canvaselement through CSS and this background will not be considered part the image, e.g. when fetching the contents through toDataURL().
如本例所示，您可以canvas通过 CSS 将背景应用于元素，并且该背景不会被视为图像的一部分，例如，当通过 获取内容时toDataURL()。
Here are the contents of the example, for Stack Overflow posterity:
以下是示例的内容，适用于 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>
回答by user1325775
You can give the background image in css :
您可以在 css 中提供背景图像：
#canvas { background:url(example.jpg) }
it will show you canvas back ground image
它将向您显示画布背景图像
回答by oberhamsi
You can draw the image on the canvas and let the user draw on top of that.
您可以在画布上绘制图像，然后让用户在其上绘制。
The drawImage()function will help you with that, see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images
该drawImage()功能将为您提供帮助，请参阅https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images
回答by Raza
You can use this plugin, but for printing purpose i have added some code like
<button onclick="window.print();">Print</button>and for saving image <button onclick="savePhoto();">Save Picture</button>
您可以使用此插件，但出于打印目的，我添加了一些代码，例如
<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;}
checkout this plugin http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app
结帐这个插件 http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app
