<!DOCTYPE html>
<html>
<head>
<title>canvas主动裁剪图片空白区域</title></head>
<body>
<input type="file" id="imageInput" accept="image/*"><canvas id="canvas" style="display:none;"></canvas><div style="margin: 20px 0"> <img id="outputImage" src="" alt="剪切后的图片"></div><script> const imageInput = document.getElementById('imageInput'); const canvas = document.getElementById('canvas'); const outputImage = document.getElementById('outputImage'); const ctx = canvas.getContext('2d'); imageInput.addEventListener('change', function (e) { const file = e.target.files[0]; const reader = new FileReader(); reader.onload = function (event) { const img = new Image(); img.src = event.target.result; img.onload = function () { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); // 获取图像的像素数据 const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data; // 找到非红色像素的边界 let minX = canvas.width; let minY = canvas.height; let maxX = -1; let maxY = -1; for (let y = 0; y < canvas.height; y++) { for (let x = 0; x < canvas.width; x++) { const index = (y * canvas.width + x) * 4; // 每个像素有4个通道（RGBA） const red = data[index]; const green = data[index + 1]; const blue = data[index + 2]; // 判断像素是否为红色 (255, 255, 255) if (red === 255 && green === 255 && blue === 255) { // 此像素是红色，跳过 } else { // 非红色像素 minX = Math.min(minX, x); minY = Math.min(minY, y); maxX = Math.max(maxX, x); maxY = Math.max(maxY, y); } } } // 计算剪切后的图像宽度和高度 const croppedWidth = maxX - minX + 1; const croppedHeight = maxY - minY + 1; // 创立一个新的Canvas，将非红色区域绘制到新Canvas上 const newCanvas = document.createElement('canvas'); const newCtx = newCanvas.getContext('2d'); newCanvas.width = croppedWidth; newCanvas.height = croppedHeight; newCtx.drawImage(canvas, minX, minY, croppedWidth, croppedHeight, 0, 0, croppedWidth, croppedHeight); // 将解决后的图像显示在页面上的<img>元素中 outputImage.src = newCanvas.toDataURL(); }; }; reader.readAsDataURL(file); });</script></body>
</html>