vue图片裁剪组件_使用Vue-Rx的Vue.js图像裁剪组件
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 --saveneed 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 namedefault: '_imgPreviewLists'*/
})(2)单独导入组件 ((2) separately import components)
install vue-rx and it's peer dependency rxjs
安装vue-rx及其对等依赖性rxjs
$npm install --save vue-rx rx-jsuse 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()参数
Resulting-canvas-size
结果画布大小
| 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$.widthSlot
插槽
| 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图片裁剪组件
vue图片裁剪组件_使用Vue-Rx的Vue.js图像裁剪组件相关推荐
- vue图片裁剪组件_Vue.js图像裁剪组件
vue图片裁剪组件 Vuejs夹 (vuejs-clipper) Vue.js image clipping components using Vue-Rx. 使用Vue-Rx的Vue.js图像裁剪组 ...
- pls-00302: 必须声明 组件_手把手教你开发vue组件库
前言 Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完 从0到1教你搭建前端团队的组件系统 之后很多朋友希望了解一下如何搭建基于vue的组件系统,所以作为这篇文 ...
- vue 嵌套表格组件_使用form-create动态生成vue自定义组件和嵌套表单组件
使用form-create动态生成vue自定义组件和嵌套表单组件 maker.create 通过建立一个虚拟 DOM的方式生成自定义组件 生成 Maker let rule = [ formCreat ...
- vue 数字动画递增_数字滚动动画效果 vue组件化
主要思路是利用css属性writing-mode:vertical-lr:通过设定最大字符长度,补零,去循环,然后添加style translate和transition来完成想要的效果: 子组件根据 ...
- vue data数据修改_史上最强vue总结，万字长文
vue框架篇 vue的优点 轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb: 简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习: 双向数据绑定:保留了angular ...
- vue和react相同点_我在React和Vue中创建了相同的应用程序。 这是区别。
vue和react相同点 by Sunil Sandhu 由Sunil Sandhu 我在React和Vue中创建了相同的应用程序. 这是区别. (I created the same app in ...
- vue 启动时卡死_十分钟浅入Vue 原理
vue原理 引用 众所周知vue是一个MVVM 渐进式框架,MVVM是vue的设计模式,在vue框架中数据会自动驱动视图. 1.MVVM设计模式 解释 View是视图,就是DOM:对应视图也就是H ...
- vue 箭头函数兼容性_前端学习计划之VUE学习（二）
创建一个实例 每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的: 数据与方法 当Vue实例按照上述方式被创建时,Vue的响应式系统中就加入了data对象,在使用中可以直接通过属性的调用方式 ...
- vue 大数据 渲染_技术专栏 | DMap——实战Vue百万条数据渲染表格组件开发
作者:TalkingData 李志刚 本文由TalkingData原创,转载请获取授权. 李志刚:近几个月在开发一个基于Vue的数据可视化分析辅助应用---DMap(谛听),一套为数据分析师和数据科学 ...
最新文章
- 用python写计算机专业_自学open cv，用Python写的，本人是一名学生党，因为我本专业不是搞计算机的_cc霜_学生党_教育_教育其他...
- 写给Python开发者：机器学习十大必备技能
- Sumatra项目用OpenCL提高了Java的性能
- 从神经质症的发生发展过程找到走出焦虑的途径
- MySQL-Xtrabackup备份还原
- python中对象的概念是什么_简述Python中的面向对象编程的概念
- 机器学习的训练数据(Training Dataset)、测试数据(Testing Dataset)和验证数据(Validation Dataset)
- 只需修改一个像素，让神经网络连猫都认不出 | 论文+代码
- 测测实际带宽,预防使用“假带宽”
- 机器人改变生活利弊英语作文_左手建筑右手餐饮，机器人如何改变大众生活？ 圆梦人感言...
- 江民科技召开临时董事会 王江民之子接手管理
- mysql常用数据操作之查
- 字符串与Unicode编码相关转换
- 什么是股市泡沫或楼市泡沫?泡沫何解?
- 还不错，字母成熟了些！
- 2022年四川省外贸综合服务企业认定材料流程
- adb安装apk到手机
- 点云处理：Kitti数据集中点云坐标转化到彩色摄像机坐标
- C# string格式化（小数点保留/进制转换等）
- Java7技术系列：DI依赖注入