[学习笔记]本地获取图片并利用cropper.js裁剪图片

最新推荐文章于 2022-11-07 17:02:29 发布

杜都督丶

最新推荐文章于 2022-11-07 17:02:29 发布

阅读量622

点赞数

分类专栏：项目笔记文章标签： js vue

本文链接：https://blog.csdn.net/iufesjgc/article/details/113373981

版权

项目笔记专栏收录该内容

8 篇文章 2 订阅

订阅专栏

需求：

1、从本地获取图片

2、裁剪图片并上传至服务器

从本地获取图片

        <input type="file" accept="image/*" @change="tirggerFile($event)" />  //上传图片按钮

    tirggerFile: function (event) {
      let file = event.target.files[0];  //获取文件
      this.uncutimg = URL.createObjectURL(file);  //获取文件url值给未裁剪的img

      var reader = new FileReader();  //FileReader将图片url转换成base64格式
      reader.readAsDataURL(file);  //将图片读取为DataURL

      let that = this;
      reader.onload = function () {
        that.imgUrl = this.result  //imgUrl为base64格式
        that.initCropper(); //使用cropper
      };
    },

裁剪并上传图片

          <div class="img-container" v-show="containerShow>
            <img :src="uncutimg" ref="image" alt="" />  //未裁剪的img，若src为空，不显示
          </div>

          <div   //预览裁剪图片的div
            style="width: 150px;height: 150px;overflow: hidden;"
            ref="img"
            class="before"
          >

          <button @click="ensurecut()">确定</button>  //确认裁剪按钮

当本地获取图片成功之后，uncutimg有了url，同时使用了cropper，则进入裁剪图片阶段

这个插件很强大，有很多可变的参数。该插件的详细功能见https://www.cnblogs.com/eightFlying/p/cropper-demo.html

    initCropper() {
      this.containerShow = true;  //展示裁剪区域
      this.cropper = new Cropper(this.$refs.image, {
        viewMode: 1,   //视图控制，限制裁剪框不能超出图片的范围
        dragMode: "crop",  //拖拽图片模式，可形成新的裁剪框
        aspectRatio: 1,  //设置裁剪框为固定的宽高比
        preview: ".before", //预览的div
      });
    },

调整好想要的图片后，点击确定进行裁剪

因为后端不支持上传blob，所以中间要将blob转为png

ensurecut() {
      var canvas = this.cropper.getCroppedCanvas({   //获取裁剪的canvas图像
        imageSmoothingQuality: "high",
      });   
      let that = this;
      canvas.toBlob(function (blobObj) {  //将canvas转为blob
        let file = new window.File([blobObj], this.imgname, {  //将blob转为png图像
          type: "image/png",
        });
        var formData = new FormData();  //创建formdata对象
        formData.append("file", file);  //添加file
        that.$store.state.formdata = formData;
      });

      this.containerShow = false;
    },

然后调用上传图片接口，将formdata传上去就可以了，最终效果：