请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
先上效果:
左边的图片被颗粒化了。颗粒化也称粒子化,其实现原理有多重方法,这里使用canvas画布的 getImageData 方法获得图片像素数据,根据图片宽高尺寸纵横遍历像素,以一定的像素间隔获取具体像素数据,然后将这些数据作为绘制圆点的依据在画布上进行重绘。核心代码已经封装成独立的JS资源,引用和配置代码如下:
<div id="papa"></div>
<script>
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/js/pic2dot.js';
sF.charset = 'utf-8';
document.body.appendChild(sF);
var p2d = {
papa: '#papa',
pic: 'https://638183.freep.cn/638183/Pic/38/nb7.jpg',
skip: 4,
width: 320,
height: 400
};
</script>
其中,papa 参数必须,指定画布宿主元素;pic 参数必须,指定有效、可跨域操作的图片地址(大多数网络图片支持跨域);skip 参数可选,指定颗粒大小;width 和 height 参数可选,指定图片宽高尺寸。
【注意事项】
一、宿主元素的背景(色)会影响颗粒的外观; 二、skip 参数本质是间隔多少个像素取原图像素数据,建议取值范围为 4~20; 三、当出现元素重叠,应设置好其他元素的 z-index 属性,以确保它们的正常显示与交互功能不受画布影响; 四、若可确定图片尺寸,则宿主元素的尺寸建议设置为和图片尺寸一样。若图片尺寸未知,应处理好宿主元素的定位问题。
|