background 图片比例缩小_一款移动pc友好又强大的vue图片裁剪插件

vue-picture-cut 2.x

基于vue和typescript开发的一款图片剪裁处理工具
优点：原生、轻量、使用简单、功能全面、扩展性强
目前功能：缩放、翻折、旋转、边缘校验、矩形剪裁、任意(椭)圆剪裁
关于缩放：鼠标（鼠标滚轮缩放）、触屏（双指缩放）

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

【升级日志】

一、使用方法

通过npm安装插件

npm install vue-picture-cut

在vue中使用

1、在main.js中全局引用

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

Vue.use(VuePictureCut);

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

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

<script>
  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>

<style>
  @import "~vue-picture-cut/lib/vue-picture-cut.css";
</style>

3、注意

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

二、API

暴露的对象

全局引入时

import VuePictureCut from 'vue-picture-cut';
Vue.use(VuePictureCut);

此时会注册：VuePictureCut、VuePictureCutMask、VuePictureCutMenu三个组件。

独立引用

import {
    
  VuePictureCut,
  VuePictureCutMask,
  VuePictureCutMenu,
  Bezier,
  createAnimation,
  Tool,
  createUtils
} from 'vue-picture-cut';

组件：VuePictureCut、VuePictureCutMask、VuePictureCutMenu。 工具类：Bezier、createAnimation、Tool、createUtils。

1、VuePictureCut组件

slot插槽： default、menu

使用：

/demo/demo1.html
/demo/demo2.html

<template>
  <vue-picture-cut
    ref="pictureCut"
    :src="src"
    :magnification="magnification"
    :init-angle="initAngle"
    :msk-option="mskOption"
    :max-pixel="maxPixel"
    :encoder-options="encoderOptions"
    :format="format"
    :rotate-control="rotateControl"
    :menu-position="menuPosition"
    :menu-thickness="menuThickness"
    :background-color="backgroundColor"
    @on-change="onChange"
  />
</template>

属性：

1. src：类型：string默认：null描述：图片链接
2. magnification：类型：number默认：1.5描述：画布绘制缩放率，取值大于0，值越大绘制的逻辑像素越高