HTML怎么做Cropper裁剪_html Cropper.js图片裁剪用法【新手必读】-html教程-PHP中文网

cropper.js是证件照裁剪最稳方案，支持比例锁定、旋转缩放且纯前端处理保障隐私；需等img.onload后初始化，容器设显式宽高，固定比例须设aspectratio（小数）、viewmode:1、dragmode:'crop'；导出高清图需double canvas+scale；自定义尺寸须destroy后重建实例。

html怎么做cropper裁剪_html cropper.js图片裁剪用法【新手必读】

直接用 Cropper.js 是最省事、最稳的方案，它原生支持比例锁定、旋转、缩放，且不依赖后端——所有操作都在浏览器里完成，照片不会上传，符合证件照对隐私的基本要求。

图片加载完再初始化，否则黑屏或裁剪框错位

很多人初始化后看到黑图、空白或裁剪框卡在左上角，根本原因是 new Cropper(image, {...}) 被提前执行了，而 <img> 的 src 还没加载完。

必须用 img.onload 回调包裹初始化逻辑，不能只等 DOMContentLoaded 或 $(document).ready()
容器（如 <div id="cropper-container">）要设显式 <code>width 和 height，不能靠内容撑开或写 min-height
避免在 display: none 的父元素中初始化；若需初始隐藏，改用 visibility: hidden 或先初始化再隐藏
Webpack/Vite 项目注意静态资源路径：控制台报 404 会导致 onload 不触发，src 必须能真实加载成功

固定比例裁剪必须设对三个参数

一寸照（295×413）、二寸（413×579）、护照（33×48mm 换算像素）等标准尺寸，靠 aspectRatio 锁定，但光写这个不够。

aspectRatio: 295 / 413 —— 必须是小数（≈0.714），不能写字符串 "295/413" 或数组 [295, 413]
viewMode: 1 —— 允许裁剪框越出图片边界，否则人像稍大就框不住头顶和下巴
dragMode: 'crop' —— 默认是 'move'，那是拖整张图，不是拉裁剪框；不设这个，用户点半天拉不出框

示例：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

const image = document.getElementById('image');
image.onload = () => {
  const cropper = new Cropper(image, {
    aspectRatio: 295 / 413,
    viewMode: 1,
    dragMode: 'crop',
    rotatable: true,
    scalable: true
  });
};