zoukankan      html  css  js  c++  java

  • 将HTML5 Canvas的内容保存为图片

    将HTML5 Canvas的内容保存为图片

    2013-05-19 21:44 46497人阅读 评论(13) 收藏 举报
     分类：

    版权声明：本文为博主原创文章，未经博主允许不得转载。

    主要思想是借助Canvas自己的API - toDataURL()来实现，整个实现

    HTML + JavaScript的代码很简单。

    [html] view plain copy
     
    1. <html>  
    2. <meta http-equiv="X-UA-Compatible" content="chrome=1">  
    3. <head>  
    4. <script>  
    5.         window.onload = function() {  
    6.             draw();  
    7.             var saveButton = document.getElementById("saveImageBtn");  
    8.             bindButtonEvent(saveButton, "click", saveImageInfo);  
    9.             var dlButton = document.getElementById("downloadImageBtn");  
    10.             bindButtonEvent(dlButton, "click", saveAsLocalImage);  
    11.         };  
    12.             function draw(){  
    13.                 var canvas = document.getElementById("thecanvas");  
    14.                 var ctx = canvas.getContext("2d");  
    15.                 ctx.fillStyle = "rgba(125, 46, 138, 0.5)";  
    16.                 ctx.fillRect(25,25,100,100);   
    17.                 ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";  
    18.                 ctx.fillRect(58, 74, 125, 100);  
    19.                 ctx.fillStyle = "rgba( 0, 0, 0, 1)"; // black color  
    20.                 ctx.fillText("Gloomyfish - Demo", 50, 50);  
    21.             }  
    22.               
    23.             function bindButtonEvent(element, type, handler)  
    24.             {  
    25.                    if(element.addEventListener) {  
    26.                       element.addEventListener(type, handler, false);  
    27.                    } else {  
    28.                       element.attachEvent('on'+type, handler);  
    29.                    }  
    30.             }  
    31.               
    32.             function saveImageInfo ()   
    33.             {  
    34.                 var mycanvas = document.getElementById("thecanvas");  
    35.                 var image    = mycanvas.toDataURL("image/png");  
    36.                 var w=window.open('about:blank','image from canvas');  
    37.                 w.document.write("<img src='"+image+"' alt='from canvas'/>");  
    38.             }  
    39.   
    40.             function saveAsLocalImage () {  
    41.                 var myCanvas = document.getElementById("thecanvas");  
    42.                 // here is the most important part because if you dont replace you will get a DOM 18 exception.  
    43.                 // var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream;Content-Disposition: attachment;filename=foobar.png");  
    44.                 var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");   
    45.                 window.location.href=image; // it will save locally  
    46.             }  
    47.         </script>  
    48. </head>  
    49. <body bgcolor="#E6E6FA">  
    50.     <div>  
    51.         <canvas width=200 height=200 id="thecanvas"></canvas>  
    52.         <button id="saveImageBtn">Save Image</button>  
    53.         <button id="downloadImageBtn">Download Image</button>  
    54.     </div>  
    55. </body>  
    56. </html>  

    运行效果如下：


     
    顶
    3
    踩
  • 相关阅读:
    ES分页
    在github上使用workflow构建docker镜像并推送阿里云
    xxl-job滥用netty导致的问题和解决方案
    使用netty实现socks5协议
    docker日志设置
    关于我
    友情链接
    分布式任务调度系统：xxl-job
    SpringBoot自定义配置以及IDEA配置提示
    frp穿透内网使用vsftpd服务
  • 原文地址：https://www.cnblogs.com/developer-ios/p/6323412.html
Copyright © 2011-2022 走看看