主要思想是借助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. 【LeetCode】273. Integer to English Words

    Integer to English Words Convert a non-negative integer to its english words representation. Given i ...

  2. 【转】mac/linux终端光标的快捷键操作

    摘自网络:原标题是类似linux/unix命令行终端的光标及字符控制快捷键的东东. 常用的快捷键: Ctrl + d 删除一个字符,相当于通常的Delete键(命令行若无所有字符,则相当于exit:处 ...

  3. Filter之——GZIP全站压缩

    GZIP压缩:将压缩后的文本文件,发送给浏览器,减少流量. 一.进行gzip压缩条件: 1.请求头:Accept-Encoding : gzip  告诉服务器,该浏览器支持gzip压缩. 2.响应头: ...

  4. xml和xsd架构文档相关知识

    1.使用架构(XSD)验证XML文件 2.使用自动生成工具: 工具目录:C:\Program Files (x86)\Microsoft SDKs\Windows\v8.0A\bin\NETFX 4. ...

  5. SQL语句转摘

    http://www.cnblogs.com/Olive116/p/3271706.html 收藏没有用,来收到留链接

  6. jQuery实现菜单点击隐藏（上下左右）

    canrun <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  7. unity自动保存项目

    原文来自于:http://wiki.unity3d.com/index.php?title=AutoSave#C.23_-_AutoSave.cs      (奋斗的菜鸟_1029633680) 很多 ...

  8. cakePHP的controller回调

    1. afterFilter(), executed after all controller logic, including the rendering of the view2. beforeF ...

  9. Visual Studio与Eclipse与IntelliJ快捷键对比

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

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