forked from natuka/web.puabadge.com
Initial commit
This commit is contained in:
natuka committed
commit
84061c9a18
243 files changed
+63148
No files matched your search
@@ -0,0 +1,267 @@
|
||||
<template name="cropper">
|
||||
<view>
|
||||
<image :src="imgSrc.imgSrc" class="my-avatar" mode="aspectFill" @click="fSelect" :style="imgStyle"></image>
|
||||
<!-- 上传图片 -->
|
||||
<canvas canvas-id="avatar-canvas" id="avatar-canvas" class="my-canvas" :style="{top: styleTop, height: cvsStyleHeight}"
|
||||
disable-scroll="false"></canvas>
|
||||
<!-- 截取边框 -->
|
||||
<canvas canvas-id="oper-canvas" id="oper-canvas" class="oper-canvas" :style="{top: styleTop, height: cvsStyleHeight}"
|
||||
disable-scroll="false" @touchstart="fStart" @touchmove="fMove" @touchend="fEnd"></canvas>
|
||||
<view class="oper-wrapper" :style="{display: styleDisplay}">
|
||||
<view class="btn-wrapper" v-if="showOper">
|
||||
<view @click="fClose" hover-class="hover">取消</view>
|
||||
<view @click="fUpload" hover-class="hover">选取</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const tabHeight = 70;
|
||||
export default {
|
||||
name: "cropper",
|
||||
data() {
|
||||
return {
|
||||
cvsStyleHeight: '0px',
|
||||
styleDisplay: 'none',
|
||||
styleTop: '-10000px',
|
||||
prvTop: '-10000px',
|
||||
imgStyle: {},
|
||||
selStyle: {},
|
||||
showOper: true,
|
||||
imgSrc: {
|
||||
imgSrc: ''
|
||||
},
|
||||
qlty: 0.9,
|
||||
postWidthFirst: {},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
avatarSrc() {
|
||||
this.imgSrc.imgSrc = this.avatarSrc;
|
||||
}
|
||||
},
|
||||
props: {
|
||||
avatarSrc: '',
|
||||
avatarStyle: '',
|
||||
selWidth: '',
|
||||
selHeight: '',
|
||||
expWidth: '',
|
||||
expHeight: '',
|
||||
minScale: '',
|
||||
maxScale: '',
|
||||
canScale: '',
|
||||
noTab: '',
|
||||
quality: '',
|
||||
index: ''
|
||||
},
|
||||
created() {
|
||||
const canvas = document.getElementById('avatar-canvas');
|
||||
const operCanvas = document.getElementById('oper-canvas');
|
||||
this.ctxCanvas = canvas.getContext('2d');
|
||||
this.ctxCanvasOper = operCanvas.getContext('2d');
|
||||
|
||||
this.qlty = parseInt(this.quality) || 0.9;
|
||||
this.imgSrc.imgSrc = this.avatarSrc;
|
||||
this.letScale = this.canScale === 'false' ? 0 : 1;
|
||||
this.indx = this.index || undefined;
|
||||
this.mnScale = this.minScale || 0.3;
|
||||
this.mxScale = this.maxScale || 4;
|
||||
this.noBar = this.noTab === 'true' ? 1 : 0;
|
||||
if (this.noBar) {
|
||||
this.moreHeight = 0;
|
||||
this.fWindowResize();
|
||||
} else {
|
||||
this.moreHeight = 50;
|
||||
this.fWindowResize();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fWindowResize() {
|
||||
const sysInfo = {
|
||||
platform: navigator.platform,
|
||||
pixelRatio: window.devicePixelRatio,
|
||||
windowWidth: window.innerWidth,
|
||||
windowHeight: window.innerHeight,
|
||||
windowTop: window.scrollY,
|
||||
windowBottom: 0,
|
||||
statusBarHeight: 0,
|
||||
screenHeight: screen.height
|
||||
};
|
||||
|
||||
this.platform = sysInfo.platform;
|
||||
this.pixelRatio = sysInfo.pixelRatio;
|
||||
this.windowWidth = sysInfo.windowWidth;
|
||||
this.drawTop = sysInfo.windowTop;
|
||||
this.windowHeight = sysInfo.windowHeight + sysInfo.windowBottom;
|
||||
this.cvsStyleHeight = this.windowHeight - tabHeight + 'px';
|
||||
|
||||
this.pxRatio = this.windowWidth / 750;
|
||||
|
||||
let style = this.avatarStyle;
|
||||
console.log(style)
|
||||
this.imgStyle = style;
|
||||
this.expWidth && (this.exportWidth = this.expWidth.indexOf('rpx') >= 0 ? parseInt(this.expWidth) * this.pxRatio :
|
||||
parseInt(this.expWidth));
|
||||
this.expHeight && (this.exportHeight = this.expHeight.indexOf('rpx') >= 0 ? parseInt(this.expHeight) * this.pxRatio :
|
||||
parseInt(this.expHeight));
|
||||
|
||||
if (this.styleDisplay === 'flex') {
|
||||
this.fDrawInit(true);
|
||||
}
|
||||
this.fHideImg();
|
||||
},
|
||||
fSelect() {
|
||||
if (this.fSelecting) return;
|
||||
this.fSelecting = true;
|
||||
setTimeout(() => {
|
||||
this.fSelecting = false;
|
||||
}, 500);
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = 'image/*';
|
||||
input.onchange = (e) => {
|
||||
const file = e.target.files[0];
|
||||
if(!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const path = e.target.result;
|
||||
this.imgPath = path;
|
||||
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
this.imgWidth = img.width;
|
||||
this.imgHeight = img.height;
|
||||
this.path = path;
|
||||
|
||||
if (!this.hasSel) {
|
||||
let style = this.selStyle || {};
|
||||
if (this.selWidth && this.selHeight) {
|
||||
let selWidth = this.selWidth.indexOf('rpx') >= 0 ? parseInt(this.selWidth) * this.pxRatio :
|
||||
parseInt(this.selWidth),
|
||||
selHeight = this.selHeight.indexOf('rpx') >= 0 ? parseInt(this.selHeight) * this.pxRatio :
|
||||
parseInt(this.selHeight);
|
||||
style.width = parseInt(selWidth);
|
||||
style.height = parseInt(selHeight);
|
||||
style.top = parseInt((this.windowHeight - style.height - tabHeight) / 2);
|
||||
style.left = parseInt((this.windowWidth - style.width) / 2);
|
||||
} else {
|
||||
alert('裁剪框的宽或高没有设置');
|
||||
return;
|
||||
}
|
||||
this.selStyle = style;
|
||||
}
|
||||
|
||||
this.fDrawInit(true);
|
||||
};
|
||||
img.src = path;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
input.click();
|
||||
},
|
||||
fUpload() {
|
||||
if (this.fUploading) return;
|
||||
this.fUploading = true;
|
||||
setTimeout(() => {
|
||||
this.fUploading = false;
|
||||
}, 1000);
|
||||
|
||||
let style = this.selStyle,
|
||||
x = parseInt(style.left),
|
||||
y = parseInt(style.top),
|
||||
width = parseInt(style.width),
|
||||
height = parseInt(style.height),
|
||||
expWidth = this.exportWidth || width,
|
||||
expHeight = this.exportHeight || height;
|
||||
|
||||
x *= this.pixelRatio;
|
||||
y *= this.pixelRatio;
|
||||
expWidth = width;
|
||||
expHeight = height;
|
||||
|
||||
this.styleDisplay = 'none';
|
||||
this.styleTop = '-10000px';
|
||||
this.hasSel = false;
|
||||
this.fHideImg();
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.drawImage(this.ctxCanvas.canvas, x, y, width, height, 0, 0, expWidth, expHeight);
|
||||
|
||||
canvas.toBlob((blob) => {
|
||||
const url = URL.createObjectURL(blob);
|
||||
this.$emit("upload", {
|
||||
avatar: this.imgSrc,
|
||||
path: url,
|
||||
index: this.indx
|
||||
});
|
||||
}, 'image/png', this.qlty);
|
||||
},
|
||||
// ... 其他方法保持不变
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.my-canvas {
|
||||
display: flex;
|
||||
position: fixed !important;
|
||||
background: #000000;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.my-avatar {
|
||||
width: 100vw;
|
||||
height: 100vw;
|
||||
}
|
||||
|
||||
.oper-canvas {
|
||||
display: flex;
|
||||
position: fixed !important;
|
||||
left: 0;
|
||||
z-index: 101;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.oper-wrapper {
|
||||
height: 71px;
|
||||
position: fixed !important;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 200;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.btn-wrapper {
|
||||
background-color: #000000;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.btn-wrapper view {
|
||||
width: 160rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
z-index: 300;
|
||||
}
|
||||
|
||||
.hover {
|
||||
color: #f1f1f1;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user