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

评论资讯 [ 总 17 则 ]

·悄然 - 2026-3-26 10:46
·飞飞 - 2026-3-21 10:00
·悄然 - 2026-3-21 10:00
·小白 - 2026-3-21 09:59
·飞飞 - 2026-3-20 14:21
·悄然 - 2026-3-16 16:58
·飞飞 - 2026-3-10 14:32
·飞飞 - 2026-2-25 22:31
·小白 - 2026-2-25 22:11
·飞飞 - 2026-2-25 22:09

友情链接

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

网站统计

·前端三套件 : 184
·JS插件 : 68
·黑石音画 : 522
·代码集锦 : 79
·小工具集合 : 32
·网友作品精选 : 9
·svgdr : 26
·杂记 : 4

·今日访问 : 294
·页面点击 : 370
·当前在线 : 13

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

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

代码：

</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 发布: 看到这个贴子想乐了，黄色儿其实也挺好看~~粒子改的时候我试过蓝色，整个贴子太清冷。。。黄色儿也试了一下，黄跟蓝是撞色，有点违和~~现在想想可以不用正黄，用偏黄减点透明度也是个方法