vue移動端頭像上傳，不大於50K

先看效果：

稍加說明一下：第一張圖是user.vue，第二張圖是點擊頭像出現的系統自帶上傳文件格式（安卓和IOS不同），第三張圖是cropper組件（我單獨設置的），第四張圖是上傳完成的user.vue。

其實插件不難，只不過爲了契合項目和移動端，作了些修改。

官方介紹：https://www.npmjs.com/package/cropperjs

第一步：安裝插件

cnpm install cropperjs --save

第二步：分離設置成插件cropper.vue

<template>
  <div id="demo" class="cropperImg">
    <!-- 遮罩層 -->
    <div class="container" v-show="panel">
      <div>
        <img id="image" :src="url" alt="Picture">
      </div>
      <button type="button" id="button" @click="crop">肯定</button>
    </div>
    <div>
        <div class="show" style="height:56px;width:56px;">
          <div class="picture" :style="'backgroundImage:url('+headerImage+')'" style="height:56px;width:56px;">
          </div>
        </div>
        <div style="opacity:0;width:360px;position:absolute;top:0;right:0;height:56px;">
          <input type="file" id="change" accept="image" @change="change" style="height:56px;">
          <label for="change"></label>
        </div>
    </div>
  </div>
</template>

<script>
import Cropper from 'cropperjs'  //引入插件
export default {
  props:{  
    headerImage:{   //從user.vue父組件傳過來數據庫圖片，即用戶從本地上傳的圖片
      type:String,
      default:''
    }
  },
  data () {
    return {
      picValue:'',
      cropper:'',
      croppable:false,
      panel:false,
      url:'',
      postHeaderImg:''
    }
  },
  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;
      }
    });
  },
  methods: {
    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 ;
    },
    change (e) {
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      this.panel = true;
      this.picValue = files[0];
      
      this.url = this.getObjectURL(this.picValue);
      //每次替換圖片要從新獲得新的url
      if(this.cropper){
        this.cropper.replace(this.url);
      }
      this.panel = true;
    },
    crop () {
        this.panel = false;
        var croppedCanvas;
        var roundedCanvas;

        if (!this.croppable) {
          return;
        }
        // Crop
        croppedCanvas = this.cropper.getCroppedCanvas();
        console.log(this.cropper)
        // Round
        roundedCanvas = this.getRoundedCanvas(croppedCanvas);

        this.postHeaderImg = roundedCanvas.toDataURL();
        //傳遞給父組件
        this.$emit('getHeaderImage',roundedCanvas.toDataURL());

        this.postImg()//上傳圖片
        
    },
    getRoundedCanvas (sourceCanvas) {
      
      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
      var width = sourceCanvas.width;
      var height = sourceCanvas.height;
      //爲了每張圖片的大小不超過50k,因此不論裁剪多大，最後上傳的，最大寬度不超過90。
      if(width > 90){
        width = 90
      }
      if(height > 90){
        height = 90
      }
      
      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 () {
      this.$http.post(
        this.http_h + "bp/user/uploadHeadImage",
        {
          fieldName:this.postHeaderImg
        },
      ).then((res)=>{
        let response = res.body;
        if(response.code == 200){
          this.$vux.toast.show({
            type:"success",
            text: "上傳頭像成功",
            time:1000
          })
        }else{
          this.$vux.toast.show({
            type:"text",
            text: response.message,
            time:1000
          })
        }
      });
    }
  }
}
</script>

　

第三步：設置父組件

首先：引入組件

import cropper from "@/components/cropper"

而後：在父組件你須要設置頭像的地方，

<cropper :headerImage="headerImage"  @getHeaderImage="newHeaderImage"></cropper>　

 小小解釋一下：:headerImage="headerImage"（傳遞給子組件）

組件經過emit 事件方式上傳給父組件更改以後的圖片，而後父組件經過newHeaderImage事件來接收。

newHeaderImage(newImg){
  this.headerImage = newImg;
}

　

第四步：測試

 

總結：cropper在移動端，可能會有圖片偏移現象，這就須要你來根據你的項目修改css了，我也是作了修改才符合咱們UI的效果。在vue-cli 項目中node_modules文件中，直接就能夠找到。但願能幫到你！加油