文档章节

Canvas与Image互相转换

豆花饭烧土豆
 豆花饭烧土豆
发布于 2016/04/13 08:55
字数 405
阅读 29
收藏 2

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

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


本文转载自:http://blog.csdn.net/renfufei/article/details/9855519

豆花饭烧土豆

豆花饭烧土豆

粉丝 15
博文 357
码字总数 93591
作品 0
深圳
私信 提问
DataURL与File,Blob,canvas对象之间的互相转换的Javascript

canvas转换为dataURL (从canvas获取dataURL) var dataurl = canvas.toDataURL('image/png');var dataurl2 = canvas.toDataURL('image/jpeg', 0.8);12 File对象转换为dataURL、Blob对象转换为......

豆花饭烧土豆
2016/04/13
179
0
jquery实现微信长按识别二维码

1.引入JS库 2.在页面创建一个空的div; 3.生成二维码 注意:这个时候生成的二维码在微信中长安没任何反应,因为qrcode生成的是canvas标签而不是img标签 4.将canvas标签转换为img标签 注意:完...

ht896632
2016/08/24
7.9K
12
DataURL, Blob, File, Image之间的关系与转换

使用前景: 移动端上传拍照图片太大,使用canvas压缩后base64=>blob二进制表单文件=>ajax-POST上传

xmqywx
2018/10/10
359
0
绘制SVG内容到Canvas的HTML5应用

SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接绘制在Canvas上的功能,使得两者可以完美的融合在一起,...

xhload3d
2015/02/01
4.7K
0
初探JavaScript的截屏实现

最近参与了网易炉石盒子的相关页面开发,在做卡组分享页(地址:炉石盒子卡组分享),有个需求:用户可以把这个卡组以图片的形式分享给好友。最初的的做法是使用服务器把该页面转换成图片,然...

xsster
2017/07/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mars-config 动态配置管理

mars-config 码云地址:https://gitee.com/fashionbrot/mars-config 介绍 spring mvc 、springboot 动态配置系统。http 轮训方式 更新 动态配置 软件架构 软件架构说明 后端使用技术 :sprin...

fashionbrot
15分钟前
7
0
女朋友玩吃鸡手游被开挂老哥骗炮,我见义勇为将骗子绳之以法

大家好,我是乔哥。 晚上10点以后下班后我回到自如出租房里面,开始处理公众号粉丝发来的消息,一条一条处理,突然看到了这么几条消息,吸引了我的眼球: 然后我就和这位女粉丝小红(化名)聊...

gzc426
20分钟前
2
0
两款软件

fadetop保护眼睛软件 Snipaste截图软件

伟大源于勇敢的开始
47分钟前
6
0
06.全局锁和表锁

根据加锁的范围,MySQL里面的锁大致可以分成全局锁、表级锁和行锁三类。 全局锁 全局锁就是对整个数据库实例加锁。MySQL提供了一个加全局读锁的方法,命令是flush tables with read lock(FTW...

scgaopan
今天
7
0
图解安装CentOS8

最近正式发布了CentOS8!迫不及待地准备下载了CentOS8镜像,准备体验下,工作繁忙无暇理会。 今天抽空安装体验下~ 可从CentOS官网下载:https://centos.org/download/ 为了快速可以选择从国...

技术训练营
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部