借助toDataURL实现将HTML5 Canvas的内容保存为图片

 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  canvas width=200 height=200 id= thecanvas /canvas  button id= saveImageBtn Save Image /button  button id= downloadImageBtn Download Image /button  /body  /html 

运行效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP ！

相关推荐：

关于HTML5 Canvas的事件处理

angularJS结合canvas画图的实现

以上就是借助toDataURL实现将HTML5 Canvas的内容保存为图片的详细内容，其它编程语言

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。