主要思想是借助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. Apache shiro之身份验证(登陆)流程

    从张开涛blog学习后整理:http://jinnianshilongnian.iteye.com/blog/2018398 上图中的类和接口都可以继承和实现来个性化自己的实现. 其中重点看一下Mod ...

  2. __getattribute__()、__getattr__()、__setattr__()、__delattr__()

    访问顺序: 实例的__getattribute__().Descriptor的__get__().实例的__dict__.只读Descriptor的__get__().实例的__getattr__() ...

  3. The model backing the <Database> context has changed since the database was created.

    Just found out the answer and thought of updating here. Just need to do the following. public class ...

  4. [原]常用sqlserver数据库使用sql语句

    1.表结构文档生成查询语句: SELECT 架构名 Then s.[name] Else '' End, 表名 Then D.name Else '' End, 表说明 Then isnull(F.v ...

  5. React Native 重新建项目遇到的一些问题

    1.基本上一句话,就是本地的node太旧了,跟不上React_Native的节奏,所以需要更新node,但是单纯的更新node丫丫竟然不让我跟,因为是用Homebrew来管理的,所以先update了下 ...

  6. Windows Phone 支持中国移动官方支付

    今天在这里与大家分享一个好消息,Windows Phone 官方支付支持中国移动(MO Payment),在此之前无论是 Windows Phone 的用户还是开发者,都知道在Windows Phon ...

  7. (转)使用Custom Draw实现ListCtrl的重绘

    使用Custom Draw实现ListCtrl的重绘   common control 4.7版本介绍了一个新的特性叫做Custom Draw,这个名字显得模糊不清,让人有点摸不着头脑,而且MSDN里 ...

  8. Qt实现FlatUI样式(开源)

    对于现在做前端开发人员来说,FlatUI肯定不陌生,最近几年扁平化的设计越来越流行,大概由于现在PC端和移动端的设备的分辨率越来越高,扁平化反而看起来更让人愉悦,而通过渐变色产生的质感色彩反而没有扁平 ...

  9. drupal7 Views Bulk Operations (VBO)

    介绍 drupal通常用views制作列表,列表也应该能实现某些操作,例如删除.审批等,并且应该是批量进行的,VBO的存在就是为了实现views批量操作功能.事实上,drupal把操作统称为actio ...

  10. 用CSS让未知高度内容垂直方向居中

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...