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中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
CSS3 滤镜 webkit-filter详细介绍及使用方法
Dec 27 HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
Sep 06 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
Jul 09 HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
Aug 21 HTML / CSS
CSS完成视差滚动效果
Apr 27 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 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分页函数
2006/10/09 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
浅谈PHP进程管理
2019/03/08 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
jQuery对表单的操作代码集合
2011/04/06 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
Python实现从URL地址提取文件名的方法
2015/05/15 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
python中 logging的使用详解
2017/10/25 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
在python中使用nohup命令说明
2020/04/16 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
2014年最新学习全国两会精神心得
2014/03/17 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
村干部群众路线整改措施思想汇报
2014/10/12 职场文书
青岛导游词
2015/02/12 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python