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

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">

     <div>

         <canvas width=200 height=200 id="thecanvas"></canvas>

         <button id="saveImageBtn">Save Image</button>

         <button id="downloadImageBtn">Download Image</button>

     </div><a href=http://www.cnblogs.com/roucheng/">柔城</a>

 </body>

 </html>

http://www.cnblogs.com/roucheng/

将HTML5 Canvas的内容保存为图片的更多相关文章

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

    将HTML5 Canvas的内容保存为图片主要思想是借助Canvas自己的API - toDataURL()来实现,具体实现如下,感兴趣的朋友可以参考下哈,希望对你有所帮助 <html> ...

  2. 如何将Canvas中内容保存为图片

    Bitmap bm = Bitmap.createBitmap(320, 480, Config.ARGB_8888); Canvas canvas = new Canvas(bm); Paint p ...

  3. 将canvas画布内容转化为图片（toDataURL()，创建url）

    将canvas画布内容转化为图片(toDataURL(),创建url) 总结 1.现在的浏览器都支持右键另存为图片的方法来将canvas画布内容转化为图片 2.在代码里面可以通过toDataURL() ...

  4. Delphi RichEdit的内容保存为图片

    uses RichEdit; {将RichEdit1的内容保存为图片,此函数也适合于RxRichEdit,即RichEdit: TRxRichEdit}procedure RichEditToCanv ...

  5. HTML5 Canvas 小例子 旋转的图片

    <一>CSS部分 @charset "utf-8"; *{ padding:; margin:; outline: none; } #canvas{ position: ...

  6. UItableView 所有内容保存为图片

    将所有的UITableView保存为图片,因为UITableView只能保存显示当前,所以,就单个保存后,合并为一张图片 代码如下: -(IBAction)savePic:(id)sender { / ...

  7. 用JavaScript将Canvas内容转化成图片的方法

    上周我们花了半天时间开发下一个准备放进Mozilla Marketplace的应用.有一个应用现在非常的火热,那就是Instagram,Facebook花了100万美元收购了它.我们也想有100万美元 ...

  8. CSharpGL(19)用glReadPixels把渲染的内容保存为PNG图片(C#)

    CSharpGL(19)用glReadPixels把渲染的内容保存为PNG图片(C#) 效果图 本文解决了将OpenGL渲染出来的内容保存到PNG图片的方法. 下载 CSharpGL已在GitHub开 ...

  9. .TextOut文字保存为图片

    //Canvas.TextOut文字保存为图片 //Delphi开发案例精选,使用TextOut在画布上画图procedure TForm1.Button1Click(Sender: TObject) ...

随机推荐

  1. 3.C#中的多重委托

    阅读目录 一:多重委托概述   二:多重委托实例    一:多重委托概述 1.委托的调用其实是一个调用列表,可以同时调用多个不同的方法 2.第1个委托加上第2个委托赋予第3个委托,相当于把两个方法按顺 ...

  2. python use dom to write xml file

    #encoding:utf-8 ''' write xml in dom style ''' from xml.dom.minidom import Document doc = Document() ...

  3. cmd实用命令

    1.netstat 查看电脑端口状况 实际应用举例:查看某软件坚监听的电脑端口. 在任务管理器中选择列...,打开PID的显示.在这里查看某个应用程序的线程ID是多少.例如QQ:4904. 运行,cm ...

  4. sql读取xml

    DECLARE @ItemMessage XML SET @ItemMessage=cast(N'<?xml version="1.0" encoding="utf ...

  5. kail2在虚拟机上的安装

    首先先要安装虚拟机,打开安装包,下一步               选择典型 选择要安装到的目录,点下一步 4 输入密钥,下一步(密钥网上有很多我这边就例举一个,没用的话就自己找.我这个密钥是VM11 ...

  6. 天朝专用- 配置pypi镜像

    使用python者,需要经常安装模块,可是身在天朝.pypi.python.org 站点稳定性相当差,为了很更好的使用pip安装模块. 请使用镜像. mac/linux 环境 在用户当前目录下 如没有 ...

  7. Oracle数据库入门——常用的数据字典

    一.oracle数据字典主要由以下几种视图构成:1.user视图以user_为前缀,用来记录用户对象的信息 2.all视图以all_为前缀,用来记录用户对象的信息及被授权访问的对象信息 3.dba视图 ...

  8. linux 系统运维

    Linux 系统监控1.进程    查看所有进程     ps -ef     ps -ef |grep nginx 结束进程    # 结束进程号为5031    kill -g 5031 # 结束 ...

  9. google全球地址大全

    https://github.com/justjavac/Google-IPs http://www.aol.com/依托于google的一个搜索,通过这个搜索

  10. Frogger（floyd变形）

    Frogger Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit Stat ...