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

Canvas与Image互相转换

简介: 在上周的Mozilla Web开发 会议,最后我们花了大半天的时间讨论未来的Mozilla市场应用。Instagram是近期最火爆的移动应用,以10亿美元的天价卖给了FaceBook。我不介意赚取一些外快,所以我决定创建一个Instagram样式的应用(以后将会分享出来)本文向您展示怎样转换Image为canvas,以及canvas如何提取出一个Image。
+关注继续查看

在上周的Mozilla Web开发 会议,最后我们花了大半天的时间讨论未来的Mozilla市场应用。Instagram是近期最火爆的移动应用,以10亿美元的天价卖给了FaceBook。
我不介意赚取一些外快,所以我决定创建一个Instagram样式的应用(以后将会分享出来)
本文向您展示怎样转换Image为canvas,以及canvas如何提取出一个Image。

转换 Image为 Canvas
要把图片转换为Canvas(画板,画布),可以使用canvas元素 context 的drawImage方法:

 

[javascript] view plain copy
 
  1. // 把image 转换为 canvas对象  
  2. function convertImageToCanvas(image) {  
  3.     // 创建canvas DOM元素,并设置其宽高和图片一样   
  4.     var canvas = document.createElement("canvas");  
  5.     canvas.width = image.width;  
  6.     canvas.height = image.height;  
  7.     // 坐标(0,0) 表示从此处开始绘制,相当于偏移。  
  8.     canvas.getContext("2d").drawImage(image, 0, 0);  
  9.   
  10.     return canvas;  
  11. }  

 

 

转换  Canvas 为 Image
假设图像已经在canvas上处理好,那么可以使用以下方法,把canvas转变为图片Image对象。

[javascript] view plain copy
 
  1. // 从 canvas 提取图片 image  
  2. function convertCanvasToImage(canvas) {  
  3.     //新Image对象,可以理解为DOM  
  4.     var image = new Image();  
  5.     // canvas.toDataURL 返回的是一串Base64编码的URL,当然,浏览器自己肯定支持  
  6.     // 指定格式 PNG  
  7.     image.src = canvas.toDataURL("image/png");  
  8.     return image;  
  9. }  


额!图像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把图片转为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
Rotate Image
You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwise). Follow up:Could you do this in-place? C++实现代码: ...
434 0
Canvas与Image互相转换
JS Canvas与Image互相转换 原文地址: JavaScript Canvas Image Conversion 原文演示: JavaScript Canvas Image Conversion Demo 原文日期:2012年05月08日翻译日期:2013年08月09日 在上周的Mozilla Web开发 会议,最后我们花了大半天的时间讨论未来的Mozilla市场应用。
543 0
+关注
awbeci
我的名字叫张威(多好听的名字啊),毕业于哈弗大学(之前和比尔·盖次是同学,自从那家伙创立了威软,我和他的关系就不太好,我发誓要打败他,然后进入安徽机电职业技术学院学习软件技术,你们觉得我会成功么), 现在在一家世界五百强公司任职UFO(想问我是什么公司?叫合肥优尔电子科技有限公司
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载