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的column-fill属性对齐列内容高度的用法详解
Jul 01 HTML / CSS
总结30个CSS3选择器
Apr 13 HTML / CSS
HTML5实现视频直播功能思路详解
Nov 16 HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
Jul 19 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
使用CSS定位HTML元素的实现方法
Jul 07 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
Yii框架中memcache用法实例
2014/12/03 PHP
php 批量查询搜狗sogou代码分享
2015/05/17 PHP
php发送邮件的问题详解
2015/06/22 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
使用js实现数据格式化
2014/12/03 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
flask中主动抛出异常及统一异常处理代码示例
2018/01/18 Python
Python持续监听文件变化代码实例
2020/07/22 Python
详解Flask前后端分离项目案例
2020/07/24 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
英国计算机商店:Technextday
2019/12/28 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
高中生学习生活的自我评价
2013/11/27 职场文书
11月升旗仪式讲话稿
2014/02/15 职场文书
大学四年个人自我小结
2014/03/05 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers