请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
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 属性，以确保它们的正常显示与交互功能不受画布影响；
四、若可确定图片尺寸，则宿主元素的尺寸建议设置为和图片尺寸一样。若图片尺寸未知，应处理好宿主元素的定位问题。
| 
发表于 2024-4-27 10:31
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2024-4-27 16:58
楼主
