picture-tools v1.0.48

picture-tools

描述

图片裁切增强工具包

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

打包成应用

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

安装引用步骤

yarn add picture-tools
&
npm i -S picture-tools

import PictureTools from "picture-tools";
import "picture-tools/dist/picture-tools.css";
Vue.use(PictureTools)

<picture-tools
  ref="test"
  v-if="isShow"
  :show.sync="isShow"
  :imgUrl="url"
  :data="testData"
  @imgData="getCoverMapImgData"
></picture-tools>

方法说明

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

2、保存按钮
@cutSave = "fn"

3、删除按钮
@delete = "fn"

4、反显操作列表(data，为imgData返回的数据, 如果不传data则用组件自己临时存储数据)
this.$refs.test.initHandleList(data)

5、从父组件清除组件内记录的临时存储数据 type = "H169"
this.$refs.test.delHandleList(list,type)

数据说明

// 传入的参数
props: {
    // 裁剪功能的名称
    title: {
      type: String,
      default: "封面图裁剪工具"
    },
    // 图片上传接口参数
    uploadData: {
      type: Object,
      default: () => {
        return {
          url: "http://183.192.162.29:18901/openapi/media-editor/imageUpload", // 请求路径
          accessToken: "", // 请求token
          imgUploadTypeName: 'fileupload', // 图片上传FormData对象 图片信息名称
          tokenName: 'accessToken' // 图片上传FormData对象 token名称
        };
      }
    },
    // 裁剪的图片路径
    imgUrl: {
        type: String,
        default: ""
    },
    // 展示与关闭弹框
    show: {
      type: Boolean,
      default: false
    },
    // 裁剪传入的其他数据，如图片类型（上传或者裁剪）等数据
    data: {
        type: Object,
        default: () => {
            return {}
        }
    }
}

// 返回的参数结构说明
{
    origin: this.originalImg, // 传入的图片源地址
    coverData: datas // 工具裁剪增强数据
}

// coverData数据说明
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: "", // 裁剪的图片路径
    initData: {}, // 传入组件内临时数据，可以用来记录是上传还是裁剪等不做业务处理 如果this.data.type = "upload" 为本地上传的图片时，返回服务端返回的结果 否则不返回此字段
    imageType: "4", // 裁剪的类型 如16：9图片
    width: 500, // 裁剪图片的宽度
    height: 300 // 裁剪图片的高度
}