npmpackage.info

Gathering detailed insights and metrics for vue3-cropper

Other packages similar to vue3-cropper

vue-picture-cropper

0.7.0

A simple and easy-to-use picture cropping component for Vue 3.

v3-cropper

1.2.1

vue3图像裁剪组件

maitao-vue-cropper

1.0.10-7

A simple Vue picture clipping plugin

vue-cropper-emiyagm

0.0.21

A simple Vue picture clipping plugin

vue3-cropper

基于vue3的图片裁剪组件

0.4.0

Vue

1.56 MB

4,354 1.3

Installations

npm install vue3-cropper

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

14.8.0

NPM Version

6.14.7 Score

60.8

Supply Chain

Quality

75.3

Maintenance

100

Vulnerability

99.6

License

Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

7

Total

7

Closed

0

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View All 1 Contributors

Languages

Vue

JavaScript

HTML

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

Last Week

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

NPM Version

6.14.7

Node Version

14.8.0

Total Downloads

Cumulative downloads

Total Downloads

4,354

Last Day

400%

Compared to previous day

Last Week

-31.4%

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

Dependencies

core-js vue

Dev Dependencies

@vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-plugin-unit-mocha @vue/cli-service @vue/compiler-sfc @vue/test-utils babel-eslint chai eslint eslint-plugin-vue sass sass-loader

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.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

0

SAST

Determines if the project uses static code analysis.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

License

Determines if the project has defined a license.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

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