html5 解析图片

一 图片预览
HTML5给web开发带来很多好东西,可以说,它将开创新一代web开发。
其中canvas就是它带来的东西之一,canvas非常强大,可以做到很多东西。这里只是展示一个简单的canvas效果。如下图:

二 原理介绍
在代码中通过ctx.getImageData(0,0,width,height);获取canvas里面的imagedata对象,而这个对象就是这个效果实现的关键。
通过imagedata.data来获取一个数组,这个数组的length是canvas像素数量的四倍,其中每四个项代表一个像素。在每四个项里,他们一次代表rgba,rgb就很明显了,而a就代表透明,当a为255的时候完全不透明,当a为0的时候就是透明的。而这次的效果无需用到透明,所以没对这个进行操作。
最后通过ctx.putImageData(imageData,0,0);把处理过的Imagedata放回去。请注意看代码以及注释。

  1. window.onload = function() {
  2. var photo=document.getElementById("photo");
  3. photo.onload=function(){//把图像处理函数添加为目标图片的onload时间,因为只有图片已经加载,才能用canvas对其进行操作
  4. var cav=document.getElementById("cav");//获取canvas对象
  5. var ctx=cav.getContext("2d");//通过这个函数获取canvas的上下文
  6. var width=parseInt(cav.getAttribute("width"));
  7. var height=parseInt(cav.getAttribute("height"));
  8. ctx.drawImage(this,0,0);//将图片“画到”canvas上去
  9. var imageData=ctx.getImageData(0,0,width,height);//取得canvas的imageData,我们就是通过这个对canvas进行像素操作的
  10. var data=imageData.data;
  11. for(var i=0,length=data.length;i<length;i=i+4)//data里面每4个数据项代表一个像素
  12. {
  13. data[i]=255-data[i];//红
  14. data[i+1]=255-data[i+1];//绿
  15. data[i+2]=255-data[i+2];//蓝
  16. }
  17. ctx.putImageData(imageData,0,0);//把imageData再放回canvas
  18. }
  19. photo.src="canvas-women.jpg";
  20. }
时间: 2024-10-21 21:10:27

html5 解析图片的相关文章

html5将图片转换成base64的实例代码

这篇文章给大家介绍了如何利用html5将图片转换成base64,文中通过示例代码介绍的很详细,有需要的朋友们可以参考借鉴. base64编码介绍base64是一种网络上常用的8bit字节代码的编码方式,base64可以用于http环境下传递较长的标识信息,同时可以放在url当中使用,因为base64不惧可读性,所以具有一定的加密功能. 为什么要把图片转换成base64编码?将图片转换成base64代码可以减少http请求,因为图片可以以字符编码的形式直接传递到客户端,而文件形式都需要进行http

HTML5实现图片文件异步上传

利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段.我这边的效果预览: 1.文件未选择 2.文件已选择 HTML代码部分: 思路:下面代码中我利用css的z-index属性将input="file"标签隐藏在了id=btnSelect元素下面,通过触发a标签的点击后,弹出文件选择框.下面的masklayer用于点击确认按钮后的弹出层,避免用户重复点击确认按钮. <div id

HTML5将图片转化成字符画

HTML5将图片转化成字符画 字符画大家一定非常熟悉了,那么如何把一张现有的图片转成字符画呢?HTML5让这个可能变成了现实,通过canvas,可以很轻松实现这个功能.其实原理很简单:扫描图片相应位置的像素点,再计算出其灰度值,根据灰度值的大小,分别用字符#*+“和空格来填充.下面是源码:HTML:一个canvas元素#cv,一个字符画容器#txt . 1 <canvas id="cv">fuck ie</canvas> 2 <div id="t

13种酷炫的html5 3D图片切换代码

jQuery 3D图片叠加css3翻转图片切换特效 html5图片3d切换幻灯片轮播特效代码 jquery 3d响应式幻灯片带左右按钮的图片滑动切换效果 jquery.slicebox酷炫的html5 3d图片轮播幻灯片切换效果 html5 css3 3D动画制作手机界面3D叠加突出动画效果 html5 3D图片网格布局点击图片3D动画弹出大图文字信息 css3 transform属性制作鼠标点击3D图片叠加动画效果 modernizr html5 jquery.windy图片类似纸被风吹走3D

OkHttp框架从入门到放弃,解析图片使用Picasso裁剪,二次封装OkHttpUtils,Post提交表单数据

OkHttp框架从入门到放弃,解析图片使用Picasso裁剪,二次封装OkHttpUtils,Post提交表单数据 我们这片博文就来聊聊这个反响很不错的OkHttp了,标题是我恶搞的,本篇将着重详细的分析,探索OkHttp这个框架的使用和封装 一.追其原理 Android系统提供了两种HTTP通信类 HttpURLConnection HttpClient Google推荐使用HttpURLConnection,这个没必要多说,事实上,我这篇写的应该算是比较晚了,很多优秀的博文都已经提出了这些观

10款让人惊叹的HTML5/jQuery图片动画特效

1.HTML5相册照片浏览器 可连接Flickr照片服务 以前我们经常会分享一些jQuery相册浏览插件,效果不错,实用性也很强.不过如果能利用HTML5来实现相册浏览器,那么相册浏览效果肯定会更加炫酷.今天分享的这款HTML5相册浏览器可以连接到Flickr获取照片,也可以连接到youtube获取视频,照片在初始化的时候有波浪般的效果. 在线演示 源码下载 2.CSS3图片模糊效果 今天我们来分享一款利用CSS3技术让图片模糊的效果,我们只需要将鼠标滑过图片,就可以让图片产生模糊的特效,利用C

HTML5动画图片播放器 高端大气

我们见过很多图片播放插件(焦点图),很多都基于jQuery.今天介绍的HTML5图片播放器很特别,它不仅在图片间切换有过渡动画效果,而且在切换时图片中的元素也将出现动画效果,比如图中的文字移动.打散.重新组合等.这款HTML5动画图片播放器算得上是高端大气上档次. 在线演示源码下载 转载自:http://www.html5tricks.com/html5-image-player-with-animation.html HTML5动画图片播放器 高端大气

html5实现图片自适应手机屏幕页面的css

HTML5实现图片自适应手机屏幕页面的css. HTML5写手机页面,读取图片,如果图片大于手机屏幕的宽度,就显示100%屏幕,如果小于,就显示原图. CSS的max-width就能实现了,不要设置img的宽和高. img{max-width:100%;}

HTML5 绘制图片

作者:卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/33344289 一.绘制图像 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本. drawImage(image,x,y) : 在canvas中(x,y)处绘制图片. drawImage(image,x,y,width,height) : 在canvas中(x,y)处绘制图片,并将其缩放到指定的宽度和高度. drawImage(image,source