vue图片裁剪组件_Vue.js图像裁剪组件

公西光华

2023-12-01

vue图片裁剪组件

Vuejs夹 (vuejs-clipper)

Vue.js image clipping components using Vue-Rx.

使用Vue-Rx的Vue.js图像裁剪组件。

View demo 查看演示 Download Source 下载源

Add image clipping components to your Vue application in nothing flat.
无需任何操作即可将图像剪辑组件添加到Vue应用程序。
Touch devices supported and fully responsive.
触摸设备受支持且响应Swift。

版本发布 (Version Released)

0.2.7
0.2.7
- fixed build scripts.
  固定的构建脚本。
0.2.6
0.2.6
- clipper-fixed has new prop: round.
  快船固定有新的支撑：圆形。
- input when uploading the same file.input 。
- update examples at the homepage.
  在主页上更新示例。
0.2.5
0.2.5
- URL.revokeObjectURL to release memory.URL.revokeObjectURL释放内存。
- Fixed clipper-range two way binding.
  修复了Clipper-range双向绑定的问题。
0.2.4
0.2.4
- Fixed clipper-basic initial clip area size over the container.
  在容器上固定Clipper基本初始裁剪区域的大小。
- Update readme (imgRatio).
  更新自述文件(imgRatio)。
0.2.3
0.2.3
- update package.json
  更新package.json
0.2.2
0.2.2
- Fixed clipper-fixed bug: load event not call
  修复了Clipper修复的错误：无法调用加载事件
0.2.1
0.2.1
- new component clipper-upload
  新组件Clipper-Upload
- add error/load event to clipper-basic/clipper-fixed
  将错误/加载事件添加到clipper-basic / clipper-fixed
- correct and update readme
  更正并更新自述文件
0.1.1
0.1.1
- add license
  添加许可证
- use travis-ci build
  使用travis-ci构建
- delete some unused-vars
  删除一些未使用的变量
0.1.0
0.1.0
- First Released
  首次发布

注意 (Notice)

Before using the plugin & components, here's something you should know :

在使用插件和组件之前，您应该了解以下几点：

It's based on vue-rx.
它基于vue-rx 。
Use vuejs-clipper plugin also add vue-rx plugin to vue.
使用vuejs-clipper插件还将vue-rx插件添加到vue。
Components are responsive base on width instead of height.
组件根据宽度而不是高度做出响应。
You can clip your own images (local uploaded images or images served on your site), but you cannot clip a cross-origin image.
您可以剪切自己的图像(本地上传的图像或站点上提供的图像)，但不能剪切跨源图像。
Components' input is an image URL, output is a canvas element, they only help you clip images to canvas, you need to handle other things like transform file input to image URL or transform output canvas to image by yourself.
组件的输入是图像URL，输出是canvas元素，它们仅帮助您将图像剪切到画布，您需要处理其他事情，例如将文件输入文件转换为图像URL或将输出画布转换为图像 。

安装 (Installation)

NPM和ESM (NPM & ESM)

install vuejs-clipper

安装vuejs-clipper

$npm install vuejs-clipper --save

need sass-loader, if you haven't installed :

如果尚未安装，则需要sass-loader：

$npm install -D sass-loader node-sass

(1)使用vuejs-clipper插件 ((1) use vuejs-clipper plugin)

use vuejs-clipper plugin also add vue-rx plugin to Vue.

使用vuejs-clipper插件还将vue-rx插件添加到Vue。

将所有组件注册到Vue全球范围

import Vue from 'vue'
import VuejsClipper from 'vuejs-clipper'
// install
Vue.use(VuejsClipper)

使用默认组件名称将某些组件注册为全局组件

Vue.use(VuejsClipper ,{
    components: {
        clipperBasic: true,
        clipperPreview: true
    }
})

with customized component name

具有定制的组件名称

Vue.use(VuejsClipper ,{
    components: {
        clipperBasic: 'image-clipper-basic',
        clipperPreview: 'my-preview'
    }
})

not register any components, but with some plugin options

