cover-map v1.0.3

cover-map

描述

图片裁切增强工具包

含图片裁切功能、图片增强功能、字幕添加功能

打包成应用

1、npm run lib
2、npm login
3、npm publish

安装引用步骤

yarn add cover-map
&
npm i cover-map

import CoverMap from "cover-map";
import "cover-map/dist/cover-map.css";
Vue.use(CoverMap)

<cover-map ref="test" :msg="test" @cover="coverFn"></cover-map>

方法说明

1、返回图片操作后的列表
@imgData = "自定义方法"

2、反显操作列表(data，为imgData返回的数据)
this.$refs.test.initHandleList(data)

数据说明

// 传入的参数
props: {
    // 裁剪的图片路径
    imgUrl: {
        type: String,
        default: ""
    },
    // 展示与关闭弹框
    show: {
      type: Boolean,
      default: false
    },
    // 裁剪传入的其他数据，如图片类型（上传或者裁剪）等数据
    data: {
        type: Object,
        default: () => {
            return {}
        }
    }
}

// 返回的参数

output: {
    imageType: '4', // 裁剪的类型 如16：9图片
    imageScale: 0.8, // 相对于图片的缩放比例
    abilities: [
        // 裁剪数据
        {
            baseHeight: 548
            baseWidth: 940
            height: 528
            type: "crop"
            width: 940
            x: 0
            y: 10
        },
        // 图片增强数据亮度等
        {
            brightness: "0.00"
            contrast: "1.00"
            saturation: "1.00"
            type: "eq"
        },
        // 图片增强灰度
        {
            luma_amount: "0.00"
            type: "ff_unsharp"
        }
    ],
    material: [{
            type: "logo",
            logoPath: "", // 字幕贴图路径
            x: 0, // 距离左侧顶点的距离
            y: 0, // 距离左侧顶点的距离
            width: 500, // 裁剪图片宽度
            height: 300, // 裁剪图片高度
            baseWidth: 1000, // 原图的宽度
            baseHeight: 500 // 原图的高度
          }]
},
showData: {
    url: "", // 裁剪的图片路径
    imageType: "4", // 裁剪的类型 如16：9图片
    width: 500, // 裁剪图片的宽度
    height: 300 // 裁剪图片的高度
}