当前位置：首页 > JavaScript

js实现裁剪

2026-01-31 13:42:49JavaScript

使用Canvas实现图片裁剪

Canvas API提供了一种简单的方式来裁剪图片。创建一个canvas元素，获取其2D上下文，然后使用drawImage方法指定裁剪区域。

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();

img.onload = function() {
    const cropX = 50, cropY = 50, cropWidth = 200, cropHeight = 200;
    canvas.width = cropWidth;
    canvas.height = cropHeight;

    ctx.drawImage(img, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
    document.body.appendChild(canvas);
};

img.src = 'image.jpg';

使用第三方库cropper.js

cropper.js是一个流行的图片裁剪库，提供丰富的交互功能。安装后通过简单配置即可实现专业级裁剪效果。

import Cropper from 'cropperjs';

const image = document.getElementById('image');
const cropper = new Cropper(image, {
    aspectRatio: 1,
    viewMode: 1,
    autoCropArea: 0.8,
    responsive: true
});

// 获取裁剪结果
const croppedCanvas = cropper.getCroppedCanvas();

响应式裁剪区域实现

结合鼠标事件实现动态裁剪区域选择。监听mousedown、mousemove和mouseup事件来绘制和调整裁剪框。

let isDragging = false;
let startX, startY, endX, endY;
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

canvas.addEventListener('mousedown', (e) => {
    isDragging = true;
    startX = e.offsetX;
    startY = e.offsetY;
});

canvas.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    endX = e.offsetX;
    endY = e.offsetY;
    drawSelectionBox();
});

function drawSelectionBox() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.strokeStyle = 'red';
    ctx.strokeRect(startX, startY, endX - startX, endY - startY);
}

保持宽高比的裁剪

通过计算宽高比约束，确保裁剪区域保持特定比例。在mousemove事件中根据比例调整坐标。

const aspectRatio = 16/9;
let width, height;

canvas.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    const deltaX = e.offsetX - startX;
    const deltaY = e.offsetY - startY;

    if (Math.abs(deltaX) > Math.abs(deltaY * aspectRatio)) {
        width = deltaX;
        height = width / aspectRatio;
    } else {
        height = deltaY;
        width = height * aspectRatio;
    }

    drawSelectionBox(startX, startY, width, height);
});

输出裁剪结果

将canvas裁剪结果转换为Blob或DataURL，便于上传或显示。使用toBlob或toDataURL方法。

js实现裁剪

canvas.toBlob((blob) => {
    const formData = new FormData();
    formData.append('croppedImage', blob);
    // 上传处理
}, 'image/jpeg', 0.9);

// 或获取DataURL
const imageDataURL = canvas.toDataURL('image/png');
document.getElementById('result').src = imageDataURL;

标签: js