vue-picture-cut | 基于Vue和TypeScript开发的图片剪裁插件

vue-picture-cut是一个基于Vue.js的图片裁剪组件，它提供了一个可视化的图片裁剪界面，支持鼠标和触摸操作，可以让用户轻松地裁剪图片。

vue-picture-cut图片剪裁处理工具，支持缩放、翻折、旋转、边缘校验、矩形剪裁、任意(椭)圆剪裁等多种功能，且扩展性很强。

使用方法

安装

如果您想使用vue-picture-cut图片裁剪组件，首先您需要安装它，命令如下：

npm install vue-picture-cut
		

使用

在main.js中全局引用

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

Vue.use(VuePictureCut);
		

或者在vue文件中单独引用

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

components: {
  VuePictureCut
},


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

import VuePictureCut from 'vue-picture-cut';

export default {
  components: {
    VuePictureCut
  },
  data() {
    return {
      imageUrl: 'https://example.com/my-image.jpg'
    };
  },
  methods: {
    onChange(blob, base64) {
      console.log(blob, base64);
    }
  }
};
		

配置参数

vue-picture-cut支持以下配置参数：

• src：默认：null，图片链接。
• magnification：默认：1.5，画布绘制缩放率，取值大于0，值越大绘制的逻辑像素越高。
• initAngle：载入图片的初始旋转角度。
• maxPixel：导出图片的宽高中较长边的像素，不传时则依据实际图片大小自适应。
• encoderOptions：导出图片的压缩率，不传时按0.8计算，取值范围0~1。
• format：默认：false，导出图片的格式，不传时导出格式为“image/jpeg”，其值可以为“image/png”等浏览器支持格式。
• mskOption：默认值：{ width: 1, height: 1, isRound: false, resize: true}
  • width：number 裁剪框比例宽
  • height：number 裁剪框比例高
  • isRound：boolean 矩形true，椭圆false
  • resize：boolean 裁剪框大小是否可通过拖动改变大小
  • color：string 遮罩颜色
  • borderColor：string 裁剪框颜色
• rotateControl：默认：false，是否显示旋转控件。
• menuPosition：默认：bottom，菜单栏位置，取值：top、bottom、left、right。
• menuThickness：menuPosition取top、bottom时表示菜单栏高度，menuPosition取left、right时表示菜单栏高度宽度，取值大于0，等于0时隐藏菜单栏。
• backgroundColor：组件背景色。

github网址：https://github.com/987153776/vue-picture-cut