您的位置 首页 javascript教程

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

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

使用JavaScript将图片拷贝进画布

要想将图片放入画布里,我们使用canvas元素的drawImage方法:

// Converts image to canvas; returns new canvas elementfunction convertImageToCanvas(image) {	var canvas = document.createElement("canvas");	canvas.width = image.width;	canvas.height = image.height;	canvas.getContext("2d").drawImage(image, 0, 0);	return canvas;}

这里的0, 0参数画布上的坐标点,图片将会拷贝到这个地方。

用JavaScript将画布保持成图片格式

如果你的画布上的作品已经完成,你可以用下面简单的方法将canvas数据转换成图片格式:

// Converts canvas to an imagefunction convertCanvasToImage(canvas) {	var image = new Image();	image.src = canvas.toDataURL("image/png");	return image;}

这段代码就能神奇的将canvas转变成PNG格式!

这些在图片和画布之间转换的技术可能比你想象的要简单的多。在以后的文章里,我会写一些将这些图片做不同滤镜处理的技术。

推荐教程:《javascript视频教程》

以上就是用JavaScript将Canvas内容转化成图片的方法详解的详细内容,更多请关注php中文网其它相关文章!

文章来源:火云技术网

文章标题:用JavaScript将Canvas内容转化成图片的方法详解

文章地址:https://www.pyhw.net/30885_%e7%94%a8javascript%e5%b0%86canvas%e5%86%85%e5%ae%b9%e8%bd%ac%e5%8c%96%e6%88%90%e5%9b%be%e7%89%87%e7%9a%84%e6%96%b9%e6%b3%95%e8%af%a6%e8%a7%a3-2.html

关于作者: 火云技术网

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图