将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. 浅谈iOS视频开发

     浅谈iOS视频开发 这段时间对视频开发进行了一些了解,在这里和大家分享一下我自己觉得学习步骤和资料,希望对那些对视频感兴趣的朋友有些帮助. 一.iOS系统自带播放器 要了解iOS视频开发,首先我们从 ...

  2. Android自定义UI模板

    第一步:自定义xml属性 新建一个android项目,在values文件夹中新建一个atts.xml的文件,在这个xml文件中声明我们一会在使用自定义控件时候需要指明的属性.atts.xml < ...

  3. .net 的 Url 中文加密

    当 Get 的请求参数可能出现中文的时候,那么就需要对其中文进行加密处理: 引用程序集:System.Web 加密方法: HttpUtility.UrlEncode(); 解密方法:HttpUtili ...

  4. 2016huasacm暑假集训训练三 B-Frogger

    题目链接:http://acm.hust.edu.cn/vjudge/contest/123674#problem/B 题意:一只青蛙在湖中一颗石头上, 它想去有另一只青蛙的石头上,但是 湖里的水很脏 ...

  5. NeuSoft(4)编写字符设备驱动

    1.要求:实现简单的字符设备驱动程序 2.源码清单 #include <linux/module.h> #include <linux/types.h> #include &l ...

  6. tomcat启动闪退

    TOMCAT启动时报错:the CATALINA_HOME environment variable is not defined correctly 运行tomcat/bin目录下的startup. ...

  7. 关于WPF中ItemsControl系列控件中Item不能继承父级的DataContext的解决办法

    WPF中所有的集合类控件,子项都不能继承父级的DataContext,需要手动将绑定的数据源指向到父级控件才可以. <DataGridTemplateColumn Header="操作 ...

  8. Bootstrap css栅格 + 网页中插入代码+css表格

    设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang= ...

  9. Linux vi编辑器的基本命令

    vi编辑器的文字说明 模式:命令模式,编辑模式,末行模式. 切换方式:命令模式→i→编辑模式,编辑模式→Esc→命令模式,命令模式→:→末行模式. 功能: 命令模式(Command Mode): 控制 ...

  10. IOS第18天(2,CALayer自定义图层）

    - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...