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

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

</body>

</html>

. 关于toDataURL(type, ratio)函数，参数type在image/png，image/jpeg,image/svg+xml等 MIME类型中选择（可以不填，默认是image/png）。如果是type = “image/jpeg”，可以有第二个参数，如果第二个参数ratio的值在0-1之间，则表示JPEG的质量等级，否则使用浏览器内置默认质量等级。

将HTML5 Canvas的内容保存为图片借助toDataURL实现的更多相关文章

  1. 将HTML5 Canvas的内容保存为图片

    主要思想是借助Canvas自己的API - toDataURL()来实现,整个实现 HTML + JavaScript的代码很简单. 代码如下: <html> <meta http- ...

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

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

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

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

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

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

  5. Canvas引入跨域的图片导致toDataURL()报错的问题的解决

    本文介绍了Canvas引入跨域的图片导致toDataURL()报错的问题的解决,分享给大家,具体如下: [场景] 用户打开网页,则请求腾讯COS(图片服务器)上的图片js代码.使用canvas绘图. ...

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

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

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

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

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

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

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

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

随机推荐

  1. 用clip剪裁实现半圆

    定义和用法 clip 属性剪裁绝对定位元素. 说明 这个属性用于定义一个剪裁矩形.对于一个绝对定义元素,在这个矩形内的内容才可见.出了这个剪裁区域的内容会根据 overflow 的值来处理.剪裁区域可 ...

  2. iOS开发-定制多样式二维码

    iOS开发-定制多样式二维码   二维码/条形码是按照某种特定的几何图形按一定规律在平台(一维/二维方向上)分布的黑白相间的图形纪录符号信息.使用若干个与二进制对应的几何形体来表示文字数值信息. 最常 ...

  3. HTML中忽略的小问题

    1.padding和margin 例子 1 padding:10px 5px 15px 20px;(上,右,下,左) 上内边距是 10px 右内边距是 5px 下内边距是 15px 左内边距是 20p ...

  4. java设计模式。。。转载

    maowang I am a slow walker,but I never walk backwards! 博客园 首页 新随笔 联系 订阅 管理 随笔 - 125  文章 - 0  评论 - 12 ...

  5. Oracle TDE的数据加密示例并用logminer验证加密效果

    1.确认数据库版本 2创建密钥钱包 3创建加密列的表并初始值 4演示TDE的数据加密示例 5 logminer验证加密效果

  6. java动态编译类文件并加载到内存中

    如果你想在动态编译并加载了class后,能够用hibernate的数据访问接口以面向对象的方式来操作该class类,请参考这篇博文-http://www.cnblogs.com/anai/p/4270 ...

  7. iOS9 HTTP传输安全

    1.在Info.plist中添加 NSAppTransportSecurity 类型  Dictionary 2.在 NSAppTransportSecurity 下添加 NSAllowsArbitr ...

  8. MyEclipse安装lombok

    1. 将lombok.jar复制到myeclipse.ini所在的文件夹 2. 打开myeclipse.ini,插入以下两行: -Xbootclasspath/a:lombok.jar-javaage ...

  9. BizTalk动手实验（十四）AS2传输非EDI消息

    1 课程简介 本课程通过AS2协议完成XML文件的传输过程,传输之后同步接收MDN确认信息.通过本课程熟悉AS2传输解决方案的基本开发与配置方法. 2 准备工作 为了模拟实际的B2B交互过程,本实验需 ...

  10. DOM模型有三种

    <!-- DOM模型有三种: DOM level 1:将HTML文档封装成对象. DOM level 2:在level 1基础加入新功能,比如解析名称空间. //<html xmlns=& ...