开发者社区> 铁锚> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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的互相转换比你想象的还要容易,以后我将向你演示不同的图像处理技术,相信在未来你肯定能用这些技术赚到大钱。


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

相关文章
canvas还能这么用?🤨 图片压缩70% | base64转换原理
canvas还能这么用?🤨 图片压缩70% | base64转换原理
0 0
【事件图像】RGB Image conversion to event Image
【事件图像】RGB Image conversion to event Image
0 0
Day26 - Canvas 与 SVG的区别
Day26 - Canvas 与 SVG的区别
0 0
通过canvas转换颜色为RGBA格式及性能问题
通过canvas转换颜色为RGBA格式及性能问题
0 0
一篇文章带你了解SVG 转换知识
一篇文章带你了解SVG 转换知识
0 0
用canvas把图片转为base64代码
最近接到一个需求,其中需要把网络图片的链接转换为base64的地址。 其中,用canvas可以很方便的实现这个要求。 ``` js let basePath //图片base64地址 let $img = new Image() $img.onload = () => { let canvas = document.createElement('canvas') ca
3901 0
image的srcset属性
介绍 响应式页面中经常用到根据屏幕密度设置不同的图片。这个时候肯定会用到image标签的srcset属性。srcset属性用于设置不同屏幕密度下,image自动加载不同的图片。
616 0
Canvas与Image互相转换
在上周的Mozilla Web开发 会议,最后我们花了大半天的时间讨论未来的Mozilla市场应用。Instagram是近期最火爆的移动应用,以10亿美元的天价卖给了FaceBook。我不介意赚取一些外快,所以我决定创建一个Instagram样式的应用(以后将会分享出来)本文向您展示怎样转换Image为canvas,以及canvas如何提取出一个Image。
522 0
+关注
铁锚
Java与数据库开发
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载