vue3 图片裁剪插件cropper,常用的配置。比例配置,裁剪框默认按比例框完整个图片等 电脑版发表于:2025/4/8 10:20 [TOC] ### 裁剪比例配置 使用aspectRatio属性配置 核心配置如下 ``` this.cropper = new Cropper(this.imageElement, { aspectRatio: 192 / 35 }); ``` ### 裁剪框默认按比例框完整个图片 当你设置了特定的 aspectRatio(例如 192 / 35),并希望在上传图片后裁剪框默认覆盖整个图片(即按照比例最大化填充裁剪区域),你可以通过确保 autoCropArea 设置为 1 来实现这一点。autoCropArea: 1 会让裁剪框初始时尽可能大地填充图片,同时遵循你设置的 aspectRatio。 核心配置如下: ``` this.cropper = new Cropper(this.imageElement, { autoCropArea: 1, aspectRatio: 192 / 35 }); ``` ### 更多配置 ``` this.cropper = new Cropper(this.imageElement, { viewMode: 1, dragMode: 'move', autoCropArea: 1, aspectRatio: 192 / 35, responsive: true, restore: true, modal: true, guides: true, center: true, highlight: true, background: true, cropBoxMovable: true, cropBoxResizable: true, toggleDragModeOnDblclick: true, }); ```