将HTML5 Canvas的内容保存为图片

主要思想是借助Canvas自己的API - toDataURL()来实现，整个实现

HTML + JavaScript的代码很简单。

[html] view plain copy

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

运行效果如下：

from: http://blog.csdn.net/jia20003/article/details/8948005

时间： 2024-10-12 19:20:36

将HTML5 Canvas的内容保存为图片的相关文章

将HTML5 Canvas的内容保存为图片借助toDataURL实现

将HTML5 Canvas的内容保存为图片主要思想是借助Canvas自己的API - toDataURL()来实现,具体实现如下,感兴趣的朋友可以参考下哈,希望对你有所帮助主要思想是借助Canvas自己的API - toDataURL()来实现,整个实现 HTML + JavaScript的代码很简单. <html> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <

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

Bitmap bm = Bitmap.createBitmap(320, 480, Config.ARGB_8888); Canvas canvas = new Canvas(bm); Paint p = new Paint(); canvas.drawRect(50, 50, 200, 200, p); canvas.save(Canvas.ALL_SAVE_FLAG ); canvas.restore(); File f = new File("/sdcard/0.png"); F

将Canvas画布内容保存为jpg格式图片

/// <summary> /// 功能:将Canvas画布内容保存为jpg格式图片 /// 作者:GYS | 日期:2013年9月9日 /// </summary> /// <param name="filePath"></param> /// <param name="pixBox"></param> pri

Delphi RichEdit的内容保存为图片

uses RichEdit; {将RichEdit1的内容保存为图片,此函数也适合于RxRichEdit,即RichEdit: TRxRichEdit}procedure RichEditToCanvas(RichEdit: TRichEdit; Canvas: TCanvas; PixelsPerInch: Integer);varImageCanvas: TCanvas;fmt: TFormatRange;beginImageCanvas := Canvas;with fmt dobegin

android画图板，可将内容保存为图片

画图板,可通过直线或填充的方式进行绘画,可以设置画笔的颜色,粗细,并能够将绘制的内容保存为jpg文件(保存位置为sdcard/huaban) 下载地址: http://www.dwz.cn/zbOoL

将页面内容保存为图片显示，长按保存至本地（html2canvas）

加载的html2canvas为官网上的新版本. style样式: *{ margin: 0;padding: 0; font-family: "微软雅黑"; } html,body{ width: 100%; } #capture,#imgDiv{ width: 100%; } .imgDiv_img{ width: 100%; } html: <div id="capture" style="padding: 10px; background: #

将canvas的内容转成图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

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

上周我们花了半天时间开发下一个准备放进Mozilla Marketplace的应用.有一个应用现在非常的火热,那就是Instagram,Facebook花了100万美元收购了它.我们也想有100万美元装到口袋里,我决定开发一个Instagram风格的应用,这篇文章了我将介绍一下如何将一张图片拷贝到canvas里,以及反过来,如何将画布内容保存成图片格式. 使用JavaScript将图片拷贝进画布要想将图片放入画布里,我们使用canvas元素的drawImage方法: // Converts i

1.关于QT中的Graphics绘图，定时器，动画，将窗口中的内容打印到图片上，打印机，打印预览

1 新建项目 A 修改pro中的内容如下: HEADERS += \ MyWidget.h SOURCES += \ MyWidget.cpp QT += gui widgets printsupport B 编写MyWidget.h #ifndef MYWIDGET_H #define MYWIDGET_H #include <QWidget> #include <QGraphicsScene> #include <QGraphicsLineItem>