图片实现裁剪功能vue-img-cutter

ゞ浴缸里的玫瑰 2023-05-28 06:59 17阅读 0赞

源码：[添加链接描述][Link 1]  
演示地址，可生成对应组件属性：[添加链接描述][Link 2]

## 一、选择图片时直接实现裁剪功能 ##

1、安装

npm install vue-img-cutter --save-dev

2、引入

import ImgCutter from 'vue-img-cutter'
    export default {
            components:{
                ImgCutter
            },
    ...
    }

3、在页面中使用：

//裁剪后触发上传事件
    xztpCutDown(fileName) {
            let that = this
            console.log(fileName, fileName.dataURL, '确定裁剪后的base64')
            var imgGs = fileName.dataURL.split(';')[0].split('/')[1]
            var file = this.dataURLtoBlob(fileName.dataURL, '裁剪图片.' + imgGs)
            console.log(file, 'file')//裁剪后file文件
            var formData = new FormData()
            formData.append('file', file)
            this.axios.post('/admin/sys-file/upload', formData).then((res) => {//上传服务器
              addPicLibraryObj({   //保存后台数据库
                type: 1,//1图片，2视频
                groupId: that.groupId != '-1' ? that.groupId : null,
                languageId: that.languageID,
                name: '裁剪图片.' + imgGs,
                url: that.baseImgUrl+ res.data.data.bucketName + '/' + res.data.data.fileName
              }).then(function() {
                that.$message.success(that.$t("rfbutton.uploadImg")+' '+that.$t("successText"))
                that.getPage(that.page)
              })
            })
          },
          //将base64转换为file
          dataURLtoBlob: function(dataurl, name) {
            var arr = dataurl.split(','),
              mime = arr[0].match(/:(.*?);/)[1],
              bstr = atob(arr[1]),
              n = bstr.length,
              u8arr = new Uint8Array(n)
            while (n--) {
              u8arr[n] = bstr.charCodeAt(n)
            }
            return new File([u8arr], name, { type: mime })
          },

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]

## 二、使用el-upload选取图片后，再实行裁剪功能，此时需用到文档中的裁剪远程图片功能 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]

使用远程裁剪图片功能，记得配置 :crossOrigin=“true” :crossOriginHeader="anonymous"两个属性。

<el-button icon="el-icon-crop" type="text" @click="forIe9(index)"></el-button>
    
    <ImgCutter :showChooseBtn="false"
                   ref="imgCutterModal0"
                   :tool-bgc="none"
                   :is-modal="true"
                   :crossOrigin="true"
                   :crossOriginHeader="anonymous"
                   :show-choose-btn="true"
                   :lock-scroll="true"
                   :box-width="900"
                   :box-height="600"
                   :cut-width="250"
                   :cut-height="250"
                   :size-change="true"
                   :move-able="true"
                   @cutDown="cutDown">
          <button slot="open"></button>
    </ImgCutter>

methods:{
          //裁剪
          forIe9(index){
            this.valueIndex=index
            this.$refs.imgCutterModal0.handleOpen({
              name:'img',
              src:this.value[index],
              width:400,
              height:400,
            });
          },
          //裁剪完执行上传事件
          cutDown(fileName) {
            var imgGs = fileName.dataURL.split(';')[0].split('/')[1]
            var file = this.dataURLtoBlob(fileName.dataURL, '33333.' + imgGs)
            var formData = new FormData()
            formData.append('file', file)
            this.axios.post('/admin/sys-file/upload', formData).then((res) => {
              this.value[this.valueIndex] = this.baseImgUrl + res.data.data.bucketName + '/' + res.data.data.fileName
              this.$forceUpdate()
            })
          },
    }

[Link 1]: https://gitee.com/GLUESTICK/vue-img-cutter?_from=gitee_search
[Link 2]: https://ihtmlcss.com/demo/dist/#/croptool
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]: /images/20230528/f38e813065e54c49bcbb05a8e0b48125.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]: /images/20230528/43f448769ed940fd938a11bc7559e990.png