欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

cropper js基于vue的图片裁剪上传功能。

程序员文章站 2022-04-09 09:20:58
...

前端时间公司的vue项目需要头像裁剪上传功能,看了一篇博客,在此基础上做的修改完成了这个功能,与大家分享一下。原文:http://m.blog.csdn.net/JaneLittle/article/details/72037910。


首先下载引入cropper js,

npm install cropper js --save

在需要的页面引入:import Cropper from "cropper js"


html的代码如下:

<template>  
  <div id="demo">  
    <!-- 遮罩层 -->  
    <div class="container" v-show="panel">  
        <div>  
            <img id="image" :src="url" alt="Picture">  
        </div>  
        <button type="button" id="button" @click="commit">确定</button>  
        <button type="button"id="cancel" @click="cancel">取消</button> 
    </div>  
  
    <div style="padding:20px;">  
        <div class="show">  
          <div class="picture" :style="'backgroundImage:url('+headerImage+')'">  
          </div>  
        </div>  
        <div style="margin-top:20px;text-align: left;">  
          <input type="file" id="change" accept="image" @change="change">  
          <label for="change"></label>  
        </div>  
          
    </div>  
  </div>  
</template>



主要是js代码,如下

1,data里面定好初始变量,绑定数据,imgCropperData是我定义的判断图片格式的。

data() {
    return {
      headerImage: "",
      picValue: "",
      cropper: "",
      croppable: false,
      panel: false,
      url: "",
      imgCropperData: {
        accept: "image/gif, image/jpeg, image/png, image/jpg"
      }
    };
  }

2,在mounted里面初始换裁剪框

mounted() {
    //初始化这个裁剪框
    var self = this;
    var image = document.getElementById("image");
    this.cropper = new Cropper(image, {
      aspectRatio: 1,
      viewMode: 1,
      background: false,
      zoomable: false,
      ready: function() {
        self.croppable = true;
      }
    });
  }


3.methods的方法比较多,包括创建URL路径,input框change事件,canvas画图,确定提交上传。我还加了取消事件函数,判断上传文件的类型和大小。

methods: {
    //取消上传
    cancel() {
        this.panel = false;
        var obj = document.getElementById('change') ; 
        obj.outerHTML=obj.outerHTML; 
    },
    //创建url路径
    getObjectURL(file) {
      var url = null;
      if (window.createObjectURL != undefined) {
        // basic
        url = window.createObjectURL(file);
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
      }
      return url;
    },
    //input框change事件,获取到上传的文件
    change(e) {
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      let type = files[0].type; //文件的类型,判断是否是图片
      let size = files[0].size; //文件的大小,判断图片的大小
      if (this.imgCropperData.accept.indexOf(type) == -1) {
        alert("请选择我们支持的图片格式!");
        return false;
      }
      if (size > 5242880) {
        alert("请选择5M以内的图片!");
        return false;
      }
      this.picValue = files[0];
      this.url = this.getObjectURL(this.picValue);
      //每次替换图片要重新得到新的url
      if (this.cropper) {
        this.cropper.replace(this.url);
      }
      this.panel = true;
    },
    //确定提交
    commit() {
      this.panel = false;
      var croppedCanvas;
      var roundedCanvas;
      if (!this.croppable) {
        return;
      }
      // Crop
      croppedCanvas = this.cropper.getCroppedCanvas();
      // Round
      roundedCanvas = this.getRoundedCanvas(croppedCanvas);
      this.headerImage = roundedCanvas.toDataURL();
      //上传图片
      this.postImg();
    },
    //canvas画图
    getRoundedCanvas(sourceCanvas) {
      var canvas = document.createElement("canvas");
      var context = canvas.getContext("2d");
      var width = sourceCanvas.width;
      var height = sourceCanvas.height;
      canvas.width = width;
      canvas.height = height;
      context.imageSmoothingEnabled = true;
      context.drawImage(sourceCanvas, 0, 0, width, height);
      context.globalCompositeOperation = "destination-in";
      context.beginPath();
      context.arc(
        width / 2,
        height / 2,
        Math.min(width, height) / 2,
        0,
        2 * Math.PI,
        true
      );
      context.fill();

      return canvas;
    },
    //提交上传函数
    postImg() {
      alert("上传成功");
      //这边写图片的上传
    }
  }


css样式代码就不贴出来了,可以到GitHub上下载https://github.com/leileibrother/cropper-js-vue-。

测试完遇到一个蛋疼的问题:第一次选择图片所有的操作都正常,第二次再选择同一张图片时change事件不触发了,只能选择不同的图片才可以。不知道有没有解决过这种问题的,请教各位了!