rui-vue-image-crop-upload

v2.5.18

a vue plgin for image upload and crop（vue图片剪裁上传插件） For more information about how to use this package see README

Latest version published 5 years ago

License: ISC

NPM

GitHub

Package Health Score

51 / 100

security
No known security issues
popularity
Small
maintenance
Inactive
community
Sustainable

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

All Versions

Version				Vulnerabilities	License Risk
2.5.18	\|	08/2019		0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

ISC

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Small

Weekly Downloads (1)

GitHub Stars: 2.08K
Forks: 367
Contributors: 40

Direct Usage Popularity

The npm package rui-vue-image-crop-upload receives a total of 1 downloads a week. As such, we scored rui-vue-image-crop-upload popularity level to be Small.

Based on project statistics from the GitHub repository for the npm package rui-vue-image-crop-upload, we found that it has been starred 2,084 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Sustainable

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 40
Funding: No

With more than 10 contributors for the rui-vue-image-crop-upload repository, this is possibly a sign for a growing and inviting community.

We found a way for you to contribute to the project! Looks like rui-vue-image-crop-upload is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Inactive

Commit Frequency

No Recent Commits

Open Issues: 94
Open PR: 26
Last Release: 5 years ago
Last Commit: 4 years ago

Further analysis of the maintenance status of rui-vue-image-crop-upload based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Inactive.

An important project maintenance signal to consider for rui-vue-image-crop-upload is that it hasn't seen any new versions released to npm in the past 12 months, and could be considered as a discontinued project, or that which receives low attention from its maintainers.

In the past month we didn't find any pull request activity or change in issues status has been detected for the GitHub repository.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: not defined

Age: 5 years
Dependencies: 1 Direct
Versions: 16
Install Size: 1.77 MB
Dist-tags: 1
# of Files: 23
Maintainers: 1
TS Typings: No

rui-vue-image-crop-upload has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

vue-image-crop-upload

A beautiful vue component for image crop and upload. （vue图片剪裁上传组件）.

Notice: This component is designed for pc, not recommended for use on the mobile side.(该组件适用于pc端，不推荐手机端使用)

中文文档在后面

Change log

@2.5.0

added http method prop (thanks @sarco3t)

@2.4.0

Added the src-file-set event, emit event when file is selected (thanks @choruru)

@2.3.3

Added the Swedish language pack (thanks @hekin1)
Added the Myanmar language pack (thanks @tintnaingwinn)

@2.3.2

Added the Thai language pack (thanks @godxavia)

@2.3.1

Added the Uygur language pack (thanks @oyghan)

@2.3.0

If the exported picture is in jpg format, the background is white by default, and you can customize it with the "imgBgc" attribute. If it is png, the default transparent color
Optimized image rotation
Added the Italian language pack (thanks @phaberest)
Added the Arabic language pack (thanks @barakat-turki)
Added the Ukrainian language pack (thanks @dvomaks)

@2.2.3

Added the Japanese language pack (thanks @KangYoosam)

@2.2.2

Added the German language pack (thanks @attx)

@2.2.1

Added the Chinese Traditional language pack (thanks @s950329)

@2.1.0

Strengthen the function of image rotation and does not display square preview picture

@2.0.5

Added the spanish MX language pack (thanks @vickvasquez)

@2.0.4

Added the Turkish language pack (thanks @smhayhan)

@2.0.2

Added the Dutch language pack (thanks @blyleven)

@2.0.1

If url prop is empty, the picture will not be uploaded

@2.0.0

Adjust the import mode for different versions of vue, The default vue version is vue2
Added the French language pack (thanks @valerymelou)
Added the Portuguese (Brazil) language pack (thanks @abensur)

@1.3.5

Added the Romanian language pack (thanks @doriandrn)

@1.3.0

Added the Russian language pack (thanks @bigperson)
Added a new Props: "headers" (Used to set the POST request header)

@1.2.0

Compatible vue2

@1.1.0

Adjusted Props naming: "otherParams"=>"params", "langConf"=>“langExt”
Optimized language packs

Demo

