当前位置：首页 > 行业动态 > 正文

html如何截取图片

使用JavaScript遍历页面中的img元素，提取其src属性；或利用Canvas API进行图像

使用HTML5 Canvas手动实现

创建文件输入与Canvas元素

<input type="file" id="upload" accept="image/">
<canvas id="canvas"></canvas>

读取图片并绘制到Canvas

const upload = document.getElementById('upload');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
upload.addEventListener('change', (e) => {
    const file = e.target.files[0];
    if (!file) return;
    const img = new Image();
    img.onload = () => {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
    };
    img.src = URL.createObjectURL(file);
});

实现裁剪逻辑（示例：固定区域裁剪）

function cropImage(x, y, width, height) {
    const croppedCanvas = document.createElement('canvas');
    croppedCanvas.width = width;
    croppedCanvas.height = height;
    const cropCtx = croppedCanvas.getContext('2d');
    cropCtx.drawImage(canvas, x, y, width, height, 0, 0, width, height);
    return croppedCanvas.toDataURL('image/png'); // 获取裁剪后的图片Base64
}

使用第三方库（推荐）

库名 特点
Cropper.js 支持拖拽、缩放、旋转等高级功能，兼容多设备
Clipper.js 轻量级，核心裁剪功能
ngx-image-cropper Angular专用，集成裁剪与压缩功能

使用Cropper.js示例

  1. 引入库：

    <link href="https://cdn.jsdelivr.net/npm/cropperjs@1.5.12/dist/cropper.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/cropperjs@1.5.12/dist/cropper.min.js"></script>

  2. 初始化代码：

    const cropper = new Cropper(document.getElementById('image'), {
 aspectRatio: 1, // 裁剪比例
 viewMode: 1,    // 限制裁剪框在图片内
 dragMode: 'move', // 拖动模式
});

  3. 获取裁剪结果：

    function getCroppedImage() {
 return cropper.getCroppedCanvas().toDataURL('image/jpeg');
}

常见问题与解答

问题1：如何动态调整裁剪框大小？

解答：
通过监听鼠标/触摸事件修改裁剪框的width和height属性，例如使用Cropper.js时，可直接调用cropper.setAspectRatio(newRatio)调整比例，或通过cropper.setData修改坐标。

问题2：裁剪后的图片如何上传到服务器？

解答：
将Canvas转换为FormData对象后发送：

const formData = new FormData();
formData.append('croppedImage', new Blob([croppedCanvas.toDataURL('image/png')], {type: 'image/png'}));
fetch('/upload', {method: 'POST',
HTML Canvas图片裁剪
0

相关文章