Watch 1 Star 0 Fork 8

fanger / vue-picture-cutTypeScriptMIT

forked from 光年以外 / vue-picture-cut 
Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
基于vue和typescript开发的一款图片剪裁处理工具 spread retract

Clone or download
Loading...
README.md

vue-picture-cut 2.x

基于vuetypescript开发的一款图片剪裁处理工具
优点:原生、轻量、使用简单、功能全面、扩展性强

2.0.0-alpha.0版本发布

github主页
码云主页
demo演示(github)
demo演示(码云)

💩💩💩0.x版本点这里【此版本bug太多,不再维护】

一、使用方法

通过npm安装插件

npm i vue-picture-cut@2.0.0-alpha.0

在vue中使用

1、在main.js中全局引用

import Vue from 'vue';
import 'vue-picture-cut/lib/vue-picture-cut.css';
import VuePictureCut from 'vue-picture-cut';

Vue.user(VuePictureCut);

2、或者在.vue文件中单独引用

<template>
  <div>
	<input type="file" accept="image/*" @change="inputChange"/>
    <vue-picture-cut class="cut" :src="src" @on-change="cutChange"/>
  </div>
</template>

<script>
  import 'vue-picture-cut/lib/vue-picture-cut.css';
  import { VuePictureCut } from 'vue-picture-cut';

  export default {
    // ...
    components: {
      VuePictureCut
    },
    data () {
      return {
        src: null,
        blob: null,
        base64: null
      }
    },
    methods: {
      inputChange(e) {
        const file = e.target.files[0];
        this.src = URL.createObjectURL((file));
      },
      /**
       * @param blob      BLOB对象
       * @param base64    base64字符串
       */
      cutChange({ blob, base64 }) {
        this.blob = blob;
        this.base64 = base64;
      }
    }
    // ...
  }
</script>

3、注意

组件在使用时,宽高跟随父级标签,所以需要设置父级标签的宽高。

二、API

1、基本使用

属性Attribute

...待编辑

事件Events

...待编辑

2、其他工具类

2.1 Bezier对象

  import { Bezier } from 'vue-picture-cut';

  const bezier = Bezier();
  bezier.setOpt(Bezier.BEZIER['ease-in-out']);
  const y = bezier.getPoint(0.5);
  console.log(y);
(1) 静态属性BEZIER,是一个键值对,包含一些预设值
说明
linear [0.0, 0.0, 1.0, 1.0] 线性过渡
ease [0.25, 0.1, 0.25, 1.0] 平滑过渡
ease-in [0.42, 0, 1.0, 1.0] 由慢到快
ease-out [0, 0, 0.58, 1.0] 由快到慢
ease-in-out [0.42, 0, 0.58, 1.0] 由慢到快再到慢
(2) 构造函数

一个无参的构造函数,内部调用了setOptByString('ease')方法

(3) 方法
方法名 说明 参数 返回值
setOpt 设置贝塞尔曲线类型 (arg: string , ParamsInterface = 'ease') Bezier对象本身
setOptByString 设置贝塞尔曲线类型 BEZIER预设值(arg = 'ease') Bezier对象本身
setOptByArr 设置贝塞尔曲线类型 (x1: number, y1: number, x2: number, y2: number) Bezier对象本身
getPoint 返回x坐标对应的y坐标值 (x: number) 0~1之间 对应y坐标,0~1之间
(4) 参数ParamsInterface说明

ParamsInterface为包含4个number类型的数组。

2.2 createAnimation方法

  import { createAnimation } from 'vue-picture-cut';

  const animation = createAnimation(option);

createAnimation会返回一个Animation对象

(1) 参数option
参数 说明 类型 可选值 必需 默认值
duration 动画持续时间,单位毫秒 number —— false 1000
timing 动画的过渡类型 string、number[] Bezier.BEZIER中的值,或者ParamsInterface类型 false ease
delay 动画的延迟时间,单位毫秒 number —— false 0
iteration 动画循环次数,infinite为无限循环 number、string 'infinite'或正整数 false 0
direction 动画在循环中是否反向运动 string normal(默认,正向运动);reverse(反向运行);alternate(先正向,后反向,并交替);alternate-reverse(先反向,后正向,并交替)。 false normal
change 回调函数,接收参数x,x在0~1之间,动画在这里处理 Function —— false ——
end 回调函数,动画结束时执行 Function —— false ——
(2) Animation对象方法
方法名 说明 参数 返回值
start 开始动画 —— Animation对象本身
abort 中止动画 —— ——

2.3 Tool对象

  import { Tool } from 'vue-picture-cut';

  Tool.loadImg('http://xxx.xxx.xxx/xxx.jpg')
  .then(image => {
    // 加载图片成功
    // image为Image对象
  }, image => {
    // 加载图片失败
  });
包含方法

...待编辑

3、自定义扩展

...待编辑

三、希望大家都来用一下

VuePictureCut 💗 you!

Comments ( 0 )

Sign in for post a comment

TypeScript
1
https://gitee.com/xiaofanger/vue-picture-cut.git
git@gitee.com:xiaofanger/vue-picture-cut.git
xiaofanger
vue-picture-cut
vue-picture-cut
master

Search