Canvas与Image互相转换示例代码


Posted in HTML / CSS onAugust 09, 2013

JS Canvas与Image互相转换
原文演示: JavaScript Canvas Image Conversion Demo
在上周的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的互相转换比你想象的还要容易,以后我将向你演示不同的图像处理技术,相信在未来你肯定能用这些技术赚到大钱。
HTML / CSS 相关文章推荐
CSS3教程:background-clip和background-origin
Oct 17 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
Mar 05 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
Mar 26 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
HTML5 embed标签定义和用法详解
May 09 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
css样式important规则的正确使用方式
Jun 10 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 #HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 #HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 #HTML / CSS
HTML5 placeholder(空白提示)属性介绍
Aug 07 #HTML / CSS
5个你不知道的HTML5的接口介绍
Aug 07 #HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 #HTML / CSS
使用HTML5拍照示例代码
Aug 06 #HTML / CSS
You might like
php sybase_fetch_array使用方法
2014/04/15 PHP
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
php实现无限级分类
2014/12/24 PHP
JQuery开发的数独游戏代码
2010/10/29 Javascript
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
js实现聊天对话框
2020/02/08 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
PyQt 线程类 QThread使用详解
2017/07/16 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
python把1变成01的步骤总结
2019/02/27 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
python频繁写入文件时提速的方法
2019/06/26 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
python中_del_还原数据的方法
2020/12/09 Python
Paradox London官方网站:英国新娘鞋婚礼鞋品牌
2019/08/29 全球购物
项目经理岗位职责
2013/11/11 职场文书
大学旷课检讨书
2014/01/28 职场文书
小学校园活动策划
2014/01/30 职场文书
医学生毕业自我鉴定
2014/03/26 职场文书
保护黄河倡议书
2014/05/16 职场文书
高一军训的心得体会
2014/09/01 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
教师培训简讯
2015/07/20 职场文书
关于幸福的感言
2015/08/03 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis