vue图片裁剪组件
Vuejs夹 (vuejs-clipper)
Vue.js image clipping components using Vue-Rx.
使用Vue-Rx的Vue.js图像裁剪组件。
Add image clipping components to your Vue application in nothing flat.
无需任何操作即可将图像剪辑组件添加到Vue应用程序。
Touch devices supported and fully responsive.
触摸设备受支持且响应Swift。
注意 (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, see Component Layout.
组件根据宽度而不是高度进行响应,请参阅组件布局 。
You can clip your own images (local uploaded images or images served on your site), but you cannot clip a cross-origin image unless the image server set the CORS headers.
您可以裁剪自己的图像(本地上传的图像或站点上提供的图像),但是除非图像服务器设置了CORS标头,否则您不能裁剪跨源图像。
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 css loader, ex: sass-loader
, if you haven't installed :
需要css loader,例如: 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。
By default it will register all components to Vue global scope.
默认情况下,它将所有组件注册到Vue全局范围。
import Vue from 'vue'
import VuejsClipper from 'vuejs-clipper'
// install
Vue.use(VuejsClipper)
register some components to global with default component name
使用默认组件名称将某些组件注册为全局组件
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, {
components: null,
parentPropName: 'myCustomerName'
/*
parentPropName:
Add property to Vue instance to store `clipper-preview` list.
You can change the property name
default: '_imgPreviewLists'
*/
})
(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">
Use in html/template
在html / template中使用
<clipper-basic src="example.jpg"></clipper-basic>
组件 (Components)
See detail examples.
请参阅详细示例 。
快船基本 (clipper-basic)
an 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 . | |
wrap-ratio | number | NaN | ratio of clipping container (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 |
min-width | number | 1 | minimum width(%) of clipping box related to clipping component's width |
min-height | number | 1 | minimum height(%) of clipping box related to clipping component's height. |
init-width | number | 50 | clipping area's width(%) when the image loaded. |
init-height | number | 50 | clipping area's height(%) when the image loaded. |
touch-create | boolean | true | enable/disable create new clipping area on touch device |
cross-origin | string | undefined | crossorigin attribute of <img /> inside clipper. ex: anonymous |
Struts | 类型 | 默认 | 描述 |
---|---|---|---|
src | 串 | 图像src | |
预习 | 串 | 匹配clipper-preview 的名称以显示预览图像。 | |
边境 | 数 | 1个 | 边框宽度 |
大纲 | 数 | 6 | 边框附近的轮廓,以帮助用户缩放。 |
角 | 布尔值 | 真正 | 显示角落布局 |
格 | 布尔值 | 真正 | 显示网格布局 |
比 | 数 | 裁剪区域的比率(宽度/高度)。 例如: 1 , 4/3 。 | |
包裹率 | 数 | N | 裁剪容器的比率(宽度/高度)。 例如: 1 , 4/3 。 |
模式 | '正常'/'切换' | '正常' | 如果设置了比例,此道具将影响裁剪区域的缩放方式。 |
背景色 | 串 | '白色' | 背景颜色 |
阴影 | 串 | 'rgba(0,0,0,0.4)' | 阴影颜色 |
旋转 | 数 | 0 | 旋转度 |
规模 | 数 | 1个 | 转换比例 |
最小宽度 | 数 | 1个 | 裁剪框的最小宽度(%),与裁剪组件的宽度有关 |
最小高度 | 数 | 1个 | 剪辑框的最小高度(%),与剪辑组件的高度有关。 |
初始宽度 | 数 | 50 | 加载图像时裁剪区域的宽度(%)。 |
初始高度 | 数 | 50 | 加载图像时裁剪区域的高度(%)。 |
触摸创建 | 布尔值 | 真正 | 启用/禁用在触摸设备上创建新的裁剪区域 |
跨源 | 串 | 未定义 | crossorigin 中<img /> crossorigin 属性。 例如: anonymous |
For more detail about the layout settings, pleases see Component layout in depth.
有关布局设置的更多详细信息,请参阅深入的组件布局 。
Methods
方法
method | argument | return | description |
---|---|---|---|
clip | options | canvas element | get clipping canvas element |
getDrawPos | {pos, translate} : positions and transformation | get result canvas information |
方法 | 论据 | 返回 | 描述 |
---|---|---|---|
夹 | 选项 | 画布元素 | 获取剪贴画画布元素 |
getDrawPos | {pos, translate} :职位和转变 | 获取结果画布信息 |
clip()
arguments
clip()
参数
name | type | default | description |
---|---|---|---|
options.wPixel | number | undefined | Set the the width (pixel) of result canvas. |
options.maxWPixel | number | undefined | Set the the maximum width (pixel) of result canvas. |
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
options.wPixel | 数 | 未定义 | 设置结果画布的宽度(像素)。 |
options.maxWPixel | 数 | 未定义 | 设置结果画布的最大宽度(像素)。 |
set ref to use component methods
设置引用以使用组件方法
<clipper-basic ref="clipper" />
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" />
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. |
zoomTL$ | object | clipping area's position(%), can be top/bottom and left/right. | |
zoomWH$ | object | clipping area's width and height(%) |
数据 | 类型 | 默认 | 描述 |
---|---|---|---|
imgRatio | 数 | N | 上载图片的比例(图片naturalWidth / natrualHeight)。 默认值为NaN,在加载事件后将设置该值。 |
zoomTL $ | 目的 | 剪切区域的位置(%),可以在顶部/底部和左侧/右侧。 | |
zoomWH $ | 目的 | 裁剪区域的宽度和高度(%) |
usage :
用法:
this.$refs.clipper.imgRatio
this.$refs.clipper.zoomWH$.width
Slot
插槽
slot | description |
---|---|
placeholder | if no src provided, show placeholder |
插槽 | 描述 |
---|---|
占位符 | 如果未提供src ,则显示占位符 |
<clipper-basic src="">
<div slot="placeholder">No image</div>
</clipper-basic>
rxjs Subject
rxjs主题
subject | description |
---|---|
setTL$ | Set the position of the zooming area. |
setWH$ | Set the width and height of the zooming area. |
onChange$ | Subject that subscribe to zooming, moving and rotating subjects. |
学科 | 描述 |
---|---|
setTL $ | 设置缩放区域的位置。 |
setWH $ | 设置缩放区域的宽度和高度。 |
onChange $ | 订阅缩放,移动和旋转主题的主题。 |
usage:
用法:
this.$refs.clipper.setTL$.next({ left: 0, top: 0 }) // percentage 0%
this.$refs.clipper.setTL$.next({ right: 0, bottom: 10 })
this.$refs.clipper.setWH$.next({ width: 100, height: 100 }) // percentage 100%
this.$refs.clipper.onChange$.subscribe(() => {
// This happens whenever zooming, moving and rotating occur.
})
快船固定 (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 . |
zoom-rate | number | 0.04 | zooming faster if this value is larger |
min-scale | number | 0.1 | minimum transform scale |
border | number | 1 | border width |
border-color | string | 'white' | border color |
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 |
area | number | 50 | width or height (%) of clipping box(depends on ratio). |
cross-origin | string | undefined | crossorigin attribute of <img /> inside clipper. ex: anonymous |
Struts | 类型 | 默认 | 描述 |
---|---|---|---|
src | 串 | 图像src | |
预习 | 串 | 匹配clipper-preview 的名称以显示预览图像。 | |
比 | 数 | 1个 | 裁剪区域的比率(宽度/高度)。 例如: 1 , 4/3 。 |
缩放率 | 数 | 0.04 | 如果此值较大,则变焦更快 |
最小尺度 | 数 | 0.1 | 最小变换尺度 |
边境 | 数 | 1个 | 边框宽度 |
边框颜色 | 串 | '白色' | 边框颜色 |
格 | 布尔值 | 真正 | 显示网格布局 |
回合 | 布尔值 | 假 | 使用圆形修剪区域,这仅影响组件布局,修剪结果仍为矩形。 |
背景色 | 串 | '白色' | 背景颜色 |
阴影 | 串 | 'rgba(0,0,0,0.4)' | 阴影颜色 |
旋转 | 数 | 0 | 旋转度 |
区 | 数 | 50 | 剪辑框的宽度或高度(%)(取决于比率)。 |
跨源 | 串 | 未定义 | crossorigin 中<img /> crossorigin 属性。 例如: anonymous |
Method
方法
method | argument | return | description |
---|---|---|---|
clip | options | canvas element | get clipping canvas element. |
getDrawPos | {pos, translate} : positions and transformation | get result canvas information |
方法 | 论据 | 返回 | 描述 |
---|---|---|---|
夹 | 选项 | 画布元素 | 获取剪贴画布元素。 |
getDrawPos | {pos, translate} :职位和转变 | 获取结果画布信息 |
clip()
arguments
clip()
参数
name | type | default | description |
---|---|---|---|
options.wPixel | number | undefined | Set the the width (pixel) of result canvas. |
options.maxWPixel | number | undefined | Set the the maximum width (pixel) of result canvas. |
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
options.wPixel | 数 | 未定义 | 设置结果画布的宽度(像素)。 |
options.maxWPixel | 数 | 未定义 | 设置结果画布的最大宽度(像素)。 |
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. |
bgTL$ | object | image's translate(X,Y) | |
bgWH$ | number | image's scaling |
数据 | 类型 | 默认 | 描述 |
---|---|---|---|
imgRatio | 数 | N | 上载图片的比例(图片naturalWidth / natrualHeight)。 默认值为NaN,在加载事件后将设置该值。 |
bgTL $ | 目的 | 图片的翻译(X,Y) | |
bgWH $ | 数 | 图像缩放 |
Slot
插槽
slot | description |
---|---|
placeholder | if no src provided, show placeholder |
插槽 | 描述 |
---|---|
占位符 | 如果未提供src ,则显示占位符 |
rxjs Subject
rxjs主题
subject | description |
---|---|
setTL$ | Set the top and left of the image. |
setWH$ | Set the sizing(scaling) of the image. |
onChange$ | Subject that subscribe to zooming, moving and rotating subjects. |
学科 | 描述 |
---|---|
setTL $ | 设置图像的顶部和左侧。 |
setWH $ | 设置图像的尺寸(缩放)。 |
onChange $ | 订阅缩放,移动和旋转主题的主题。 |
usage:
用法:
this.$refs.clipper.setTL$.next({ left: 50, top: 50 }) // percentage 0%
this.$refs.clipper.setWH$.next(0.6) // transform scale(0.6)
this.$refs.clipper.onChange$.subscribe(() => {
// This happens whenever zooming, moving and rotating occur.
})
快船预览 (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 { clipperRange } 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 | 0 | minimum value of range |
Struts | 类型 | 默认 | 描述 |
---|---|---|---|
最高 | 数 | 10 | 范围最大值 |
分 | 数 | 0 | 范围的最小值 |
快船上载 (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 an 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. |
accept | string | '*' | Bind accept attribute to file input tag. |
exif | boolean | true | Transform EXIF image to correct orientation when uploading. |
Struts | 类型 | 默认 | 描述 |
---|---|---|---|
检查 | 布尔值 | 真正 | 检查上传文件是否为图像。 如果设置为true ,则当上传不是图像的文件时,它将不执行任何操作,因此不会在裁剪组件上发生错误事件。 |
接受 | 串 | '*' | 将accept 属性绑定到文件输入标签。 |
exif | 布尔值 | 真正 | 上传时将EXIF图像转换为正确的方向。 |
Event
事件
event | parameters | description |
---|---|---|
input | $event | Result domgstring on change |
事件 | 参数 | 描述 |
---|---|---|
输入 | $ event | 结果更改后的domgstring |
Data
数据
data | type | default | description |
---|---|---|---|
file | File Object | null | Uploaded file's original File Object. |
数据 | 类型 | 默认 | 描述 |
---|---|---|---|
文件 | 文件对象 | 空值 | 上载文件的原始文件对象。 |
翻译自: https://vuejsexamples.com/vue-js-image-clipping-components-using-vue-rx/
vue图片裁剪组件