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的內容保存為圖片的詳細內容，其它編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。