说明
由于项目中需要对一个图片进行多选择框进行裁剪，所以特写当前的示例代码。
代码
<!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 = 1img.onload = function () {let width = img.widthlet height = img.heightif (img.width > window.innerWidth || img.height > window.innerHeight) {if (window.innerWidth / img.width > window.innerHeight / img.height) {rate = window.innerHeight / img.heightwidth = img.width * rateheight = window.innerHeight} else {width = window.innerWidthrate = window.innerWidth / img.widthheight = 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.begincoor.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>