Click me.

Screenshot

screenshot

Brower compatibility

IE10+

Env

vue@1/vue@2 + webpack + es6

Install

npm

$ npm install vue-image-crop-upload

Usage

Props

Name	Type	Default	Description
url	String	''	Server api path,like "/avatar/upload", If empty, will not be uploaded
method	String	'POST'	request http method
field	String	'upload'	Upload input filename, used for server side get the file stream.
value	Boolean	twoWay	show or not
params	Object	null	POST Params，like "{k:v}"
headers	Object	null	POST request header，like "{k:v}"
langType	String	'zh'	language type
langExt	Object		language extend
width	Number	200	width of receive image
height	Number	200	height of receive image
imgFormat	string	'png'	jpg/png, Server api receive file type.
imgBgc	string	'#fff'	background color, if the imgFormat prop is jpg
noCircle	Boolean	false	disable circle preview
noSquare	Boolean	false	disable square preview
noRotate	Boolean	true	disable rotate function
withCredentials	Boolean	false	support cross-domain

Events

Name	Description
srcFileSet	Once you've selected the file, params( fileName, fileType, fileSize )
cropSuccess	image crop success, params( imageDataUrl, field )
cropUploadSuccess	upload success, params( jsonData, field )
cropUploadFail	upload fail, params( status, field )

Language package

Support language	Shorthand	Contributors
中文（default）	zh	dai-siki
繁体中文	zh-tw	s950329
English	en	dai-siki / doriandrn
Russian	ru	bigperson
Romanian	ro	doriandrn
Portuguese (Brazil)	pt-br	abensur
French	fr	valerymelou
Dutch	nl	blyleven
Turkish	tr	smhayhan
spanish MX	es-MX	vickvasquez
German	de	attx
Japanese	ja	KangYoosam
Italian	it	phaberest
Arabic	ar	barakat-turki
ukrainian	ua	dvomaks
Uyghur	ug	oyghan
Thai	th	godxavia
Myanmar	mm	tintnaingwinn
Swedish	se	hekin1

// example
{
    en: {
        hint: 'Click or drag the file here to upload',
        loading: 'Uploading…',
        noSupported: 'Browser is not supported, please use IE10+ or other browsers',
        success: 'Upload success',
        fail: 'Upload failed',
        preview: 'Preview',
        btn: {
            off: 'Cancel',
            close: 'Close',
            back: 'Back',
            save: 'Save'
        },
        error: {
            onlyImg: 'Image only',
            outOfSize: 'Image exceeds size limit: ',
            lowestPx: 'Image\'s size is too low. Expected at least: '
        }
    }
}

Example vue@2

<div id="app">
	<a class="btn">set avatar</a>
	
	<img>
</div>

Example vue@1

<div id="app">
	<a class="btn">set avatar</a>
	
	<img>
</div>

中文文档

更新日志

@2.4.0

增加了“src-file-set”回调事件，在用户选择文件之后触发。

@2.3.0

如果导出图片格式为jpg，则背景默认白色，你也可以通过新增的“imgBgc”属性自定义。如果导出格式为png，则默认透明
优化了旋转效果

@2.1.0

增加了图片旋转和不显示方形预览图片的功能

@2.0.0

默认支持版本改为vue2，vue1的同学需要引入upload-1.vue

@1.3.0

添加了新属性: "headers" (用于设置请求头部：setRequestHeader)

@1.2.0

兼容vue@2版本

@1.1.0

调整了Props命名: "otherParams"=>"params", "langConf"=>"langExt"

示例

点我.

截图

screenshot

浏览器兼容

IE10+

配置环境

vue@2（或vue@1） + webpack + es6

安装

npm

$ npm install vue-image-crop-upload

使用

Props

