Installations
npm install vue3-cropperDeveloper Guide
Typescript
No
Module System
CommonJS
Node Version
14.8.0
NPM Version
6.14.7
Score
60.8
Supply Chain
98
Quality
75.3
Maintenance
100
Vulnerability
99.6
License
Releases
Unable to fetch releases
Contributors
Unable to fetch Contributors
Languages
Vue (79.81%)
JavaScript (18.71%)
HTML (1.48%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
dreamicalwestswim
Download Statistics
Total Downloads
4,354
Last Day
5
Last Week
24
Last Month
161
Last Year
1,357
GitHub Statistics
33 Stars
7 Commits
4 Forks
3 Watchers
1 Branches
1 Contributors
Updated on Dec 19, 2024
Maintainers
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,354
Last Day
400%
5
Compared to previous day
Last Week
-31.4%
24
Compared to previous week
Last Month
4.5%
161
Compared to previous month
Last Year
43.3%
1,357
Compared to previous year
Daily Downloads
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
no SAST tool detected
Details
- Warn: no pull requests merged into dev branch
Reason
Found 0/7 approved changesets -- score normalized to 0
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
84 existing vulnerabilities detected
Details
- 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-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-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-76p7-773f-r4q5
- 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-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-02-17
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