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。

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 ,{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/

vue图片裁剪组件

vue图片裁剪组件_Vue.js图像裁剪组件相关推荐

  1. vue 幻灯片组件_vue.js的幻灯片组件

    vue 幻灯片组件 Vue幻灯片放映 (vue-slideshows) a slideshow component for vue.js. vue.js的幻灯片组件. 安装 (Installation ...

  2. vue图片裁剪组件_使用Vue-Rx的Vue.js图像裁剪组件

    vue图片裁剪组件 Vuejs夹 (vuejs-clipper) Vue.js image clipping components using Vue-Rx. 使用Vue-Rx的Vue.js图像裁剪组 ...

  3. vue 移动端头像裁剪_vue头像上传裁剪组件_一个漂亮的Vue组件，用于图像裁剪和上传...

    vue头像上传裁剪组件 vue-image-crop-upload (vue-image-crop-upload) A beautiful vue component for image crop a ...

  4. html图片自动剪裁,HTML canvas图像裁剪

    canvas drawImage方法的图像裁剪理解可能会比较耗时,记录一下,以便供人翻阅! context.drawImage(img,sx,sy,swidth,sheight,x,y,width,h ...

  5. vue树形权限菜单_Vue.js 递归组件实现树形菜单（实例分享）

    最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = tr ...

  6. vue树形权限菜单_Vue.js 递归组件实现树形菜单

    最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. main.js 作为入口: import Vue from 'vue' import main from './components/ ...

  7. vue请求数据传给子组件_vue.js基础，父组件如何向子组件传递数据「607」

    本文只有一个学习点. 父组件如何向子组件传递数据. 一起学习,更多文章请关注我的头条号,我是落笔承冰. 一.先创建一张空白网页index.html,在head标签里设置好vue的链接库. 二.写一个绑 ...

  8. vue 父传子_Vue.js教程Vue基本指令

    前言 本文仅介绍基本常用指令(不包括自定义指令和相应的修饰符,这两个以后再写). 再附上官方API文档,大家也可以去看官方解释,更全面更具体.VueAPI 本文所有指令写在views文件夹下的Home ...

  9. vuejs 传参 向 子组件 父组件_VUe.js 父组件向子组件中传值及方法

    父组件向子组件中传值 1.  Vue实例可以看做是大的组件,那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系. 2. 父子组件在默认的情况下,子组件是无妨访问到父组件中的数据的,所以 ...

最新文章

  1. matlab丢失icuuc54,icuuc56.dll下载|
  2. ubuntu获取root权限
  3. 鲜为人知的C++ IO fstream流
  4. (JAVA学习笔记) 接口
  5. WinForm界面开发之布局控件WeifenLuo.WinFormsUI.Docking的使用
  6. python标准库（一）
  7. WPF TextBox只能输入数字
  8. SpringCloud:汇总(Gradle项目)
  9. office2013 应用程序无法正常启动(0xc000007b)
  10. 《我是一只IT小小鸟》阅读笔记
  11. 单点登录原理及简单实现
  12. 卸载office 2016 报错：错误1321
  13. 各位前辈请问你们的本科毕业论文的外文文献都是从哪里找的，我搜到的都是中国的翻译成英语的？...
  14. 【《Real-Time Rendering 3rd》 提炼总结】(二) 第二章 · 图形渲染管线 The Graphics Rendering Pipeline
  15. linux的dep文件是什么意思,DEP 文件扩展名： 它是什么以及如何打开它？
  16. 双网口以太网IO模块的优势
  17. python df删除特定行_pandas.DataFrame删除/选取含有特定数值的行或列实例
  18. 螺旋图形Linux,一个实例带你熟练使用UG中的螺旋线，新手必备！
  19. 年金、净现值NPV、IRR、现值PV、终值FV、EAR等常见概念
  20. 操作系统对线程的调度问题；CFS

热门文章

  1. 如何生成一个安卓和苹果都能识别的二维码
  2. inshot怎么转gif_inshot怎么用 教你照片视频制作技巧
  3. 是男人就挺过二十秒源代码
  4. 密码学原理-篇1：古典密码学
  5. 05_MySQL笔记-配置文件-连接方式-密码破解-存储引擎-SQL语句分类
  6. opencv/openmv识别三角形思路（识别多边形）
  7. AI的入门圣经，PRML最全资源合集（含讲解以及中译版）
  8. 精彩回顾：BSV区块链应用创新汇（深圳站）于上周末成功举办
  9. java小数转换成分数_如何将小数转换为分数？
  10. 固体继电器与接触器的工作原理、区别和应用