案例图片展示：
image.png
代码块：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#cvs{
margin: 100px;
}
</style>
<body>
<div style="margin-bottom: 10px">
上传图片：<input type="file" onchange="onChange(this.files[0])">
</div>
<canvas id="cvs"></canvas>
<canvas id="clipCvs"></canvas>
<button id="download">下载图片</button>
<script>
const cvs = document.getElementById('cvs');
const clipCvs = document.getElementById('clipCvs');
const ctx = cvs.getContext('2d');
const download = document.getElementById('download');
const clipCtx = clipCvs.getContext('2d')
const img = new Image();
let maxW = 600;
let maxH = 0;
let p={
x:0,
y:0,
boxX:0,
boxY:0,
move:false
},rects=null;
const onChange = (file)=>{
init(URL.createObjectURL(file));
}
const init = (src) =>{
img.src = src;
img.onload = () =>{
p.x = 0;
p.y = 0;
let w1 = img.width;
let h1 = img.height;
if(w1>maxW){
h1 = maxW/w1 * h1;
maxH = h1;
w1 = maxW;
}
cvs.width = w1;
cvs.height = h1;
render();
}
console.log("src",src)
}
const render = (left=0,top=0) =>{
ctx.clearRect(0,0,cvs.width,cvs.height);
ctx.drawImage(img,0,0,cvs.width,cvs.height);
ctx.beginPath();
p.x = left;
p.y = top;
let dataImg = ctx.getImageData(left,top,maxW/4,maxW/4);
clipPic(dataImg);
ctx.fillStyle='rgba(0,0,0,.5)';
rects = ctx.fillRect(left,top,maxW/4,maxW/4);
};
const clipPic = (data) =>{
clipCtx.clearRect(0,0,maxW,maxH);
clipCtx.putImageData(data,0,0);
}
cvs.addEventListener('mousedown',({clientX,clientY})=>{
let offsetX = cvs.offsetLeft;
let offsetY = cvs.offsetTop;
let innerX = clientX - offsetX;
let innerY = clientY - offsetY;
if(innerX<(p.x+(maxW/4)) && innerX>=p.x && innerY<(p.y+(maxW/4)) && innerY>=p.y){
console.log("范围内",innerY,rects)
p.boxX = innerX - p.x;
p.boxY = innerY - p.y;
p.move = true;
}
console.log('e',offsetX,offsetY,innerX,maxW/4)
});
cvs.addEventListener('mousemove',({clientX,clientY})=>{
if(p.move){
let x = clientX - cvs.offsetLeft - p.boxX;
let y = clientY - cvs.offsetTop - p.boxY;
if(x<0) x = 0;
if(y<0) y = 0;
if(x>(maxW - (maxW/4))) x=(maxW - (maxW/4));
if(y>(maxH - (maxW/4))) y=(maxH - (maxW/4));
render(x,y);
}
});
cvs.addEventListener('mouseleave',({clientX,clientY})=>{
if(p.move){
p.move = false;
}
});
cvs.addEventListener('mouseup',({clientX,clientY})=>{
if(p.move){
p.move = false;
}
});
download.onclick = async () => {
const res = await fetch(clipCvs.toDataURL('image/png'))
const blob = await res.blob();
const a = document.createElement('a')
a.setAttribute('download', 'clip.png')
a.href = URL.createObjectURL(blob)
a.click()
}
</script>
</body>
</html>
作者太懒了都不想解释，仔细斟酌
网友评论