11.png
12.png

<template>
<div id="upimg">
<div class="dialog-wrapper" @click="onClose" v-show="panel"></div>
<transition name="drop">
<div class="dialog-container" v-show="panel">
<div class="" style="height:100%;width:100%;">
<img id="image" :src="url" alt="图片" >
</div>
<div style="width:100%;height:6%;border-radius:0px 0px 5px 5px;background:#fff">
<span class="close-btn" @click="crop">确定上传</span>
<span class="close-btn" @click="onClose">关闭</span>
</div>
</div>
</transition>

<div style="display:flex;">

<div style="
width: 58px;
height: 58px;
margin-right:10px;
overflow: hidden;
position: relative;
border-radius: 50%;
border: 1px solid #d5d5d5;" v-if="userbasic.headPhoto">
<img :src="userbasic.headPhoto" alt="" style="width:58px;height:58px">
</div>
<div class="" v-else>

</div>
<div style="width: 58px;height:58px;line-height: 58px;text-align:center;border:1px dashed rgba(0, 0, 0, .2);position:relative;">
  <Icon type="camera" size="20"></Icon>
  <input type="file" name="message_img" size="45" style="left:-10px;opacity:0;overflow:hidden;position:absolute" @change="change">
</div>
<!-- <button type="button" name="button" @change="preview">保存</button> -->

</div>
</div>
</template>
<script>
import {
getUserInfoData,
updateUserBasic,
postUserBasic,
} from '../api/api'
import Cropper from 'cropperjs'
export default {
data() {
return {
picValue: '',
cropper: '',
croppable: false,
panel: false,
url: '',

  userdata: '',
  userbasic: '',
}

},
created() {
this.setUserInfoData();
},
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: {
onClose(){
this.panel = !this.panel;
},
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;

  this.image = e.target.files[0]; //新加的获取文件资源
},
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.userbasic.headPhoto = roundedCanvas.toDataURL();

  this.postImg(); //点选择后自动提交相片上传

},
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;
},
//用户个人头像
setUserInfoData() {
  getUserInfoData().then(response => {
    this.userdata = response.data;
    if (this.userdata.basic) {
      this.userbasic = this.userdata.basic;
    }
  }).catch(error => {
    return
  });
},

postImg() {
  //这边写图片的上传
  const formData = new FormData();
  // 截取字符串crop中this.userbasic.headPhoto = roundedCanvas.toDataURL();
  let photoType = this.userbasic.headPhoto.substring(this.userbasic.headPhoto.indexOf(",") + 1);
  //进制转换
  const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];
      for(let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
          const slice = byteCharacters.slice(offset, offset + sliceSize);
          const byteNumbers = new Array(slice.length);
              for(let i = 0; i < slice.length; i++) {
                  byteNumbers[i] = slice.charCodeAt(i);
                  }
                  const byteArray = new Uint8Array(byteNumbers);
                  byteArrays.push(byteArray);
                }
                const blob = new Blob(byteArrays, {
                    type: contentType
                });
                return blob;
    }
  const contentType = 'image/jpeg';
  const b64Data2 = photoType;
  const blob = b64toBlob(b64Data2, contentType);
   
    // name.jpg可修改
  formData.append('headPhoto', blob,"name.jpg");

  if (this.userbasic.id) {
    updateUserBasic(Number(this.userbasic.id), formData).then(response => {
      alert('修改成功');
    }).catch(error => {
      // console.log(error);
    });
  } else {
    postUserBasic(formData).then(response => {
      alert('提交成功');
    }).catch(error => {
      //  console.log(error);
      
    })
  }
}

}
}
</script>

<style>

• {
  margin: 0;
  padding: 0;
  }

upimg .dialog-wrapper {

position: fixed;
height: 100%;
width: 100%;
z-index: 5;
background-color: #000;
opacity: .8;
}

upimg .dialog-container {

position: fixed;
z-index: 80;
top: 80px;
left: 25%;
width: 50%;
height: 60%;
background-color:#fff;
border-radius: 5px 5px 0px 0px;
box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}

upimg .close-btn {

padding: 5px 10px;
float: right;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}

• Cropper.js
• https://github.com/fengyuanchen/cropperjs
  /
  .cropper-view-box,
  .cropper-face {
  /此处设置剪图范围/
  /border-radius: 50%;*/
  }
  .cropper-container {
  font-size: 0;
  line-height: 0;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  direction: ltr;
  -ms-touch-action: none;
  touch-action: none
  }

