开发者社区> 铁锚> 正文

Canvas与Image互相转换

简介: JS Canvas与Image互相转换 原文地址: JavaScript Canvas Image Conversion 原文演示: JavaScript Canvas Image Conversion Demo 原文日期:2012年05月08日翻译日期:2013年08月09日 在上周的Mozilla Web开发 会议,最后我们花了大半天的时间讨论未来的Mozilla市场应用。
+关注继续查看
JS Canvas与Image互相转换
原文地址: JavaScript Canvas Image Conversion
原文演示: JavaScript Canvas Image Conversion Demo

原文日期:2012年05月08日

翻译日期:2013年08月09日


在上周的Mozilla Web开发 会议,最后我们花了大半天的时间讨论未来的Mozilla市场应用。Instagram是近期最火爆的移动应用,以10亿美元的天价卖给了FaceBook。
我不介意赚取一些外快,所以我决定创建一个Instagram样式的应用(以后将会分享出来)
本文向您展示怎样转换Image为canvas,以及canvas如何提取出一个Image。

转换 Image为 Canvas
要把图片转换为Canvas(画板,画布),可以使用canvas元素 context 的drawImage方法:

// 把image 转换为 canvas对象
function convertImageToCanvas(image) {
	// 创建canvas DOM元素,并设置其宽高和图片一样 
	var canvas = document.createElement("canvas");
	canvas.width = image.width;
	canvas.height = image.height;
	// 坐标(0,0) 表示从此处开始绘制,相当于偏移。
	canvas.getContext("2d").drawImage(image, 0, 0);

	return canvas;
}


转换  Canvas 为 Image
假设图像已经在canvas上处理好,那么可以使用以下方法,把canvas转变为图片Image对象。
// 从 canvas 提取图片 image
function convertCanvasToImage(canvas) {
	//新Image对象,可以理解为DOM
	var image = new Image();
	// canvas.toDataURL 返回的是一串Base64编码的URL,当然,浏览器自己肯定支持
	// 指定格式 PNG
	image.src = canvas.toDataURL("image/png");
	return image;
}

额!图像image和canvas的互相转换比你想象的还要容易,以后我将向你演示不同的图像处理技术,相信在未来你肯定能用这些技术赚到大钱。


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
基于Python的mysql与excel互相转换
1.mysql转为excel getConn函数获取mysql连接,第1个参数database为要连接的数据库。 mysql2excel函数完成主要转换功能,第1个参数database为要连接的数据库,第2个参数为要转换的数据表,第3个参数为要保存的excel文件名。
1641 0
Gson把Java POJO和Json数据字符串之间相互转换
Gson把Java POJO和Json数据字符串之间相互转换 例如: POJO pojo = new POJO(); pojo.
1272 0
【值转换器】 WPF中Image数据绑定Icon对象
原文:【值转换器】 WPF中Image数据绑定Icon对象        这是原来的代码:                这里的MenuIcon是string类型,MenuIcon = "/Image/Tux.ico"。
717 0
GDI+ Bitmap与WPF BitmapImage的相互转换
原文:GDI+ Bitmap与WPF BitmapImage的相互转换 using System.Windows.Interop; //.
761 0
Halcon数据类型转换系列(1)图像image、区域region和轮廓xld的相互转换(★firecat推荐★)
Halcon数据类型转换系列(1)图像image、区域region和轮廓xld的相互转换(★firecat推荐★)
99 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
25231 0
C#接口(interface)与类(class)的实例互相转换深度解析
接口就是类(事物)的标准,它规定了类(事物)的方法和属性.一个类(事物)要实现一个接口的话,就必须实现它里面的方法和属性.单一类(事物)我们就可以这样简单的理解,对于多个类(事物),接口不仅为这些类(事物)提供一个标准,而且还为他们之间的关系进行了约束,相当于契约。
719 0
+关注
铁锚
Java与数据库开发
271
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载