Canvas图保存成图片或pdf

Canvas画好的图片虽然可以通过toDataURL()转成二进制流的字符串格式,图片稍大一点就无法发送了,当然如果需求简单的话,可以在页面上加一个image元素,将转成的流直接赋给image的src就可以显示图片了。

但是大部分的时候我们还希望弹出保存框,保存图片到我们自己想要的路径下,或者添加一些统计和分析的信息到pdf中一起保存成一个pdf文件,这就需要在后台处理了,两种方式:后台新建一个Web Browser加载当前的页面,然后将获得到的图片流的信息再发送到前台弹出保存的对话框,后台发送到前台是没有字符长度的限制的,不过这种办法就是如果保存成pdf,他是要截图然后放到pdf中,图片太长就截断了;另外一种方式就是将用到的参数传到后台,后台用GDI+在Bitmap上重新画一遍,Canvas能实现的,后台的GDI+同样都能实现,而且有些实现可能更方便一些,这个方法的好处是,没有图片大小的限制。

我最近做得一个项目用的是第二种方法实现的,贴下代码吧:

1、前台代码【点击保存图片按钮】:

        var width = drawObject.getCanvas().width;
	var height = drawObject.getCanvas().height;
	var figures = drawObject.getCurrentFigures();
	$.ajax(
	{
		url: "./WareHousePrintHandler.ashx?action=drawpng&width=" + width + "&height=" + height,
		type: "post",
		data: "datas=" + JSON.stringify(figures),
		success: function (fileName)
		{
			$('#frameImage').attr('src', "./WareHousePrintHandler.ashx?action=getpng&fileName=" + fileName);
		},
		error: function (err)
		{
			alert("Print failed.");
		}
	});

将前台需要画图的信息通过ajax传到后台的一个handler中,handler负责接收参数,并且将画好的图片保存至某个IIS的共享路径下,图片名称返回到前台,前台再用一个大小为0的iframe去通过重新加载页面,通过此图片名称去后台取图片流并弹出保存提示框。

2、iframe的代码

<iframe width="0" height="0" id="frameImage" name="frameImage" frameborder="0" scrolling="no"></iframe>

3、后台代码

if (action.ToString() == "drawpng")
{
	if (context.Request["datas"] == null)
	{
		return;
	}

	double w = double.Parse(context.Request["width"].ToString());
	double h = double.Parse(context.Request["height"].ToString());
	string allFigures = context.Server.UrlDecode(context.Request["datas"].ToString());
	List<DrawModel> figureList = AspSoft.WareHouse.Util.JsonHelper.JsonDeserialize<List<DrawModel>>(allFigures);

	WareHouseDrawing drawing = new WareHouseDrawing();
	string fileName = drawing.GetImageUrl((int)w, (int)h, figureList, filePath);
	context.Response.Write(fileName);
	//ms.WriteTo(Response.OutputStream);
	context.Response.End();
}
else if (action.ToString() == "getpng")
{
	string fileName = context.Request["fileName"].ToString();
	string fullFileName = filePath + "/" + fileName;
	context.Response.AppendHeader("Content-Disposition", string.Format("Attachment; FileName={0}.png;", HttpUtility.UrlEncode(DateTime.Now.ToString("yyyyMMdd_HHmmss"), System.Text.Encoding.UTF8)));
	context.Response.WriteFile(fullFileName);
	context.Response.End();
}

GetImageUrl是具体画的方法,将画好的图片保存到一个共享路径下,必须是IIS能访问的共享路径,不能是本地的路径,第二次请求是获得png,实际是获得png的路径,iframe加载图片的路径后会自动获得图片的流信息,这是浏览器自动处理的,这里关键的是要加上Attachment,要以附件的形式发送。

此方法必须发送两次请求到后来才能完成,因为如果第一次就通过iframe的src方式请求图片,由于只能通过querystring的方式请求,不能传大的数据,因为需要画图的数据量也是比较大,必须先通过ajax请求。PDF的道理同上,就是将bitmap的信息放到PDF中就可以了。

时间: 2024-10-13 08:14:32

