58行html/js代码实现图片裁剪并保存功能

58行html/js代码实现图片裁剪保存功能

<input type="file" id="file-input" accept="image/*">
<button id="crop-button">裁剪</button>
<p>上传图片后,鼠标裁剪部分的左上角点下后拖移到右下角后放开,点裁剪按钮</p>
<table border="1">
<tr><td>长</td><td>宽</td><td>X</td><td>Y</td><td>W</td><td>H</td><td>W:H</td></tr>
<tr><td colspan='2' id='x'>NaN,NaN</td><td colspan='4' id='y'>NaN,NaN,NaN,NaN</td><td id='z'>W:H</td></tr>
</table>
<canvas id="canvas" style="border:1px solid red;"></canvas>
<script type="text/javascript">
var fileInput = document.getElementById("file-input");
var canvas = document.getElementById("canvas");
var cropButton = document.getElementById("crop-button");
var ctx = canvas.getContext("2d");
let startX, startY; const rect = canvas.getBoundingClientRect();
canvas.addEventListener('mousedown', (event) => {
startX = event.clientX - rect.left; startY = event.clientY-rect.top;
});
canvas.addEventListener('mouseup', (event) => {
const endX = event.clientX - rect.left; const endY = event.clientY-rect.top;
const rectX = Math.min(startX, endX);  const rectY = Math.min(startY, endY);
const width = Math.abs(endX - startX); const height = Math.abs(endY - startY);
document.getElementById("y").innerHTML=rectX+","+rectY+","+width+","+height;
const bilie = height/width; //num.toFixed(2)
document.getElementById("z").innerHTML="1:"+ bilie.toFixed(2);
});
fileInput.addEventListener("change", handleFileSelect);
cropButton.addEventListener("click", cropImage);
function handleFileSelect(event) {
var file = event.target.files[0];
if (!file.type.match("image.*")) { alert("请选择一张图片文件"); return; }
var reader = new FileReader();
reader.onload = function(event) {
var img = new Image();
img.onload = function() {
canvas.width = img.width; canvas.height = img.height;
document.getElementById("x").innerHTML = img.width+','+img.height;
ctx.drawImage(img, 0, 0);
}
img.src = event.target.result;
}
reader.readAsDataURL(file);
}
function cropImage() {
var cropArea = document.getElementById("y").innerHTML;
if (!cropArea) { return; }
var [x, y, w, h] = cropArea.split(",");
if(w<20 || h<20) { alert("长宽太小:"+cropArea); return; }
var croppedImage = ctx.getImageData(x, y, w, h);
var resultCanvas = document.createElement("canvas");
resultCanvas.width = w; resultCanvas.height = h;
var resultCtx = resultCanvas.getContext("2d");
resultCtx.putImageData(croppedImage, 0, 0);
var downloadLink = document.createElement("a");
downloadLink.download = "cropped.png";
downloadLink.href = resultCanvas.toDataURL("image/png");
downloadLink.click();
}
</script >