说明
由于项目中需要对一个图片进行多选择框进行裁剪,所以特写当前的示例代码。
代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="/">
<title>图片裁剪</title>
</head>
<body>
<canvas id="myCanvas" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
let img = new Image();
let rate = 1
img.onload = function () {
let width = img.width
let height = img.height
if (img.width > window.innerWidth || img.height > window.innerHeight) {
if (window.innerWidth / img.width > window.innerHeight / img.height) {
rate = window.innerHeight / img.height
width = img.width * rate
height = window.innerHeight
} else {
width = window.innerWidth
rate = window.innerWidth / img.width
height = img.height * rate
}
}
// 等比缩小
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}
let url = new URL(window.location.href);
let params = new URLSearchParams(url.search);
img.src = "https://img1.baidu.com/it/u=1486134966,661096340&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500";
// 坐标数组
let coorArr = []
// 当前坐标
let coor = {}
// 鼠标按下
canvas.onmousedown = function (e) {
coor.begin = {
x: e.clientX - canvas.offsetLeft,
y: e.clientY - canvas.offsetTop
}
coor.end = {
x: 0,
y: 0
}
}
// 移动鼠标
canvas.onmousemove = function (e) {
let begin = coor.begin;
if (begin === undefined || begin.x === undefined) {
return
}
coor.begin = coor.begin
coor.end = {
x: e.clientX - canvas.offsetLeft,
y: e.clientY - canvas.offsetTop
}
draw();
drawLine(coor);
}
// 鼠标放开
canvas.onmouseup = function (e) {
let begin = coor.begin;
if (begin === undefined || begin.x === undefined) {
return
}
coorArr.push({
begin: coor.begin,
end: {
x: e.clientX - canvas.offsetLeft,
y: e.clientY - canvas.offsetTop
}
})
draw();
coor.begin = {}
}
// 双击裁剪
canvas.ondblclick = function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
coorArr = []
coor = {}
}
// 鼠标离开则清理
canvas.onmouseout = function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
coorArr = []
coor = {}
}
// 画框
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.strokeStyle = 'green';
ctx.lineWidth = 5;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
// 先画之前的框
coorArr.forEach(coor => {
drawLine(coor);
});
// 显示光标位置信息
ctx.font = "18px Arial";
ctx.fillStyle = "red";
// 在canvas外显示光标位置
ctx.fillText("缩放:" + rate.toFixed(2) + ";说明:鼠标离开画布清理,鼠标双击进行裁剪。", 5, 30);
}
// 画矩形
function drawLine(coor) {
let begin = coor.begin;
let end = coor.end;
// 画矩形
ctx.moveTo(begin.x, begin.y);
ctx.lineTo(end.x, begin.y);
ctx.moveTo(end.x, begin.y);
ctx.lineTo(end.x, end.y);
ctx.moveTo(end.x, end.y);
ctx.lineTo(begin.x, end.y);
ctx.moveTo(begin.x, end.y);
ctx.lineTo(begin.x, begin.y);
ctx.stroke();
}
</script>
</body>
</html>