将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. Curl参数一览

    * 目录 1. 介绍 2. curl扩展的安装 3. curl_init 4. curl_setopt 5. curl_exec 6. curl_close 7. curl_version * 介绍 ...

  2. Spark Kill Application

    yarn application -kill <applicationId>

  3. js 数组排序

    sort()方法使数组中的元素按照一定的顺序排列. 语法: arrayObject.sort(方法函数) 参数说明: 1.如果不指定<方法函数>,则按unicode码顺序排列. 2.如果指 ...

  4. 2016huasacm暑假集训训练三 C - Til the Cows Come Home

    题目链接:http://acm.hust.edu.cn/vjudge/contest/123674#problem/C N题目大意是有n个点,然后给出从a点到b点的距离,a和b是互相可以抵达的,则是无 ...

  5. java读取属性配置文件工具类

    import java.io.IOException; import java.io.InputStream; import java.util.Properties; /** * * 类: ProU ...

  6. 最轻量级的前端Mvc框架backbone

    最轻量级的前端Mvc框架backbone依赖最轻量级的库understore backbone并非将前端再次切分为mvc,而是分为了七大模块,分别是:Events.Model.Collection.R ...

  7. php中英字符串截取

    <?php @header('Content-type: text/html; charset=UTF-8'); function Ctruncate($str = '', $len = 0, ...

  8. loading.gif

  9. 一些asp.net使用

    1.英文格式的日期转为中文格式 eg:string englishDate="03-04-2012"; string chineseDate=Regex.replace(engli ...

  10. Android WebView常见问题及解决方案汇总

    Android WebView常见问题解决方案汇总: 就目前而言,如何应对版本的频繁更新呢,又如何灵活多变地展示我们的界面呢,这又涉及到了web app与native app之间孰优孰劣的争论. 于是 ...