Canvas图保存成图片或pdf的相关文章

MindMapper导图如何保存成图片

我们可以将MindMapper思维导图保存为多种格式的文件,具有对多样性,从文档到图片这些我们常用的格式都能够自由转换.下面我们就一起去看看如何如何将MindMapper导图保存为图片. 当我们在MindMapper思维导图中绘制好导图,像要将之保存为图片时,点击[文件]中的保存/发送,然后跳转至文件格式板块中的更改文件格式. 我们可以看到都多种保存为图片的形式,我们一般常用第一项保存为图片文件形式. 点击后会跳出保存文件框,选择保存MindMapper文件的位置,选择好后点击保存,这时系统会跳

批量将网页转换成图片或PDF文档技巧分享

工作中我们有时要将一些批量的网页转换成图片或者PDF文档格式,虽然多数浏览器具有滚动截屏或者打印输出PDF文档功能,但是如果有几十上百张网页需要处理,那也是要人命的.所以我一直想找一款能够批量处理该工作的软件,但基本都是收费的,即便是收费的功能也一般.终于,我找到了wkhtmltopdf这款免费开源软件,最贴合我的工作,由衷感谢软件的作者"Jakob Truelsen"和"Ashish Kulkarni"两位大神!我安装软件后,结合windows的批处理命令,顺利测

如何把Excel中的单元格等对象保存成图片

对于Excel中的很多对象,比如单元格(Cell),图形(shape),图表(chart)等等,有时需要将它们保存成一张图片.就像截图一样. 最近做一个Excel相关的项目,项目中遇到一个很变态的需求, 需要对Excel中的一些对象进行拍图,比如,对一个单元格设置一些颜色之后拍图,或者对一个图表,报表拍成图片.经过比较曲折的经历,终于还是完成了.拿出来分享一下. 要做Excel,首先当然是查看Excel的com对象模型.地址在这里: http://msdn.microsoft.com/en-us

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

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

OpenGL中的深度、深度缓存、深度测试及保存成图片

1.深度 所谓深度,就是在openGL坐标系中,像素点Z坐标距离摄像机的距离.摄像机可能放在坐标系的任何位置,那么,就不能简单的说Z数值越大或越小,就是越靠近摄像机. 2.深度缓冲区 深度缓冲区原理就是把一个距离观察平面(近裁剪面)的深度值(或距离)与窗口中的每个像素相关联.      首先,使用glClear(GL_DEPTH_BUFFER_BIT),把所有像素的深度值设置为最大值(一般是远裁剪面).      然后,在场景中以任意次序绘制所有物体.硬件或者软件所执行的图形计算把每一个绘制表面

OpenGL 绘制效果保存成图片

分享一下我老师大神的人工智能教程吧.零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!http://www.captainbed.net opengl中有一个非常有用的函数:glReadPixels(),可以读取各种缓冲区(深度.颜色,etc)的数值.要将opengl的绘制场景保存成图片,也需要使用这个函数. 一个简单的例子见如下的c程序.按键盘上的“C”键,可以将读取的图像缓冲区数据存储成tmpcolor.txt. #include "windows.h"

android脚步---将layout和其输出一起保存成图片

public void convertViewToBitmap(View view) { //View view = getLayoutInflater().inflate(R.layout.test_layout, null); view.setDrawingCacheEnabled(true); view.measure(MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED), MeasureSpec.makeMeasureSpec(0

InputStream流保存成图片文件

public void saveBit(InputStream inStream) throws IOException{ ByteArrayOutputStream outStream = new ByteArrayOutputStream(); //创建一个Buffer字符串 byte[] buffer = new byte[1024]; //每次读取的字符串长度,如果为-1,代表全部读取完毕 int len = 0; //使用一个输入流从buffer里把数据读取出来 while( (len

php 加载字体 并保存成图片

[php] view plaincopy // Set the content-type header("Content-type: image/png"); // Create the image $im = imagecreatetruecolor(400, 100); // Create some colors $white = imagecolorallocate($im, 255, 255, 255); $grey = imagecolorallocate($im, 128,