canvas的魔法，X光效果 |
您所在的位置：网站首页 › 如何从pdf图片提取文字在线编辑 › canvas的魔法，X光效果 |
canvas的魔法，X光效果
|
一 图片预览 HTML5给web开发带来很多好东西，可以说，它将开创新一代web开发。 其中canvas就是它带来的东西之一，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放回去。请注意看代码以及注释。
注：下面那个img的src值是我本机的，因为将外链的图片添加到canvas里面的话会引发Security错误，所以在demo里面我把图片转化为DataURL来使用的。 三 代码以及demo window.onload = function () { var photo = document.getElementById( " photo " ); photo.onload = function (){ // 把图像处理函数添加为目标图片的onload时间，因为只有图片已经加载，才能用canvas对其进行操作 var cav = document.getElementById( " cav " ); // 获取canvas对象 var ctx = cav.getContext( " 2d " ); // 通过这个函数获取canvas的上下文 var width = parseInt(cav.getAttribute( " width " )); var height = parseInt(cav.getAttribute( " height " )); ctx.drawImage( this , 0 , 0 ); // 将图片“画到”canvas上去 var imageData = ctx.getImageData( 0 , 0 ,width,height); // 取得canvas的imageData，我们就是通过这个对canvas进行像素操作的 var data = imageData.data; for ( var i = 0 ,length = data.length;i |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |