Gathering detailed insights and metrics for vue-img-cutter-ctw
Gathering detailed insights and metrics for vue-img-cutter-ctw
简单易用的vue图片裁剪插件，支持移动图像，裁剪图片，放大缩小图片，上下左右移动，固定比例，固定尺寸，远程图片裁剪，只需要很少的代码就可以实现裁剪功能，也可以通过调整参数以适应你自己的业务需求。
Installations
npm install vue-img-cutter-ctwDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Min. Node Version
>= 6.0.0
Node Version
12.16.2
NPM Version
6.14.4
Releases
12
Languages
3
Vue
JavaScript
HTML
Vue (95.12%)
JavaScript (4.22%)
HTML (0.65%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
533 Stars
235 Commits
80 Forks
5 Watchers
4 Branches
4 Contributors
Updated on Jul 14, 2025
Maintainers
1
Package Meta Information
Latest Version
2.0.36
Package Id
vue-img-cutter-ctw@2.0.36
Unpacked Size
79.61 kB
Size
18.72 kB
File Count
5
NPM Version
6.14.4
Node Version
12.16.2
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Dev Dependencies
40
autoprefixerbabel-corebabel-helper-vue-jsx-merge-propsbabel-loaderbabel-plugin-syntax-jsxbabel-plugin-transform-runtimebabel-plugin-transform-vue-jsxbabel-preset-envbabel-preset-stage-2chalkcopy-webpack-plugincss-loaderextract-text-webpack-pluginfile-loaderfriendly-errors-webpack-pluginhtml-webpack-pluginjs-yamllodashmemmixin-deepnode-notifieroptimize-css-assets-webpack-pluginoraportfinderpostcss-importpostcss-loaderpostcss-urlrimrafsemverset-valueshelljsuglifyjs-webpack-pluginurl-loadervue-loadervue-style-loadervue-template-compilerwebpackwebpack-bundle-analyzerwebpack-dev-serverwebpack-merge
vue-img-cutter
简单易用的vue图片裁剪插件，支持旋转、缩放、平移，固定比例，固定尺寸，远程图片裁剪，只需要很少的代码就可以实现裁剪功能，也可以通过调整参数以适应你自己的业务需求。
特色：
- 兼容IE9+,MSEdge,Chrome,Firefox
- 两种展现形式，行内或弹窗
- 可旋转、缩放图片
- 任意比例、大小裁剪
- 固定比例、大小裁剪
- 支持远程图片裁剪、跨域设置
插件截图：
演示地址：
https://ihtmlcss.com/demo/dist/#/croptool
项目地址：
Github：https://github.com/acccccccb/vue-img-cutter
码云：https://gitee.com/GLUESTICK/vue-img-cutter
如果此项目对你有帮助，请给我一个star :)
使用方法：
- 安装
1npm install vue-img-cutter --save-dev
- 将ImgCutter.vue文件引入项目：
1import ImgCutter from 'vue-img-cutter' 2export default { 3 components:{ 4 ImgCutter 5 }, 6... 7}
- 在页面中使用：
1<ImgCutter v-on:cutDown="cutDown"></ImgCutter>
- 可使用solt
1<ImgCutter v-on:cutDown="cutDown"> 2 <button slot="open">选择图片</button> 3</ImgCutter>
- 远程、跨域裁剪（兼容IE9）
需要自己写一个方法来触发裁剪工具弹出 在方法中先将图片上传至服务器，拿到返回的url后创建一个obj，然后将对象传入裁剪工具
1// 传入的obj必须包含这四个属性 2let obj = { 3 name:'1.jpg',//远程图片名称 4 src:'http://url/1.jpg',//远程图片url 5 width:200,//远程图片的原始宽度 6 height:200,//远程图片的原始高度 7}
1forIe9:function(){ 2 // 此处需要先提交待裁剪的图片到服务器上，然后拿到图片name,src,width,height,这些参数必须传 3 uploadMethod(file).then((res)=>{ 4 this.$refs.imgCutterModal.handleOpen({ 5 name:res.name, 6 src:res.src, 7 width:res.width, 8 height:res.height, 9 }); 10 }); 11}
参数说明：
| 属性名 | 作用 | 类型 | 必填 | 默认值 |
|---|---|---|---|---|
| isModal | 是否为弹窗模式 | Boolean | 否 | true |
| showChooseBtn | 是否显示选择图片按钮 | Boolean | 否 | true |
| lockScroll | 是否在Dialog出现时将body滚动锁定 | Boolean | 否 | true |
| label | 默认打开裁剪工具按钮的显示文字 | String | 否 | 选择图片 |
| boxWidth | 裁剪工具宽度 | Number | 否 | 800 |
| boxHeight | 裁剪工具高度 | Number | 否 | 400 |
| cutWidth | 默认裁剪宽度 | Number | 否 | 200 |
| cutHeight | 默认裁剪高度 | Number | 否 | 200 |
| tool | 是否显示工具栏 | Boolean | 否 | true |
| toolBgc | 工具栏背景色 | String(例: "#fff") | 否 | #fff |
| sizeChange | 是否能够调整裁剪框大小 | Boolean | 否 | true |
| moveAble | 能否调整裁剪区域位置 | Boolean | 否 | true |
| originalGraph | 是否直接裁剪原图 | Boolean | 否 | false |
| crossOrigin | 是否设置跨域，需要服务器做相应更改 | Boolean | 否 | false |
| crossOriginHeader | 设置跨域信息crossOrigin为true时才生效 | String | 否 | '' |
| rate | 图片比例 | String(例: "4:3") | 否 | - |
| cutDown | 完成截图后要执行的方法 | Function | 是 | - |
| error | 错误回调 | Function | 否 | - |
支持slot，在组件内部使用带有slot="open"属性的元素即可自定义打开组件的按钮
插槽(slot)：
| 插槽名称 | 作用 |
|---|---|
| open 或 openImgCutter | 弹出裁剪框 |
| choose | 选择本地图片 |
| cancel | 取消/清空 |
| confirm | 确认裁剪 |
返回值：
| 属性名 | 类型 |
|---|---|
| fileName | 文件名 |
| file | file类型的文件对象（IE部分版本可能不会返回） |
| blob | blob类型的文件对象（IE部分版本可能不会返回） |
| dataURL | dataURL |
开发中功能：
- 原图裁剪 开发中
捐赠:
更新日志：
2.1.0
- 新增属性：originalGraph，originalGraph等于true时裁剪原图，不支持图像旋转
- 修复非弹窗模式下无法使用鼠标滚轮缩放图片的问题
2.0.30
- 修复了选区超出画布的问题
2.0.29
- 优化了裁剪控件的操作体验
- 当裁剪宽度/高度小于20时隐藏四边中间的操作杆
2.0.28
- 调整了版本号显示的位置
- 新增三个插槽：choose/cancel/confirm
- 新增属性：工具栏背景色 toolBgc
- 将裁剪框限制在画布内
2.0.27
- 修正了裁剪远程图片时创建的img对象被显示出来的问题
- 修正了在IE浏览器下点击取消按钮报错的问题
- 远程图片加载失败时不弹出裁剪工具
2.0.26
- 修正了当没有选择图片直接选择取消会导致错误的问题
2.0.25
- 更新说明文档
2.0.24
- 简化了兼容IE9的方法，只需要在执行this.$refs['yourComponent'].handleOpen(imgObj)时传入对象，对象必须包含name,src,width,height属性
- 修正了行内模式下鼠标滚轮缩放失效的问题
- 增加了跨域参数
- 增加了 error 参数，将会返回错误信息
2.0.23
- 新增参数isModal/showChooseBtn/lockScroll
- 可选择作为行内组件或者弹窗组件，可选是否显示选择图片按钮，是否在弹窗打开时锁定body滚动
2.0.22
- 兼容IE9+,MSEdge,chrome,firefox
- 由于没有找到IE11以下的浏览器，所以只能在仿真模式下测试，所以IE11以下可能会出现一些我没发现的问题，目前仿真模式下IE9+都测试通过了。IE8及以下不再支持。
- 如果需要兼容IE9，需要先将图片上传到服务器上，然后执行this.$refs['yourComponent'].handleOpen(callback);
- 添加了importImgToCanv方法来兼容IE9，必须在执行handleOpen后才能执行
- 拖动，调整选框时会自动隐藏工具栏
- 稍微调整了下样式，增加了动态的蚂蚁线
2.0.21
- 兼容IE8+,MSEdge,chrome,firefox
- 新增了设置参数，可固定裁剪框位置，固定裁剪尺寸，具体请看参数说明
- 修复了非IE系浏览器不返回file对象的问题
2.0.20
- 兼容IE11+,MSEdge。IE11以下版本未测试
2.0.19
- 修改了返回值，现在将追加返回文件名和file类型的文件对象
2.0.18
- 修复了点击选择图片按钮时有一定几率刷新页面的问题
2.0.17
- 调整了样式
- 修正了弹窗超出屏幕后被遮挡的问题
2.0.16
- 修正了旋转工具条显示错误的问题
2.0.15
- 增加工具栏 可对图片进行旋转/缩放操作
- 优化了动画效果
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 2/29 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
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 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 3 are checked with a SAST tool
Reason
45 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-9r9m-ffp6-9x4v
- Warn: Project is vulnerable to: GHSA-hjwq-mjwj-4x6c
- 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-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- 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-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh
- Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- 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-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-p2ph-7g93-hw3m
- 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
Score
1.7
/10
Last Scanned on 2025-07-07
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