某些时候需要前端裁剪图片然后上传,裁剪图片的坑

zzffan
1,950 阅读2分钟

遇到一个问题哈,前端需要裁剪图片,然后在上传到服务器

当然自己不会造轮子,就找到了vue-cropper这个很厉害很方便的插件,地址放下面

一个优雅的图片裁剪插件

在此之前都是用element UI 的 upload组件的 action 直接上传的,所以刚遇到的时候有点方 !!!∑(ﾟДﾟノ)ノ

  • 简单的安装引用一下
安装
npm install vue-cropper

yarn add vue-cropper

使用
组件内使用
import { VueCropper }  from 'vue-cropper' 
components: {
  VueCropper,
},

main.js里面使用
import VueCropper from 'vue-cropper' 

Vue.use(VueCropper)

cdn方式使用
<script src="//cdn.jsdelivr.net/npm/vue-cropper@0.4.9/dist/index.js"></script>
Vue.use(window['vue-cropper'].default)
  • 在页面里大概是这个样子的 (其他具体API见官方git)
    <el-dialog :visible.sync="cropperDialogVisiable" width="640px" :close-on-click-modal="false" :show-close="false">
      <vue-cropper
        ref="cropper"                          // Dom钩子，用于获取绑定其上的相关属性及函数
        class="cropper"
        :img="cropperImg"                      // 裁剪图片源
        :can-scale="!load"                     // 是否允许滚轮缩放
        :auto-crop="true"                      // 是否默认生成截图框
        :fixed-box="true"                      // 是否固定截图框大小
        enlarge="2"                            // 输出比例倍数 
        :output-size="option.size"             // 生成图片质量
        :output-type="option.outputType"       // 生成图片格式
        :center-box="option.centerBox"         // 截图框是否限制在图片内
        :fixed-number="[25,14]"                  // 截图框的宽高比例
      />
      <div class="cropper-btn">
        <el-button type="primary" @click="confirm" :loading="load">确定</el-button>
        <el-button @click="cancel" :disabled="load">取消</el-button>
      </div>
    </el-dialog>

  • `其实最主要的东西是img属性，用element UI的话可以直接生成一个Blob对象就直接能用，但是在项目里面上传的组件是以前的小伙伴封装的，改来改去也不大方便，所以就咩有用饿了么

  • 跟饿了么一样，封装的组件里面有上传之前的处理UpImageBefore

            图中核心代码也就是圈起来的部分
            
            我们不能直接获得Blob对象，但是可以拿到文件File对象，即我们选中的拿一张图片的信息
            
            我们可以跟据选中的图片生成一个Blob对象
            
            let blobData = new Blob([file],{type:'image\jpeg'})
            this.cropperImg = window.URL.createObjectURL(blobData)
            
            至此，我们的裁剪器就能拿到图片了，附上Blob对象类型的文档

Blob 的 MDN

            裁剪完成之后同样有回调
            
            cropperImgSubmit(){
                this.$refs.cropper.getCropBlob(blob)=>{
                    this.blob_ = blob
                }
            }
            
            这是cropper给出的一个方法，用来获得截图的Blob，如下：

下面是截图的Blob

  • 至此，我们截完图了，之后需要上传，后端统一接收的是file文件，所以我们要根据图片的Blob生成file类型的文件
            file = new window.File([this.blobmsg],fileList[0].name,{type:'image/png'})


            打印出来如下：

  • 最后我们进行正常上传操作就可以了。

到这就完了，内容不多，但是第一次解决这个东西，还是挺费劲呢，给自己留一个笔记，也希望帮到看到这篇文章的小伙伴

avatar
文章
阅读
粉丝