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

安裝：

cnpm install vue-cropper --save-dev

使用：

選擇圖片

ref="cropper"

:img="option.img"

:outputSize="option.size"

:outputType="option.outputType"

:info="true"

:full="option.full"

:canMove="option.canMove"

:canMoveBox="option.canMoveBox"

:original="option.original"

:autoCrop="option.autoCrop"

:autoCropWidth="option.autoCropWidth"

:autoCropHeight="option.autoCropHeight"

:fixedBox="option.fixedBox"

@realTime="realTime"

@imgLoad="imgLoad"

>

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文件是配置的{接口地址}。

粘貼好用。

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的git 裁切_Vue + ccropper.js裁切图片（vue-cropper）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。