如何將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圖像

回答

相關問題