开源插件Vue裁剪图片（包含裁剪，缩放，本地下载，上传等）

简介

大家好，我是六六。基于之前写的项目对于裁剪功能做一个补充并抽离出来做一个插件，希望大家能够喜欢。有问题和不足的地方欢迎大家来留言。

github地址：github.com/6sy/caijian…

个人开源：

1. load-vue(定制化+趣味性的加载动画插件)
2. 开源插件之滑块验证

功能展示：

选择照片：

缩放：

展示：

本地下载：

演示代码模板：

<template>
  <div id="app">
    <caijian ref='caijian' :isShow='isShow'></caijian>
    <!-- 演示 -->
    <button @click='chose'>选择图片</button>
     <button  @click='show'>展示图片</button>
     <button @click='down'>下载图片</button>
     <button>上传图片</button>
     <div>
        <img :src="img" alt="">
     </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
        isShow:false,
    img:''
    }
  },
  methods:{
    chose(){
      this.$refs.caijian.iptClick()
      this.isShow=true
    },
    show(){
       this.img=this.$refs.caijian. localhostShow()
    },
    down(){
      this.$refs.caijian.localhostDown()
    }
  }
}
</script>

<style>
#app{
  margin-top:200px;
  margin-left:200px;
}
</style>

安装:

// npm 下载
npm install caijian-vue --save

// main.js
import caijian from 'caijian-vue'
Vue.use(caijian)

//全局使用
<caijian ref='caijian' :isShow='isShow'></caijian>

传参说明：

属性名	类型	描述
canvasWidth	Number	画布的长度，默认375
canvasHeight	Number	画布的高度，默认375
boxSide	Number	裁剪框的边长，默认100
smallSide	Number	裁剪框最小边长，默认100
smallSide	Number	裁剪框最大边长，默认300
isShow	Boolean	裁剪框的隐藏与显示，默认为false,使用时必须传入true让其显示，参照模板使用

事件使用：

给caijian元素定义一个ref，参照模板使用：

选择照片：

this.$refs.caijian.iptClick()

展示照片:

this.img=this.$refs.caijian.localhostShow()
localhostShow方法返回一个包含 data URI 的DOMString

本地下载:

this.$refs.caijian.localhostDown()

上传照片：

1.可以通过之前localhostShow方法生成的data URI 的DOMString自行上传


2.this.$refs.caijian.chooseImgToUpload(callback)
callback第一个参数为图像信息

以下为上传的逻辑：
// 照片选择完毕,上传
    chooseImgToUpload (callback) {
      const canvas = document.querySelector('.canvas1')
      const ctx = canvas.getContext("2d")
      canvas.width = this.chooseSide
      canvas.height = this.chooseSide
      ctx.putImageData(this.chooseRgb, 0, 0)
      this.uploadImg(canvas,callback)
    },
    // 上传图片
    uploadImg (canvas,callback) {
      canvas.toBlob(async (blob) => {
        let fd = new FormData()
        fd.append('file', blob)
        fd.name = new Date().getTime()
        callback(fd)												//回调在这里运行
      }, 'image/png')

总结：

不太懂的可以去看github上面的代码，应该比较好看的懂。喜欢的可以点个赞哦。不懂的也可以留言哈~