.cropper-container img {
display: block;
min-width: 0 !important;
max-width: none !important;
min-height: 0 !important;
max-height: none !important;
width: 100%;
height: 100%;
image-orientation: 0deg
}

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

.cropper-wrap-box {
overflow: hidden;
}

.cropper-drag-box {
opacity: 0;
background-color: #fff;
}

.cropper-modal {
opacity: .5;
background-color: #000;
}

.cropper-view-box {
display: block;
overflow: hidden;

width: 100%;
height: 100%;

outline: 1px solid #39f;
outline-color: rgba(51, 153, 255, 0.75);
}

.cropper-dashed {
position: absolute;
display: block;
opacity: .5;
border: 0 dashed #eee
}

.cropper-dashed.dashed-h {
top: 33.33333%;
left: 0;
width: 100%;
height: 33.33333%;
border-top-width: 1px;
border-bottom-width: 1px
}

.cropper-dashed.dashed-v {
top: 0;
left: 33.33333%;
width: 33.33333%;
height: 100%;
border-right-width: 1px;
border-left-width: 1px
}

.cropper-center {
position: absolute;
top: 50%;
left: 50%;

display: block;

width: 0;
height: 0;

opacity: .75
}

.cropper-center:before,
.cropper-center:after {
position: absolute;
display: block;
content: ' ';
background-color: #eee
}

.cropper-center:before {
top: 0;
left: -3px;
width: 7px;
height: 1px
}

.cropper-center:after {
top: -3px;
left: 0;
width: 1px;
height: 7px
}

.cropper-face,
.cropper-line,
.cropper-point {
position: absolute;

display: block;

width: 100%;
height: 100%;

opacity: .1;
}

.cropper-face {
top: 0;
left: 0;

background-color: #fff;
}

.cropper-line {
background-color: #39f
}

.cropper-line.line-e {
top: 0;
right: -3px;
width: 5px;
cursor: e-resize
}

.cropper-line.line-n {
top: -3px;
left: 0;
height: 5px;
cursor: n-resize
}

.cropper-line.line-w {
top: 0;
left: -3px;
width: 5px;
cursor: w-resize
}

.cropper-line.line-s {
bottom: -3px;
left: 0;
height: 5px;
cursor: s-resize
}

.cropper-point {
width: 5px;
height: 5px;

opacity: .75;
background-color: #39f
}

.cropper-point.point-e {
top: 50%;
right: -3px;
margin-top: -3px;
cursor: e-resize
}

.cropper-point.point-n {
top: -3px;
left: 50%;
margin-left: -3px;
cursor: n-resize
}

.cropper-point.point-w {
top: 50%;
left: -3px;
margin-top: -3px;
cursor: w-resize
}

.cropper-point.point-s {
bottom: -3px;
left: 50%;
margin-left: -3px;
cursor: s-resize
}

.cropper-point.point-ne {
top: -3px;
right: -3px;
cursor: ne-resize
}

.cropper-point.point-nw {
top: -3px;
left: -3px;
cursor: nw-resize
}

.cropper-point.point-sw {
bottom: -3px;
left: -3px;
cursor: sw-resize
}

.cropper-point.point-se {
right: -3px;
bottom: -3px;
width: 20px;
height: 20px;
cursor: se-resize;
opacity: 1
}

@media (min-width: 768px) {

.cropper-point.point-se {
width: 15px;
height: 15px
}
}

@media (min-width: 992px) {

.cropper-point.point-se {
width: 10px;
height: 10px
}
}

@media (min-width: 1200px) {

.cropper-point.point-se {
width: 5px;
height: 5px;
opacity: .75
}
}

.cropper-point.point-se:before {
position: absolute;
right: -50%;
bottom: -50%;
display: block;
width: 200%;
height: 200%;
content: ' ';
opacity: 0;
background-color: #39f
}

.cropper-invisible {
opacity: 0;
}

.cropper-bg {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
}

.cropper-hide {
position: absolute;

display: block;

width: 0;
height: 0;
}

.cropper-hidden {
display: none !important;
}

.cropper-move {
cursor: move;
}

.cropper-crop {
cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
cursor: not-allowed;
}
</style>