如何将HTML5画布的背景图像设置为.png图像

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

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

来源

2011-03-09 Farzad Towhidi

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

的drawImage()功能会帮你，看https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

来源

2011-03-09 09:31:41 oberhamsi

这要求用户记录在空白画布的用户的绘图命令和“重播”他们以提取backgroundless结果。最简单的方法就是不要首先绘制背景图像，以便您可以毫无问题地提取结果。 – Phrogz 2011-03-09 21:01:57

的确如此。我不知何故错过了他的问题的最后一句话，或者他添加了吗？ – oberhamsi 2011-03-29 13:31:28

如this example所示，你可以通过CSS应用背景的canvas元素，这样的背景下将不被考虑部分图像，例如当通过toDataURL()获取内容时。

下面是该示例的内容，堆栈溢出后人：

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

来源

2011-03-09 15:55:06 Phrogz

有没有办法让CSS背景被认为是**图像的一部分**？我试图帮助这个[同胞溢出]（http://stackoverflow.com/a/21835070/607874） – 2014-02-18 20:40:12

@JoseRuiSantos不，不是通过CSS。你需要把'drawImage（）'放到画布上，以便它成为它的一部分。 – Phrogz 2014-02-18 21:38:18

那就是我的想法。正如你在链接中看到的那样，我正在处理运行时生成的内容“-moz-element”，所以恐怕没有办法“获得”这个图像。无论如何，感谢您的帮助。 – 2014-02-19 05:22:50

你可以给背景图像在CSS：

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

它会告诉你帆布回地面图像

来源

2012-08-28 07:27:56 user1325775

你可以使用这个插件，但为了打印的目的，我添加了一些代码，如 <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

来源

2013-06-12 07:43:12 Raza

如何将HTML5画布的背景图像设置为.png图像

回答

相关问题