俺家小公举（canvas画布灰度化图像）

评论资讯 [ 总 494 则 ]

·飞飞 - 2025-4-22 21:44
·飞飞 - 2025-4-22 14:27
·小希 - 2025-4-19 09:03
·飞飞 - 2025-4-17 18:46
·悄然 - 2025-4-5 11:32
·马黑 - 2025-4-1 19:54
·飞飞 - 2025-4-1 19:52
·飞飞 - 2025-3-31 21:06
·小希 - 2025-3-30 22:56
·悄然 - 2025-3-25 18:39

友情链接

◇ 午后时光
◇ 花潮论坛
◇ 马黑永硕网盘
◇ 老站
◇ 随意云
◇ mhhblog
◇ HTML官方文档
◇ Web代码格式化工具
◇ 清音陋屋
◇ cubic-bezier

网站统计

·前端三套件 : 115
·JS插件 : 47
·黑石音画 : 352
·代码集锦 : 55
·小工具集合 : 23
·网友作品精选 : 6
·svgdr : 26

·今日访问 : 335
·页面点击 : 346
·当前在线 : 31

俺家小公举（canvas画布灰度化图像）

位置: 首页 > 代码集锦[ 发布时间: 2024.4.24 作者: 马黑阅读: 391 ]

代码：

</p>

(function () {

let btns = [btnGray, btnRestore];

let ctx = canv.getContext('2d');

let ww, hh, imgData;

let img = new Image();

img.crossOrigin = 'anonymous';

img.onload = () => {

ww = canv.width = img.width;

hh = canv.height = img.height;

ctx.drawImage(img, 0, 0, ww, hh);

imgData = ctx.getImageData(0,0,ww,hh);

toGray(imgData);

};

let toGray = (data) => {

for(let k = 0; k < data.data.length; k += 4) {

let average = (data.data[k] + data.data[k+1] + data.data[k+2]) / 3;

data.data[k] = data.data[k+1] = data.data[k+2] = average;

}

ctx.clearRect(0, 0, ww, hh);

ctx.putImageData(data, 0, 0);

};

btns.forEach(btn => {

btn.onclick = () => {

btn.value === '0' ?

(btns[0].disabled = true, btns[1].disabled = false, toGray(imgData)) :

(btns[1].disabled = true, btns[0].disabled = false, ctx.drawImage(img, 0, 0));

};

});

img.src = 'https://638183.freep.cn/638183/t24/webp/xgj.webp';

})();

</script>

前一篇: canvas画布：大白兔变大红兔
下一篇: 用canvas画布绘制立方体

发表评论:

评论列表 [2条]

#2 | 悄然于 2024-4-24 20:20 发布: 这个好象可以用在整个音画贴子里。。下面加个灰度和原色设置。。。那以后做的图就可以有不同的呈现方式了。

#1 | 飞飞于 2024-4-24 20:19 发布: 看到这个贴子想乐了，黄色儿其实也挺好看~~粒子改的时候我试过蓝色，整个贴子太清冷。。。黄色儿也试了一下，黄跟蓝是撞色，有点违和~~现在想想可以不用正黄，用偏黄减点透明度也是个方法