主要思想是可行的Canvas自己的API-toDataURL（）来实现，整个实现HTML+JavaScript的代码很简单。
复制代码
代码如下：
<html><metahttp-equiv=“X-UA-Compatible”content=“chrome=1”><head><script>window.onload=function（）{draw（）;varsaveButton=document.getElementById（“saveImageBtn”）;bindButtonEvent（saveButton，“click”，saveImageInfo）;vardlButton=document.getElementById（“downloadImageBtn”）;bindButtonEvent（dlButton，“click”，saveAsLocalImage）;};函数draw（）{varcanvas=document.getElementById（“thecanvas”）;varctx=canvas.getContext（“2d”）;ctx.fillStyle=“rgba（125，46，138，0.5）”;ctx.fillRect（25,25,100,100）;ctx.fillStyle=“rgba（0，146，
ctx.fillStyle=“rgba（0，0，0，1）”;//黑色ctx.fillText（“Gloomyfish-Demo”，50，50）;}函数bindButtonEvent（element，type，handler）{if（element.addEventListener）{element.addEventListener（type，handler，false）;}else{element.attachEvent（'on'+type，handler）;}}函数saveImageInfo（）{varmycanvas=document.getElementById（“thecanvas”）;varimage=mycanvas.toDataURL（“image/png”）;varw=window.open（'about：blank'，'canvasfromcanvas'）;w.document.write（“<imgsrc='”+image+“'alt='fromcanvas'/>”）;
varmyCanvas=document.getElementById（“thecanvas”）;//这是最重要的部分，因为如果不进行替换，则会出现DOM18异常。//varimage=myCanvas.toDataURL（“image/png”）。replace（“image/png”，“image/octet-stream;Content-Disposition：附件;filename=foobar.png”）;varimage=myCanvas.toDataURL（“image/png”）。replace（“image/png”，“image/octet-stream”）;window.location.href=图片;////将保存在本地}</script></head><bodybgcolor=“＃E6E6FA”><div><canvaswidth=200height=200id=“thecanvas”></canvas><buttonid=“saveImageBtn“>保存图像</button>
</html>
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h60805.shtml
