按原比例裁剪图片并且不失真。

安装：

cnpm install vue-cropper --save-dev

使用：

import VueCropper from 'vue-cropper'

import Api from '@/js/api.js' //接口url配置文件

export default {

data() {

return {

headImg:'',

//剪切图片上传

crap: false,

previews: {},

option: {

img: '',

outputSize:1, //剪切后的图片质量(0.1-1)

full: false,//输出原图比例截图 props名full

outputType: 'png',

canMove: true,

original: false,

canMoveBox: true,

autoCrop: true,

autoCropWidth: 150,

autoCropHeight: 150,

fixedBox: true

},

fileName:'', //本机文件地址

downImg: '#',

imgFile:'',

uploadImgRelaPath:'', //上传后的图片的地址(不带服务器域名)

}

},

components: {

VueCropper

},

methods: {

//放大/缩小

changeScale(num) {

console.log('changeScale')

num = num || 1;

this.$refs.cropper.changeScale(num);

},

//坐旋转

rotateLeft() {

console.log('rotateLeft')

this.$refs.cropper.rotateLeft();

},

//右旋转

rotateRight() {

console.log('rotateRight')

this.$refs.cropper.rotateRight();

},

//上传图片(点击上传按钮)

finish(type) {

console.log('finish')

let _this = this;

let formData = new FormData();

// 输出

if (type === 'blob') {

this.$refs.cropper.getCropBlob((data) => {

let img = window.URL.createObjectURL(data)

this.model = true;

this.modelSrc = img;

formData.append("file", data, this.fileName);

this.$http.post(Api.uploadSysHeadImg.url, formData, {contentType: false, processData: false, headers:{'Content-Type': 'application/x-www-form-urlencoded'}})

.then((response)=>{

var res = response.data;

if(res.success == 1){

$('#btn1').val('');

_this.imgFile = '';

_this.headImg = res.realPathList[0]; //完整路径

_this.uploadImgRelaPath = res.relaPathList[0]; //非完整路径

_this.$message({　　//element-ui的消息Message消息提示组件

type: 'success',

message: '上传成功'

});

}

})

})

} else {

this.$refs.cropper.getCropData((data) => {

this.model = true;

this.modelSrc = data;

})

}

},

// 实时预览函数

realTime(data) {

console.log('realTime')

this.previews = data

},

//下载图片

down(type) {

console.log('down')

var aLink = document.createElement('a')

aLink.download = 'author-img'

if (type === 'blob') {

this.$refs.cropper.getCropBlob((data) => {

this.downImg = window.URL.createObjectURL(data)

aLink.href = window.URL.createObjectURL(data)

aLink.click()

})

} else {

this.$refs.cropper.getCropData((data) => {

this.downImg = data;

aLink.href = data;

aLink.click()

})

}

},

//选择本地图片

uploadImg(e, num) {

console.log('uploadImg');

var _this = this;

//上传图片

var file = e.target.files[0]

_this.fileName = file.name;

if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {

alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')

return false

}

var reader = new FileReader();

reader.onload =(e) => {

let data;

if (typeof e.target.result === 'object') {

// 把Array Buffer转化为blob 如果是base64不需要

data = window.URL.createObjectURL(new Blob([e.target.result]))

}

else {

data = e.target.result

}

if (num === 1) {

_this.option.img = data

} else if (num === 2) {

_this.example2.img = data

}

}

// 转化为base64

// reader.readAsDataURL(file)

// 转化为blob

reader.readAsArrayBuffer(file);

},

imgLoad (msg) {

console.log('imgLoad')

console.log(msg)

}

},

}

.info {

width: 720px;

margin: 0 auto;

.oper-dv {

height:20px;

text-align:right;

margin-right:100px;

a {

font-weight: 500;

&:last-child {

margin-left: 30px;

}

}

}

.info-item {

margin-top: 15px;

label {

display: inline-block;

width: 100px;

text-align: right;

}

.sel-img-dv {

position: relative;

.sel-file {

position: absolute;

width: 90px;

height: 30px;

opacity: 0;

cursor: pointer;

z-index: 2;

}

.sel-btn {

position: absolute;

cursor: pointer;

z-index: 1;

}

}

}

}

.cropper-content{

display: flex;

display: -webkit-flex;

justify-content: flex-end;

-webkit-justify-content: flex-end;

.cropper{

width: 260px;

height: 260px;

}

.show-preview{

flex: 1;

-webkit-flex: 1;

display: flex;

display: -webkit-flex;

justify-content: center;

-webkit-justify-content: center;

.preview{

overflow: hidden;

border-radius: 50%;

border:1px solid #cccccc;

background: #cccccc;

margin-left: 40px;

}

}

}

.cropper-content .show-preview .preview {margin-left: 0;}

js/api.js文件是配置的{接口地址}。

粘贴好用。