名称	类型	默认	说明
url	String	''	上传接口地址，如果为空，图片不会上传
method	String	'POST'	上传方法
field	String	'upload'	向服务器上传的文件名
value	Boolean	twoWay	是否显示控件，双向绑定
params	Object	null	上传附带其他数据，格式"{k:v}"
headers	Object	null	上传header设置，格式"{k:v}"
langType	String	'zh'	语言类型，默认中文
langExt	Object		语言包自行扩展
width	Number	200	最终得到的图片宽度
height	Number	200	最终得到的图片高度
imgFormat	string	'png'	jpg/png, 最终得到的图片格式
imgBgc	string	'#fff'	导出图片背景色,当imgFormat属性为jpg时生效
noCircle	Boolean	false	关闭圆形图像预览
noSquare	Boolean	false	关闭方形图像预览
noRotate	Boolean	true	关闭旋转图像功能
withCredentials	Boolean	false	支持跨域

Events

名称	说明
srcFileSet	用户选取文件之后, 参数( fileName, fileType, fileSize )
cropSuccess	图片截取完成事件（上传前), 参数( imageDataUrl, field )
cropUploadSuccess	上传成功，参数( jsonData, field )
cropUploadFail	上传失败，参数( status, field )

自带语言包

{
    zh: {
        hint: '点击，或拖动图片至此处',
        loading: '正在上传……',
        noSupported: '浏览器不支持该功能，请使用IE10以上或其他现在浏览器！',
        success: '上传成功',
        fail: '图片上传失败',
        preview: '头像预览',
        btn: {
            off: '取消',
            close: '关闭',
            back: '上一步',
            save: '保存'
        },
        error: {
            onlyImg: '仅限图片格式',
            outOfSize: '单文件大小不能超过 ',
            lowestPx: '图片最低像素为（宽*高）：'
        }
    }
}

使用示例 vue@1

<div id="app">
	<a class="btn">设置头像</a>
	
	<img>
</div>

使用示例 vue@2

<div id="app">
	<a class="btn">设置头像</a>
	
	<img>
</div>

rui-vue-image-crop-upload dependencies

babel-runtime

FAQs

What is rui-vue-image-crop-upload?

a vue plgin for image upload and crop（vue图片剪裁上传插件）. Visit Snyk Advisor to see a full health score report for rui-vue-image-crop-upload, including popularity, security, maintenance & community analysis.

Is rui-vue-image-crop-upload popular?

The npm package rui-vue-image-crop-upload receives a total of 1 weekly downloads. As such, rui-vue-image-crop-upload popularity was classified as small. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is rui-vue-image-crop-upload well maintained?

We found indications that rui-vue-image-crop-upload is an Inactive project. See the full package health analysis to learn more about the package maintenance status.

Is rui-vue-image-crop-upload safe to use?

The npm package rui-vue-image-crop-upload was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 22 November-2024, at 12:05 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP

Package Health Score

Explore Similar Packages

Security and license risk for significant versions

Is your project affected by vulnerabilities?

Weekly Downloads (1)

Direct Usage Popularity

Embed Package Health Score Badge

Commit Frequency

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Readme

vue-image-crop-upload

中文文档在后面

Change log

@2.5.0

@2.4.0

@2.3.3

@2.3.2

@2.3.1

@2.3.0

@2.2.3

@2.2.2

@2.2.1

@2.1.0

@2.0.5

@2.0.4

@2.0.2

@2.0.1

@2.0.0

@1.3.5

@1.3.0

@1.2.0

@1.1.0

Demo

Screenshot

Brower compatibility

Env

Install

npm

Usage

Props

Events

Language package

Example vue@2

Example vue@1

中文文档

更新日志

@2.4.0

@2.3.0

@2.1.0

@2.0.0

@1.3.0

@1.2.0

@1.1.0

示例

截图

浏览器兼容

配置环境

安装

npm

使用

Props

Events

自带语言包

使用示例 vue@1

使用示例 vue@2

rui-vue-image-crop-upload dependencies

rui-vue-image-crop-upload development dependencies

FAQs

What is rui-vue-image-crop-upload?

Is rui-vue-image-crop-upload popular?

Is rui-vue-image-crop-upload well maintained?

Is rui-vue-image-crop-upload safe to use?

Build a secure application checklist

Select a recommended open source package

Scan your app for vulnerabilities

Source Code

Open Source

Container