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



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部