马黑黑 发表于 2024-3-29 14:11
玩诗文的，一般都会酱紫考虑问题。不过我建议暂时不用想这个，画布对文本的处理需要非常繁琐的流程，还不 ...
嗯嗯，黑黑的建议必须听从{:4_187:}
本帖最后由 马黑黑 于 2024-4-24 19:46 编辑 <br /><br /><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 = ;
let ctx = canv.getContext('2d');
let ww, hh, imgData;
let img = new Image();
img.crossOrigin = 'anonymous';
img.style.display = 'none';
document.body.appendChild(img);
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 + data.data + data.data) / 3;
data.data = data.data = data.data = average;
}
ctx.clearRect(0, 0, ww, hh);
ctx.putImageData(data, 0, 0);
};
btns.forEach(btn => {
btn.onclick = () => {
btn.value === '0' ?
(btns.disabled = true, btns.disabled = false, toGray(imgData)) :
(btns.disabled = true, btns.disabled = false, ctx.drawImage(img, 0, 0));
};
});
img.src = 'https://638183.freep.cn/638183/t24/webp/xgj.webp';
})();
</script>
红影 发表于 2024-3-30 14:23
轻松并幸福着，不是更好么
最终结果一样
马黑黑 发表于 2024-3-30 16:23
笑得那么嗨{:4_173:}
马黑黑 发表于 2024-3-30 16:23
最终结果一样
过程不一样啊{:4_173:}
红影 发表于 2024-3-30 21:54
过程不一样啊
过程就说不清楚了
红影 发表于 2024-3-30 21:54
笑得那么嗨
应该的吧
马黑黑 发表于 2024-3-30 22:40
过程就说不清楚了
结果要好，过程也要快乐才好。
马黑黑 发表于 2024-3-30 22:42
应该的吧
笑比哭好{:4_173:}
红影 发表于 2024-3-30 23:34
笑比哭好
那也不见得吧？喜极而泣，那是哭的至高境界
红影 发表于 2024-3-30 23:33
结果要好，过程也要快乐才好。
最好如此，但往往不会如此
马黑黑 发表于 2024-3-31 12:52
那也不见得吧？喜极而泣，那是哭的至高境界
你总能找到极端的例子{:4_173:}
马黑黑 发表于 2024-3-31 12:52
最好如此，但往往不会如此
那就要过程，不去管结果。