俺家小公举（canvas画布灰度化图像）
位置:
首页 >
代码集锦[发布: 2024.4.24 作者: 马黑 阅读: 396]
代码：
<canvas id="canv" style="display: block; margin: auto; border: 1px solid gray; background: #333;"></canvas>
<p style="margin-top: 20px; text-align: center;">
<button id="btnGray" type="button" value="0" disabled>灰度</button>
<button id="btnRestore" type="button" value="1">还原</button>
</p>
<script>
(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 发布: 看到这个贴子想乐了，黄色儿其实也挺好看~~粒子改的时候我试过蓝色，整个贴子太清冷。。。黄色儿也试了一下，黄跟蓝是撞色，有点违和~~现在想想可以不用正黄，用偏黄减点透明度也是个方法
