借助toDataURL實(shí)現(xiàn)將HTML5Canvas的內(nèi)容保存為圖片

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 15:05:09

借助toDataURL實(shí)現(xiàn)將HTML5Canvas的內(nèi)容保存為圖片

借助toDataURL實(shí)現(xiàn)將HTML5Canvas的內(nèi)容保存為圖片:將HTML5 Canvas的內(nèi)容保存為圖片主要思想是借助Canvas自己的API - toDataURL()來(lái)實(shí)現(xiàn)，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助主要思想是借助Canvas自己的API - toDataURL()來(lái)實(shí)現(xiàn)，整個(gè)實(shí)現(xiàn) HTML + JavaScript的代碼

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀借助toDataURL實(shí)現(xiàn)將HTML5Canvas的內(nèi)容保存為圖片:將HTML5 Canvas的內(nèi)容保存為圖片主要思想是借助Canvas自己的API - toDataURL()來(lái)實(shí)現(xiàn)，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助主要思想是借助Canvas自己的API - toDataURL()來(lái)實(shí)現(xiàn)，整個(gè)實(shí)現(xiàn) HTML + JavaScript的代碼

將HTML5 Canvas的內(nèi)容保存為圖片主要思想是借助Canvas自己的API - toDataURL()來(lái)實(shí)現(xiàn)，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助主要思想是借助Canvas自己的API - toDataURL()來(lái)實(shí)現(xiàn)，整個(gè)實(shí)現(xiàn)
HTML + JavaScript的代碼很簡(jiǎn)單。

<html> 
<meta http-equiv="X-UA-Compatible" content="chrome=1"> 
<head> 
<script> 
window.onload = function() { 
draw(); 
var saveButton = document.getElementById("saveImageBtn"); 
bindButtonEvent(saveButton, "click", saveImageInfo); 
var dlButton = document.getElementById("downloadImageBtn"); 
bindButtonEvent(dlButton, "click", saveAsLocalImage); 
}; 
function draw(){ 
var canvas = document.getElementById("thecanvas"); 
var ctx = canvas.getContext("2d"); 
ctx.fillStyle = "rgba(125, 46, 138, 0.5)"; 
ctx.fillRect(25,25,100,100); 
ctx.fillStyle = "rgba( 0, 146, 38, 0.5)"; 
ctx.fillRect(58, 74, 125, 100); 
ctx.fillStyle = "rgba( 0, 0, 0, 1)"; // black color 
ctx.fillText("Gloomyfish - Demo", 50, 50); 
} 
function bindButtonEvent(element, type, handler) 
{ 
if(element.addEventListener) { 
element.addEventListener(type, handler, false); 
} else { 
element.attachEvent('on'+type, handler); 
} 
} 
function saveImageInfo () 
{ 
var mycanvas = document.getElementById("thecanvas"); 
var image = mycanvas.toDataURL("image/png"); 
var w=window.open('about:blank','image from canvas'); 
w.document.write("<img src='"+image+"' alt='from canvas'/>"); 
} 
function saveAsLocalImage () { 
var myCanvas = document.getElementById("thecanvas"); 
// here is the most important part because if you dont replace you will get a DOM 18 exception. 
// var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream;Content-Disposition: attachment;filename=foobar.png"); 
var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
window.location.href=image; // it will save locally 
} 
</script> 
</head> 
<body bgcolor="#E6E6FA"> 
<p> 
<canvas width=200 height=200 id="thecanvas"></canvas> 
<button id="saveImageBtn">Save Image</button> 
<button id="downloadImageBtn">Download Image</button> 
</p> 
</body> 
</html>

運(yùn)行效果如下：

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

借助toDataURL實(shí)現(xiàn)將HTML5Canvas的內(nèi)容保存為圖片

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：借助實(shí)現(xiàn) html

熱門(mén)焦點(diǎn)

借助toDataURL實(shí)現(xiàn)將HTML5Canvas的內(nèi)容保存為圖片

借助toDataURL實(shí)現(xiàn)將HTML5Canvas的內(nèi)容保存為圖片

借助toDataURL實(shí)現(xiàn)將HTML5Canvas的內(nèi)容保存為圖片

最新推薦

猜你喜歡

熱門(mén)推薦