没有注册任何组件，但是带有一些插件选项

Vue.use(VuejsClipper ,{
    parentPropName: 'myCustomerName',
    components: null
})

(2)单独导入组件 ((2) separately import components)

install vue-rx and it's peer dependency rxjs

安装vue-rx及其对等依赖性rxjs

$npm install --save vue-rx rx-js

use vue-rx

使用vue-rx

import Vue from 'vue'
import VueRx from 'vue-rx'
// install vue-rx
Vue.use(VueRx)

then import in your components (SFC)

然后导入您的组件(SFC)

import { clipperBasic, clipperPreview } from 'vuejs-clipper'

export default {
    components: {
      clipperBasic,
      clipperPreview
    }
}

脚本 (Script)

Include vuejs-clipper umd script after Vue.js.

在Vue.js之后包含vuejs-clipper umd脚本。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="./dist/vuejs-clipper.umd.min.js"></script>
<link rel="stylesheet" href="./dist/vuejs-clipper.css">

在html / template中使用 (Use in html/template)

<clipper-basic src="example.jpg"></clipper-basic>

组件 (Components)

See detail examples.

请参阅详细示例。

快船基本 (clipper-basic)

a image clipping component

图像裁剪组件

import { clipperBasic } from 'vuejs-clipper'

Props
道具

Prop	Type	default	Description
src	string		image src
preview	string		matches `clipper-preview`'s name to show preview image.
border	number	1	border width
outline	number	6	outlines near by the border to help user zooming.
corner	boolean	true	show corner layout
grid	boolean	true	show grid layout
ratio	number		ratio of clipping area (width/height). ex: `1`, `4/3` .
mode	'normal'/'switch'	'normal'	if ratio is set, this prop will affect how clipping area zoom.
bg-color	string	'white'	background color
shadow	string	'rgba(0,0,0,0.4)'	shadow color
rotate	number	0	rotate degree
scale	number	1	transform scale
touch-create	boolean	true	enable/disable create new clipping area on touch device

Struts	类型	默认	描述
src	串		图像src
预习	串		匹配`clipper-preview`的名称以显示预览图像。
边境	数	1个	边框宽度
大纲	数	6	边框附近的轮廓，以帮助用户缩放。
角	布尔值	真正	显示角落布局
格	布尔值	真正	显示网格布局
比	数		裁剪区域的比率(宽度/高度)。例如： `1` ， `4/3` 。
模式	'正常'/'切换'	'正常'	如果设置了比例，此道具将影响裁剪区域的缩放方式。
背景色	串	'白色'	背景颜色
阴影	串	'rgba(0,0,0,0.4)'	阴影颜色
旋转	数	0	旋转度
规模	数	1个	转换比例
触摸创建	布尔值	真正	启用/禁用在触摸设备上创建新的裁剪区域

Methods
方法

method	argument	return	Description
clip		canvas element	get clipping canvas element

方法	论据	返回	描述
夹		画布元素	获取剪贴画画布元素

set ref to use component methods

设置引用以使用组件方法

<clipper-basic ref="clipper"></clipper-basic>

in your Vue instance methods

在您的Vue实例方法中

const canvas = this.$refs.clipper.clip()

Event
事件

event	parameters	Description
load	$event	image onload
error	$error	image onerror

事件	参数	描述
加载	$ event	图片载入
错误	$错误	图片错误

usage :

用法：

<clipper-basic @error="errorCb" @load="loadCb"></clipper-basic>

Data
数据

data	type	default	description
imgRatio	number	NaN	upload image's ratio (image naturalWidth/natrualHeight). Default value is NaN, after the load event the value will be set.

数据	类型	默认	描述
imgRatio	数	N	上载图片的比例(图片naturalWidth / natrualHeight)。默认值为NaN，在加载事件后将设置该值。

usage :

用法：

this.$refs.clipper.imgRatio

Slot
插槽

slot	Description
placeholder	if no `src` provided, show placeholder

插槽	描述
占位符	如果未提供`src` ，则显示占位符

