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

运行效果如下：

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

相关推荐：

关于HTML5 Canvas的事件处理

AngularJS结合canvas画图的实现

以上就是借助toDataURL实现将HTML5 Canvas的内容保存为图片的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！