Nervous Penpal Message

    vue-image-filler

    1.0.4 • Public • Published

    vue-image-filler

    图像[填充]剪裁工具 [ Vue Image clipping tool ]

    vue-image-filler 是一款用于图像剪裁的工具,交互设计更为轻便简洁。与传统自由拖拽的图像剪裁工具不同的是,她更适用于限定输出尺寸的场景。

    在常见的头像上传、缩略图生成、物料生成等功能皆可用它来完成。

    效果截图

    截图

    开发设置

    你可以从 dist 目录选择适合你项目的模块文件,独立引入,当然我们更推荐你通过 npm 安装使用。

    通过 npm 安装模块

    npm install vue-image-filler --save
    // 全局注册模块
    import ImageFiller from 'vue-image-filler'
     
    Vue.use(ImageFiller)
     
    // or
     
    // 局部注册
    import {ImageFiller} from 'vue-image-filler'
     
    new Vue({
      data: {
        // ...
      },
      components: {
        ImageFiller
      },
      methods: {
        // ...
      }
    })

    如何使用

    模版定义

    <ImageFiller
      :width="900"
      :height="600"
      @confirm="handleFillerSuccuss"
    />

    图像剪裁完成事件监听

    handleFillerSuccuss: function (data) {
      console.log('fileBlob: 裁切画面对应的 blob 数据')
      console.log('file: 裁切画面文件,可直接用于上传保存')
      console.log('config: 裁切参数配置,可用于传递给其他服务,均是水平、垂直方向上的相对比值')
      console.log('------------------------')
      console.log(data)
     
      // 生成预览图片地址
      let previewImageUrl = URL.createObjectURL(data.fileBlob)
      // 上传剪裁后的文件
      let formData = new FormData()
      formData.append('upload', data.file)
    }

    Install

    npm i vue-image-filler

    DownloadsWeekly Downloads

    3

    Version

    1.0.4

    License

    ISC

    Unpacked Size

    236 kB

    Total Files

    14

    Last publish

    Collaborators

    • bh-lay