主要思想是借助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. Android ImageView src与backgroud

    在XML中添加ImageView时,有两个可以设置图片的地方,一个是android:src,一个是android:background,这两个的区别: src是图片内容,显示在前面的,backgrou ...

  2. C# WinForm 技巧十: 开发工具

    一.摘要   为了开发效率就应该为这个框架开发一个配套工具.来生成固定格式的代码.工具界面如下:   二.数据库整理篇   添加表主键 修改表说明 修改表字段说明 生成数据库文档 导出数据库里相同的字 ...

  3. Linux 升级 Python 至 3.x

    https://docs.python.org/3.5/library/json.html 在线手册 (1)下载wget https://www.python.org/ftp/python/3.5.2 ...

  4. ubuntu系统中的VMware 安装win7 Ghost镜像的几个坑

    1.ghost镜像安装时要先分区 2.分区后要激活 3.VM(虚拟机安装win7 提示 :units specified don't exist, SHSUCDX can't install)解决方法 ...

  5. Ubuntu14.04安装中文输入法以及解决Gedit中文乱码问题

    1 设置中文显示环境 1. 打开System Settings 2. 打开Personal-> Language Support. 会弹出如下对话框,提示你“语言支持没安装完整”. 点击“Rem ...

  6. OBS---环境配置之#include <D3DX10.h>报错

    一.先贴错误 因为这个笔记主要记录我如何整好这个OBS源码环境的,给需要的童鞋一个参考 1.1.#include <D3DX10.h>  报错 没有这个 解决方案:把2,3先解决了就水到渠 ...

  7. synchronized关键字，Lock接口以及可重入锁ReentrantLock

    多线程环境下,必须考虑线程同步的问题,这是因为多个线程同时访问变量或者资源时会有线程争用,比如A线程读取了一个变量,B线程也读取了这个变量,然后他们同时对这个变量做了修改,写回到内存中,由于是同时做修 ...

  8. 深入浅出 nginx lua 为什么高性能

    最近很多人问我nginx lua的优势是什么?为什么? 一.同步和异步.阻塞和非阻塞 如果要说清楚这个问题首先要了解:同步和异步.阻塞和非阻塞的关系 同步:php.java的正常代码都是同步执行的 异 ...

  9. Factorization Machine

    Factorization Machine Model 如果仅考虑两个样本间的交互, 则factorization machine的公式为: $\hat{y}(\mathbf{x}):=w_0 + \ ...

  10. Adobe Flash Builder 4.6破解方法

    http://hi.baidu.com/cm186man/blog/item/148658ce557c0323b700c853.html 1.到Adobe官网下载FlashBuilder 4.6,有简 ...