本帖最后由 马黑黑 于 2024-4-24 20:09 编辑
一楼完整代码
<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 () {
var btns = [btnGray, btnRestore];
ctx = canv.getContext('2d');
var ww, hh, imgData;
var 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);
};
var toGray = (data) => {
for(var k = 0; k < data.data.length; k += 4) {
var 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>
| 
发表于 2024-4-24 19:49
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-4-24 20:17
发表于 2024-4-24 20:58
发表于 2024-4-24 21:23
