生活随笔
收集整理的這篇文章主要介紹了
将HTML5 Canvas的内容保存为图片
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
主要思想是借助Canvas自己的API - toDataURL()來實(shí)現(xiàn)，整個(gè)實(shí)現(xiàn)
HTML + JavaScript的代碼很簡單。
[html]?view plaincopy
<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">?? ????<div>?? ????????<canvas?width=200?height=200?id="thecanvas"></canvas>?? ????????<button?id="saveImageBtn">Save?Image</button>?? ????????<button?id="downloadImageBtn">Download?Image</button>?? ????</div>?? </body>?? </html>??
運(yùn)行效果如下：
總結(jié)
以上是生活随笔為你收集整理的将HTML5 Canvas的内容保存为图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
