canvas画布：颗粒化图像
<style>.wrap { font: normal 18px / 24px sans-serif; }
.wrap p, .wrap div { margin: 20px 0; }
#papa { margin: auto; width: 600px; height: 400px; background: olive; border: 1px solid gray; position: relative;}
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<div class="wrap">
<p>先上效果：</p>
<div id="papa"></div>
<p>左边的图片被颗粒化了。颗粒化也称粒子化，其实现原理有多重方法，这里使用canvas画布的 getImageData 方法获得图片像素数据，根据图片宽高尺寸纵横遍历像素，以一定的像素间隔获取具体像素数据，然后将这些数据作为绘制圆点的依据在画布上进行重绘。核心代码已经封装成独立的JS资源，引用和配置代码如下：</p>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span>><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="2"> </cl-cd>
<cl-cd data-idx="3"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="4"><span class="tBlue">var</span> sF = <span class="tRed">document</span>.createElement(<span class="tMagenta">'script'</span>);</cl-cd>
<cl-cd data-idx="5">sF.src = <span class="tMagenta">'https://638183.freep.cn/638183/web/js/pic2dot.js'</span>;</cl-cd>
<cl-cd data-idx="6">sF.charset = <span class="tMagenta">'utf-8'</span>;</cl-cd>
<cl-cd data-idx="7"><span class="tRed">document</span>.body.appendChild(sF);</cl-cd>
<cl-cd data-idx="8"> </cl-cd>
<cl-cd data-idx="9"><span class="tBlue">var</span> p2d = {</cl-cd>
<cl-cd data-idx="10"> <span class="tBlue">papa:</span> <span class="tMagenta">'#papa'</span>,</cl-cd>
<cl-cd data-idx="11"> <span class="tBlue">pic:</span> <span class="tMagenta">'https://638183.freep.cn/638183/Pic/38/nb7.jpg'</span>,</cl-cd>
<cl-cd data-idx="12"> <span class="tBlue">skip:</span> 4,</cl-cd>
<cl-cd data-idx="13"> <span class="tBlue">width:</span> 320,</cl-cd>
<cl-cd data-idx="14"> <span class="tBlue">height:</span> 400</cl-cd>
<cl-cd data-idx="15">};</cl-cd>
<cl-cd data-idx="16"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
<p>其中，papa 参数必须，指定画布宿主元素；pic 参数必须，指定有效、可跨域操作的图片地址（大多数网络图片支持跨域）；skip 参数可选，指定颗粒大小；width 和 height 参数可选，指定图片宽高尺寸。</p>
<p>【注意事项】</p>
<blockquote>一、宿主元素的背景（色）会影响颗粒的外观；<br>二、skip 参数本质是间隔多少个像素取原图像素数据，建议取值范围为 4~20；<br>三、当出现元素重叠，应设置好其他元素的 z-index 属性，以确保它们的正常显示与交互功能不受画布影响；<br>四、若可确定图片尺寸，则宿主元素的尺寸建议设置为和图片尺寸一样。若图片尺寸未知，应处理好宿主元素的定位问题。</blockquote>
</div>
<script type="text/javascript">
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,
};
</script>
这颗粒化让图图的风格都变化了呢{:4_187:} 看着跟抽丝效果有 点相似。。。 南无月 发表于 2024-4-27 16:58
看着跟抽丝效果有 点相似。。。
不一样的。可以试一下 skip 值大一些看看效果 红影 发表于 2024-4-27 13:25
这颗粒化让图图的风格都变化了呢
这是标准的废话{:4_170:} 二、skip 参数本质是间隔多少个像素取原图像素数据，建议取值范围为 4~20；
这个试了一下，如果取值为10，变成空心的小圆圈了。。
小圆圈透出来的是背景色。。跟画布颜色一致。。 南无月 发表于 2024-4-27 17:04
二、skip 参数本质是间隔多少个像素取原图像素数据，建议取值范围为 4~20；
这个试了一下，如果取值为10， ...
多试多了解脚本的工作机制 马黑黑 发表于 2024-4-27 17:00
不一样的。可以试一下 skip 值大一些看看效果
我加过了。。
的确完全不一样。。
乍一看一样 马黑黑 发表于 2024-4-27 17:07
多试多了解脚本的工作机制
边试边看说明才知道圆内空白是画布色。。圆之间缝隙是图片。。
数值越小，缝隙越大，图片看上去越完整。{:4_199:} 南无月 发表于 2024-4-27 17:15
边试边看说明才知道圆内空白是画布色。。圆之间缝隙是图片。。
数值越小，缝隙越大，图片看上去越完整。 ...
是这么个道理 南无月 发表于 2024-4-27 17:12
我加过了。。
的确完全不一样。。
乍一看一样
一样的那没必须做呢 Ч棬psЧ{:4_199:} 写了不少，出来这样了{:4_198:} 黑黑这个也是抽丝效果吗 小辣椒 发表于 2024-4-27 18:29
黑黑这个也是抽丝效果吗
颗粒化 小辣椒 发表于 2024-4-27 18:26
Ч棬psЧ
{:4_189:} 小辣椒 发表于 2024-4-27 18:29
写了不少，出来这样了
{:4_197:} 马黑黑 发表于 2024-4-27 17:47
一样的那没必须做呢
也是哈。。抽丝和这个粒子画各有奥妙 马黑黑 发表于 2024-4-27 17:46
是这么个道理
{:4_170:}
有贴子说明更清楚了 南无月 发表于 2024-4-27 19:31
有贴子说明更清楚了
文档是很重要的