<clipper-basic src="">
  <div slot="placeholder">No image</div>
</clipper-basic>

快船固定 (clipper-fixed)

an image clipping component

图像裁剪组件

import { clipperFixed } from 'vuejs-clipper'

Props
道具

Prop	Type	default	Description
src	string		image src
preview	string		matches `clipper-preview`'s name to show preview image.
ratio	number	1	ratio of clipping area (width/height). ex: `1`, `4/3` .
zoomRate	number	0.04	zooming faster if this value is larger
min-scale	number	0.1	minimum transform scale
border	number	1	border width
grid	boolean	true	show grid layout
round	boolean	false	Use a round clipping area, this only effect the component layout, clipping results are still rectangular.
bg-color	string	'white'	background color
shadow	string	'rgba(0,0,0,0.4)'	shadow color
rotate	number	0	rotate degree

Struts	类型	默认	描述
src	串		图像src
预习	串		匹配`clipper-preview`的名称以显示预览图像。
比	数	1个	裁剪区域的比率(宽度/高度)。例如： `1` ， `4/3` 。
zoomRate	数	0.04	如果此值较大，则变焦更快
最小尺度	数	0.1	最小变换尺度
边境	数	1个	边框宽度
格	布尔值	真正	显示网格布局
回合	布尔值	假	使用圆形修剪区域，这仅影响组件布局，修剪结果仍为矩形。
背景色	串	'白色'	背景颜色
阴影	串	'rgba(0,0,0,0.4)'	阴影颜色
旋转	数	0	旋转度

Method
方法

method	argument	return	Description
clip		canvas element	get clipping canvas element

方法	论据	返回	描述
夹		画布元素	获取剪贴画画布元素

Event
事件

event	parameters	Description
load	$event	image onload
error	$error	image onerror

事件	参数	描述
加载	$ event	图片载入
错误	$错误	图片错误

Data
数据

data	type	default	description
imgRatio	number	NaN	upload image's ratio (image naturalWidth/natrualHeight). Default value is NaN, after the load event the value will be set.

数据	类型	默认	描述
imgRatio	数	N	上载图片的比例(图片naturalWidth / natrualHeight)。默认值为NaN，在加载事件后将设置该值。

Slot
插槽

slot	Description
placeholder	if no `src` provided, show placeholder

插槽	描述
占位符	如果未提供`src` ，则显示占位符

快船预览 (clipper-preview)

preview clipping result

预览剪辑结果

import { clipperPreview } from 'vuejs-clipper'

Props
道具

Prop	Type	default	Description
name	string		name that matches clipper component's preview property

Struts	类型	默认	描述
名称	串		与Clipper组件的Preview属性匹配的名称

Slot
插槽

slot	Description
placeholder	if no `src` provided, show placeholder

插槽	描述
占位符	如果未提供`src` ，则显示占位符

限幅器 (clipper-range)

a simple input range component

一个简单的输入范围组件

import { clipperPreview } from 'vuejs-clipper'

use v-model binding data with clipper-range

将v-model绑定数据与clipper-range

Props
道具

Prop	Type	default	Description
max	number	10	maximum value of range
min	number	10	minimum value of range

Struts	类型	默认	描述
最高	数	10	范围最大值
分	数	10	范围的最小值

快船上载 (clipper-upload)

a new component in 0.2.0

0.2.0中的新组件

an upload button that transform image files to URL

一个将图像文件转换为URL的上传按钮

import { clipperUpload } from 'vuejs-clipper'

use v-model binding data with clipper-upload

在clipper-upload使用v-model绑定数据

Props
道具

Prop	Type	default	Description
check	boolean	true	Check if upload file is a image. If set to `true`, when upload files that are not images, it will do nothing, so you will not get an error event on clipping component.

Struts	类型	默认	描述
检查	布尔值	真正	检查上传文件是否为图像。如果设置为`true` ，则当上传不是图像的文件时，它将不执行任何操作，因此不会在裁剪组件上发生错误事件。

翻译自: https://vuejsexamples.com/vue-js-image-clipping-components/