Gathering detailed insights and metrics for vue3-cropper
Gathering detailed insights and metrics for vue3-cropper
Installations
npm install vue3-cropperDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
14.8.0
NPM Version
6.14.7
Releases
Unable to fetch releases
Languages
3
Vue
JavaScript
HTML
Vue (79.81%)
JavaScript (18.71%)
HTML (1.48%)
Developer
dreamicalwestswim
Download Statistics
Total Downloads
4,817
Last Day
2
Last Week
14
Last Month
85
Last Year
1,506
GitHub Statistics
35 Stars
7 Commits
4 Forks
2 Watchers
1 Branches
1 Contributors
Updated on May 28, 2025
Bundle Size
199.80 kB
Minified
70.73 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
0.4.0
Package Id
vue3-cropper@0.4.0
Unpacked Size
1.56 MB
Size
389.41 kB
File Count
10
NPM Version
6.14.7
Node Version
14.8.0
Total Downloads
Cumulative downloads
Total Downloads
4,817
Last Day
0%
2
Compared to previous day
Last Week
-26.3%
14
Compared to previous week
Last Month
-33.1%
85
Compared to previous month
Last Year
49.4%
1,506
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
vue3-cropper
基于vue3.x开发的图片裁剪组件,可用于图片裁剪
说明
不依赖任何第三方库，纯手工打造，功能强大，使用灵活。
- 裁剪框尺寸可修改可固定；
- 支持双指操作缩放图片大小，单指操作拖拽图片；
- 可选择图片输出格式；
- 可选择文件输出格式；
- 可选择图片的质量；
- 支持图片旋转；
- 还原默认状态；
- 展示输出图片的尺寸;
- 支持两种裁剪模式(原图模式、缩放模式)默认采用原图模式
- 自动识别图片方向，校正图片角度(主要针对有exif方向属性的图片，一般是照片图片才有这个属性)
- 自动压缩图片尺寸，防止手机端超过2000像素以上的图片滑动卡顿现象。
Demo
安装
npm install vue3-cropper -S
or
yarn add vue3-cropper
引入
import { createApp } from 'vue'
import Cropper from "vue3-cropper";
import 'vue3-cropper/lib/vue3-cropper.css';
const app = createApp(App)
app.use(Cropper)
简易示例 - 选取本地图片进行裁剪
<input type="file" accept="image/*" @change="onChange"/>
<img v-if="previewImage" :src="previewImage" alt="预览图" style="max-width: 100%; max-height: 100%;">
<Cropper v-if="cropperVisible"
:imagePath="imagePath"
fileType="blob"
@save="onSave"
@cancel="onCancel"
/>
import {reactive, toRefs} from 'vue'
const URL = window.URL || window.webkitURL;
export default {
setup() {
const state = reactive({
cropperVisible: false,
imagePath: '',
previewImage: null
})
const onChange = (e) => {
const file = e.target.files[0]
state.imagePath = URL.createObjectURL(file);
state.cropperVisible = true
};
const onSave = (res) => {
if(typeof res === 'string')
{
state.previewImage = res
} else {
state.previewImage = URL.createObjectURL(res)
}
state.cropperVisible = false
};
const onCancel = () => {
state.cropperVisible = false
};
return {
...toRefs(state),
onChange,
onSave,
onCancel
};
}
}
Props
tips:
选择图片后浏览器自动刷新问题：
这个问题是由于图片太大，超过了浏览器内存限制，被浏览器强制刷新释放内存导致的，可以适当的调整maxImgSize小一些，
内部会根据这个值创建一个图片进行裁剪(主要是手机端，pc一般不会出现这个问题)
截图质量：
如果要无损图可以设置imageType="image/png", 图片不会进行任何压缩，缺点是体积太大.
如果觉得截取的图片太大，可以设置imageType="image/jpeg"，调整图片质量quality 0-1 数字越小图片质量越差,体积也会越小.
透明图片：
设置imageType="image/png"，其他格式不支持透明
截图尺寸,清晰度问题:
默认输出原图尺寸，截取的部分是相对原图的那部分的尺寸,优点高清损耗低，缺点体积过大。
如果需要缩放尺寸,设置mode="scale" 就是图片缩放后在裁剪框内的那部分尺寸, 优点体积小，缺点损耗大
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| cropSize | 裁剪框默认大小 | Number | 200 |
| imagePath | 裁剪图路径(可以是本地图片、图片数据源、远程图片需配置跨域) | string | |
| fileType | 输出文件的类型(base64、blob) | String | base64 |
| imageType | 输出图片的格式(image/jpeg、image/png、image/webp)其中 image/webp 只有 chrome 才支持 | String | image/jpeg |
| quality | 输出图片的质量(0-1)并且只在格式为 image/jpeg 或 image/webp 时才有效，如果参数值格式不合法，将会被忽略并使用默认值。 | Number | .9 |
| fixedBox | 固定裁剪框,设置true裁剪框不可修改 | Boolean | false |
| showOutputSize | 展示输出图片的尺寸 | boolean | true |
| mode | 裁剪模式(scale 缩放模式)，不设置则按照原图尺寸输出 | String | |
| maxImgSize | 图片最大尺寸(超过这个值会被自动压缩在这个范围内，保证手机端移动不会出现卡顿现象,如果不需要限制设置成null) | Number | 2000 |
Event
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| cancel | 点击取消触发 | Function | |
| save | 点击裁剪,处理完毕后触发,并携带裁剪好的图片数据 | (res)=>{} |
2021-01-19 更新
新增pc鼠标事件，可兼容pc端
2021-01-17 重大更新
新增图片最大尺寸限制：maxImgSize 解决移动端超大图片拖动卡顿现象。
新增自动识别图片方向，利用图片原始数据手动校正图片角度，避开浏览器校正， 解决各平台图片显示角度不一致的问题。
优化了裁剪流程，减少了canvas的使用。
2021-01-10 更新
新增裁剪模式mode="scale" 按照缩放后的尺寸输出图片。默认按照原图尺寸输出图片，
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
Found 0/7 approved changesets -- score normalized to 0
Reason
no SAST tool detected
Details
- Warn: no pull requests merged into dev branch
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'main'
Reason
89 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
- Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-2j2x-2gpw-g8fm
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-4q6p-r6v2-jvc5
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
- Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-g6ww-v8xp-vmwg
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
- Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
1.3
/10
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More