主要思想是借助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. EF Repository Update

    问题描述: 解决办法: http://www.cnblogs.com/scy251147/p/3688844.html 原理: Attaching an entity of type '' faile ...

  2. typeof instanceof 之间的区别总结

        typeof   它返回值是一个字符串,该字符串说明运算数的类型. a=1; b=true; c="c"; d=function(){ console.log(" ...

  3. aspose.cell 设置excel里面的文字是超链接

    目的: 1.通过方法designer.Workbook.Worksheets[0].Hyperlinks.Add("A1", 1, 1, url);给导出到excel里面的数据加上 ...

  4. C++中文件按行读取和逐词读取 backup

    http://blog.csdn.net/zhangchao3322218/article/details/7930857 #include  <iostream>#include  &l ...

  5. UNIX环境高级编程笔记之文件I/O

    一.总结 在写之前,先唠几句,<UNIX环境高级编程>,简称APUE,这本书简直是本神书,像我这种小白,基本上每看完一章都是“哇”这种很吃惊的表情.其实大概三年前,那会大三,我就买了这本书 ...

  6. zeromq 测试总结

    总结 测试项目 github (https://github.com/solq360/jmzq) 非常不稳定 pub/sub 模式 30W压测丢了27W条消息,官方没有给出任何的发送状态供业务层处理 ...

  7. 让我们一起Go（十一）

    前言: 今天又要继续了,当初自己的挖的坑必须得填啊,尽管天气非常滴热,但是丝毫无法阻挡我填坑的热情,那么,我们继续让我们一起Go!!! 定义方法: 这里我们要来看看Golang中的(Methods)方 ...

  8. UIView 与 CALayer

    联系: 1. UIView 有个属性 layer,可以返回它的主 CALayer 实例:CALayer *layer = myView.layer 2. 一个 UIView 可以有多个 CALayer ...

  9. VS2008简体中文正式版序列号-试用到期解决

    VS2008简体中文正式版序列号 VS2008简体中文正式版序列号 1.Visual Studio 2008 Professional Edition:XMQ2Y-4T3V6-XJ48Y-D3K2V- ...

  10. 下载安装与配置 Java JDK 7

    1. 去 Oracle 的官网下载 JDK,我下载的是:jdk-7u25-windows-x64.exe   大小为:90.6M 2. 双击它安装. 3. 安装完后,JDK 配置如下: 01 02 - ...