vue+七牛云 截图工具

1、安装：npm install vue-cropper

2、引入：import VueCropper from 'vue-cropper'

Vue.use(VueCropper)

<template>
	<div class='box'>
		<el-button @click='dialogImg=true'>截图</el-button>
        <div class="img">
            <img style="width: 100%; height: 100%;" v-if="option.img" :src="option.img" alt="" />
        </div>
		<el-dialog
			class="dialogImgClass"
			title=""
			:visible.sync="dialogImg"
			size="middle"
			:before-close="handleClose1">
			<div class="dialogBox">
				<el-row>
					<span style="margin-right:20px;">切图工具比例</span>
					<el-radio-group v-model="pictureRatio" @change="changePicRatio">
						<el-radio class="radio" label="1">16:9</el-radio>
						<el-radio class="radio" label="2">1:1</el-radio>
						<el-radio class="radio" label="3">无</el-radio>
					</el-radio-group>
				</el-row>
				<div class="wrapper">
					<vueCropper
						style="border: 1px solid;"
						ref="cropper"
						:img="option.img"
						:outputSize="option.size"
						:outputType="option.outputType"
						:info="option.info"
						:canScale="option.canScale"
						:autoCrop="option.autoCrop"
						:autoCropWidth="option.autoCropWidth"
						:autoCropHeight="option.autoCropHeight"
						:fixed="option.fixed"
						:fixedNumber="option.fixedNumber"
						:full="option.full"
						:centerBox="option.centerBox"
						:original="option.original"
						@realTime="realTime">
					</vueCropper>
				</div>
				<div class="btn-box">
					<label class="btn" for="upload">选择照片</label>
					<input name="file" type="file" id="upload" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event)">
					<el-button :plain="true" type="danger" style="background: #e03434;color: #fff;" @click="finishUpdate('base64')">上传照片</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {VueCropper} from 'vue-cropper'
