console
<!DOCTYPE html>
<html>
<head>
<style>
#image-container {
/* position: relative; */
}
#image{
/* user-select: none; */
/* pointer-events: none; */
max-width: 100%;
}
#mosaic-overlay {
position: absolute;
top:0;left:0;
z-index:9;
}
</style>
</head>
<body>
<div id="image-container">
<img src="https://www.lilnong.top/static/img/wx-linong.jpg" id="image" alt="Image" />
<canvas id="mosaic-overlay"></canvas>
</div>
<button class="btn">撤回</button>
<script>
const image = document.getElementById("image");
const mosaicOverlay = document.getElementById("mosaic-overlay");
image.onload = ()=>{
mosaicOverlay.width = image.width
mosaicOverlay.height = image.height
}
const ctx = mosaicOverlay.getContext("2d");
// 设置马赛克效果的尺寸
const mosaicSize = 20; // 调整这个值来改变马赛克块的大小
let isMosaicing = false;
// 监听鼠标按住左键事件
const handleStart = () => {
isMosaicing = true;
}
mosaicOverlay.addEventListener("mousedown", handleStart);
mosaicOverlay.addEventListener("touchstart", handleStart);
// 监听鼠标松开事件
const handleMove = () => {
isMosaicing = false;
}
window.addEventListener("mouseup", handleMove);
window.addEventListener("touchend", handleMove);
// 监听鼠标移动事件，添加马赛克效果
const btn = document.querySelector('.btn')
let arr = []
const handleEnd = (e) => {
console.log(e,'e');
if (isMosaicing) {
const point = e?.touches?.[0] || e;
const x = point.clientX - mosaicSize / 2;
const y = point.clientY - mosaicSize / 2;
arr.push({x,y})
console.log(arr,'arr');
// console.log('x:',x,'y:',y);
// 绘制马赛克块
ctx.drawImage(
image,
Math.random() * image.width,
Math.random() * image.height,
mosaicSize,
mosaicSize,
x,
y,
mosaicSize,
mosaicSize
);
}
}
mosaicOverlay.addEventListener("mousemove", handleEnd);
mosaicOverlay.addEventListener("touchmove", handleEnd);
btn.addEventListener('click',( )=>{
// let item = arr.unshift()
// ctx.clearReact()
ctx.clearRect(0, 0, mosaicOverlay.width, mosaicOverlay.height);
// ctx.drawImage(
// image,
// Math.random() * image.width,
// Math.random() * image.height,
// mosaicSize,
// mosaicSize,
// item.x,
// item.y,
// mosaicSize,
// mosaicSize
// )
ctx.cle
}
)
</script>
</body>
</html>