HTML + JavaScript的代码很简单。
<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>
运行效果如下:
原文地址:https://www.jb51.cc/html5/1200193.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。