import api from '../fetch/api'
export default {
	data () {
		return {
			dialogImg:false,
			pictureRatio:"2",//根据选项修改图片比例
			exam:null,
			option:{
				img: '',
				info: true,
				size: 1,
				outputType: 'png',
				canScale:true,
				autoCrop: true,
				// 只有自动截图开启 宽度高度才生效
				autoCropWidth: 540,
				autoCropHeight: 540,
				// 开启宽度和高度比例
				fixed: true,
				fixedNumber: [16, 16],
				fileaa:null,
				full:true,//输出原图比例的截图
				centerBox:true,//截图框是否限制在图片里(只有自动截图开启才生效)
				original:false,//上传图片是否显示原始宽高(针对大图，可以铺满)
            },
            qiniu:{
                key:'',
                token:'',
                file:''
            },//七牛云数据
		}
	},
	components: {
        'vueCropper': VueCropper
	},
	created(){

	},
	methods: {
		changePicRatio(val){//切换图片比例
			// console.log(val);
			if(val==="1"){
				this.option.fixedNumber = [16, 9];
				this.option.autoCrop = true;
				this.option.fixed = true;
				if(this.exam != null){
					this.$refs.cropper.clearCrop();
					this.$refs.cropper.startCrop();
					this.uploadImg (this.exam);
					console.log("改成16：9");
				}else if(this.option.img != ''){
					this.$refs.cropper.clearCrop();
					this.$refs.cropper.startCrop();
				}
			}else if(val==="2"){
				this.option.fixedNumber = [16, 16];
				this.option.autoCrop = true;
				this.option.fixed = true;
				if(this.exam != null){
					this.$refs.cropper.clearCrop();
					this.$refs.cropper.startCrop();
					this.uploadImg (this.exam);
					console.log("改成1：1");
				}else if(this.option.img != ''){
					this.$refs.cropper.clearCrop();
					this.$refs.cropper.startCrop();
				}
			}else if(val==="3"){
				this.option.autoCrop = false;
				this.option.fixed = false;
				this.$refs.cropper.clearCrop();
				this.$refs.cropper.startCrop();
			}
		},
		uploadImg (e) {
			this.exam=e;
			//上传图片
			// this.option.img
			var file = e.target.files[0]
			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
				}
				this.option.img = data
			}
			this.fileaa = e.target.files[0];
			console.log(this.fileaa);
			// 转化为base64
			reader.readAsDataURL(file)
			// 转化为blob
		//				reader.readAsArrayBuffer(file)
		},
		finishUpdate(type){
			this.$refs.cropper.getCropData((data)=>{
				this.option.img = data;
				let pic = data.replace(/^.*?,/, '');
				let size = this.fileSize(pic);
				let data1 = {};
				api.get(api.config.getUploadVoucher,data1).then(res=>{
					if(res.code==1){
						console.log(res);
						this.qiniu.key = res.data.mediaKey;
						this.qiniu.token = res.data.token;
						let id = res.data.mediaId;
						this.fileId = res.data.mediaId;
						let url = "http://up-z2.qiniu.com/putb64/"+size+"/key/"+this.baseCode64(this.qiniu.key);
						var xhr = new XMLHttpRequest();
						xhr.onreadystatechange=function(){
							if (xhr.readyState==4){
								console.log(xhr.responseText)
							}
						}
						xhr.open("POST", url, true);
						xhr.setRequestHeader("Content-Type", "application/octet-stream");
						xhr.setRequestHeader("Authorization", "UpToken "+this.qiniu.token);
						xhr.send(pic);
						this.dialogImg = false;
					}
				})
			})
        },
        fileSize(base64){
            let fileSize;
                //找到等号，把等号也去掉
            if (base64.indexOf('=') > 0) {
                var indexOf = base64.indexOf('=');
                base64 = base64.substring(0, indexOf);//把末尾的’=‘号去掉
            }
            fileSize = parseInt(base64.length - (base64.length / 8) * 2);
            return fileSize;
        },
        baseCode64(input){
            var _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
            var output = "";
            var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
            var i = 0;
            input = this._utf8_encode(input);
            while (i < input.length) {
                chr1 = input.charCodeAt(i++);
                chr2 = input.charCodeAt(i++);
                chr3 = input.charCodeAt(i++);
                enc1 = chr1 >> 2;
                enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
                enc4 = chr3 & 63;
                if (isNaN(chr2)) {
                    enc3 = enc4 = 64;
                } else if (isNaN(chr3)) {
                    enc4 = 64;
                }
                output = output +
                _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
                _keyStr.charAt(enc3) + _keyStr.charAt(enc4);
            }
            return output;
        },
        _utf8_encode(string) {
            string = string.replace(/\r\n/g,"\n");
            var utftext = "";
            for (var n = 0; n < string.length; n++) {
                var c = string.charCodeAt(n);
                if (c < 128) {
                    utftext += String.fromCharCode(c);
                } else if((c > 127) && (c < 2048)) {
                    utftext += String.fromCharCode((c >> 6) | 192);
                    utftext += String.fromCharCode((c & 63) | 128);
                } else {
                    utftext += String.fromCharCode((c >> 12) | 224);
                    utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                    utftext += String.fromCharCode((c & 63) | 128);
                }
            }
            return utftext;
        },
        handleClose1(){
            this.dialogImg = false;
        },
        realTime (data) {
            this.previews = data
        },
	}
}
</script>

<style lang='stylus' scoped>
.img{
    width 500px
}
.dialogBox{
	position:relative
	height:640px
}

.dialogBox .wrapper{
	width:540px
	height:540px
}

.dialogBox .btn-box{
	position:absolute
	width:200px
	right:0
	bottom:0
}
.dialogBox .btn{
	background:#e03434
	color:#fff
	font-size:14px
	line-height:1
	cursor:pointer
	margin:0
	white-space:nowrap
	border:1px solid #ddd
	border-radius:4px
	padding:9px 15px
	box-sizing: border-box
}
</style>