```bash
//页面引用
<!-- selWidth 是 string 裁剪区域的宽，单位px或upx
selHeight 是 string 裁剪区域的高，单位px或upx
avatarStyle 否 object 头像样式，默认{width: 150upx; height: 150upx; border-radius: 100%;} -->
<cropper
selWidth="275rpx" ref='cropper' style="border-radius:45rpx;" selHeight="275rpx" @upload="myUpload" :avatarSrc="imgUrl"
avatarStyle="width: 275rpx; height: 275rpx; border-radius:45rpx;">
</cropper>
import cropper from "./components/cropper.vue";
components: {
cropper
},
//上传返回图片
myUpload(rsp) {
console.log(rsp)
if(rsp.imgMsg=="图片过大,请重新选择"){
this.imgUrl = ''; //更新头像方式一
this.formData.imgFile = ''
uni.showToast({
title: "图片过大,请重新选择",
icon: 'none',
})
}else{
this.imgUrl = rsp.path; //更新头像方式一
this.formData.imgFile = rsp.File
}
},
组件部分
<template name="yq-avatar">
<view>
<image :src="imgSrc.imgSrc" @click="fSelect" :style="[ iS ]" class="my-avatar"></image>
<canvas canvas-id="avatar-canvas" id="avatar-canvas" class="my-canvas" :style="{top: sT, height: csH}"
disable-scroll="false"></canvas>
<canvas canvas-id="oper-canvas" id="oper-canvas" class="oper-canvas" :style="{top: sT, height: csH}"
disable-scroll="false" @touchstart="fStart" @touchmove="fMove" @touchend="fEnd"></canvas>
<canvas canvas-id="prv-canvas" id="prv-canvas" class="prv-canvas" disable-scroll="false"
@touchstart="fHideImg" :style="{ height: csH, top: pT }"></canvas>
<view class="oper-wrapper" :style="{display: sD, top:tp}">
<view class="oper">
<view class="btn-wrapper" v-if="sO">
<view @click="fSelect" hover-class="hover" :style="{width: bW}"><text>重选</text></view>
<view @click="fClose" hover-class="hover" :style="{width: bW}"><text>关闭</text></view>
<view @click="fRotate" hover-class="hover" :style="{width: bW, display: bD}"><text>旋转</text></view>
<view @click="fPreview" hover-class="hover" :style="{width: bW}"><text>预览</text></view>
<view @click="fUpload" hover-class="hover" :style="{width: bW}"><text>上传</text></view>
</view>
<view class="clr-wrapper" v-else>
<slider class="my-slider" @change="fColorChange" block-size="25" value="0" min="-100" max="100" activeColor="red"
backgroundColor="green" block-color="grey" show-value></slider>
<view @click="fPrvUpload" hover-class="hover" :style="{width: bW}"><text>上传</text></view>
</view>
</view>
</view>
</view>
</template>
<!-- selWidth 是 string 裁剪区域的宽，单位px或upx
selHeight 是 string 裁剪区域的高，单位px或upx
noTab 否 bool 是否存在tabBar，默认false，即有tabBar。支付宝小程序必须填写，不然无法运行
avatarSrc 否 string 头像地址
avatarStyle 否 object 头像样式，默认{width: 150upx; height: 150upx; border-radius: 100%;}
bgImg 否 string 剪切背景图片，默认黑色背景
expWidth 否 string 设置导出图片宽度。默认值selWidth*屏幕像素密度，单位px或upx
expHeight 否 string 设置导出图片高度。默认值selHeight*屏幕像素密度，单位px或upx
inner 否 bool 只允许在图片范围内移动，并禁用一切旋转，默认false
quality 否 number 生成图片质量，取值范围0~1，默认1
index 否 any 索引，回调upload方法，返回该index值，默认undefined
fileType 否 string 报错图片格式，jpg或png，默认png。
minScale 否 number 缩放允许的最小比例，默认0.3
maxScale 否 number 缩放允许的最大比例，默认4
canRotate 否 bool 是否允许旋转，默认true
canScale 否 bool 是否允许缩放，默认true
stretch 否 string 图片一边自动铺满裁剪框
x: x轴方向，图片自动铺满
y: y轴方向，图片自动铺满
long: 根据图片长边自动铺满
short: 根据图片短边自动铺满
longSel: 根据裁剪框长边自动铺满
shortSel: 根据裁剪框短边自动铺满
lock 否 string 锁定图片移动方向
x: 锁定x轴方向
y: 锁定y轴方向
long: 锁定图片长边方向
short: 锁定图片短边方向
longSel: 锁定裁剪框长边方向
shortSel: 锁定裁剪框短边方向
回调
upload 是
点击上传后回调
{
avatar：对象类型，可以通过更新imgSrc值，更新头像
path：临时头像地址
index：图片索引
data：通过fChooseImg函数设置的额外数据，默认undefined
base64：当前只有H5平台有base64格式图片
}
init 否 在图片裁剪之前回调，可用于自定义操作，例如禁用下拉刷新、隐藏自定义tabBar(例如colorUI tabbar)
end 否 关闭或上传后回调，可用于自定义操作，例如开启下拉刷新、显示自定义tabBar
方法 参数说明
fChooseImg(index, params, data)
触发图片选着
index：索引，默认undefined
params：对象类型，默认undefined，可设置属性有selWidth、selHeight、
expWidth、expHeight、quality、canRotate、canScale、minScale、
maxScale、stretch、lock、inner
data：回调时的额外数据，可以是任何类型，默认undefined -->
<script>
"use strict";
const tH = 50;
export default {
name: "yq-avatar",
data() {
return {
csH: '0px',
sD: 'none',
sT: '-10000px',
pT: '-10000px',
iS: {},
sS: {},
sO: true,
bW: '19%',
bD: 'flex',
tp: 0,
imgSrc: {
imgSrc: ''
},
File:null,//选择的文件
Filename:''//文件名
};
},
watch: {
avatarSrc() {
this.imgSrc.imgSrc = this.avatarSrc;
}
},
props: {
avatarSrc: '',
avatarStyle: '',
selWidth: '',
selHeight: '',
expWidth: '',
expHeight: '',
minScale: '',
maxScale: '',
canScale: '',
canRotate: '',
lockWidth: '',
lockHeight: '',
stretch: '',
lock: '',
fileType: '',
noTab: '',
inner: '',
quality: '',
index: '',
bgImage: '',
},
created() {
this.cc = uni.createCanvasContext('avatar-canvas', this);
this.cco = uni.createCanvasContext('oper-canvas', this);
this.ccp = uni.createCanvasContext('prv-canvas', this);
this.qlty = parseFloat(this.quality) || 1;
this.imgSrc.imgSrc = this.avatarSrc;
this.letRotate = (this.canRotate === false || this.inner === true || this.inner === 'true' || this.canRotate === 'false') ? 0 : 1;
this.letScale = (this.canScale === false || this.canScale === 'false') ? 0 : 1;
this.isin = (this.inner === true || this.inner === 'true') ? 1 : 0;
this.indx = this.index || undefined;
this.mnScale = parseFloat(this.minScale) || 0.3;
this.mxScale = parseFloat(this.maxScale) || 4;
this.noBar = (this.noTab === true || this.noTab === 'true') ? 1 : 0;
this.stc = this.stretch;
this.lck = this.lock;
this.fType = this.fileType === 'jpg' ? 'jpg' : 'png';
if (this.isin||!this.letRotate) {
this.bW = '24%';
this.bD = 'none';
} else {
this.bW = '19%';
this.bD = 'flex';
}
if (this.noBar) {
this.fWindowResize();
} else {
uni.showTabBar({
fail: ()=>{
this.noBar = 1;
},
success: ()=>{
this.noBar = 0;
},
complete: (res) => {
this.fWindowResize();
}
});
}
},
methods: {
fWindowResize() {
let sysInfo = uni.getSystemInfoSync();
this.platform = sysInfo.platform;
this.wW = sysInfo.windowWidth;
// #ifdef H5
this.drawTop = sysInfo.windowTop;
// #endif
// #ifndef H5
this.drawTop = 0;
// #endif
// #ifdef MP-ALIPAY
this.wH = sysInfo.screenHeight - sysInfo.statusBarHeight - sysInfo.titleBarHeight;
this.csH = this.wH - tH + 'px';
// #endif
// #ifndef MP-ALIPAY
this.wH = sysInfo.windowHeight;
if(!this.noBar) this.wH += tH;
this.csH = this.wH - tH + 'px';
// #endif
this.tp = this.csH;
// #ifdef H5
this.tp = sysInfo.windowTop + parseInt(this.csH)+ 'px';
// #endif
this.pxRatio = this.wW / 750;
let style = this.avatarStyle;
if (style && style !== true && (style = style.trim())) {
style = style.split(';');
let obj = {};
for (let v of style) {
if (!v) continue;
v = v.trim().split(':');
if (v[1].toString().indexOf('upx') >= 0) {
let arr = v[1].trim().split(' ');
for (let k in arr) {
if (!arr[k]) continue;
if (arr[k].toString().indexOf('upx') >= 0) {
arr[k] = parseFloat(arr[k]) * this.pxRatio + 'px';
}
}
v[1] = arr.join(' ');
}
obj[v[0].trim()] = v[1].trim();
}
this.iS = obj;
}
this.expWidth && (this.eW = this.expWidth.toString().indexOf('upx') >= 0 ? parseInt(this.expWidth) * this.pxRatio :
parseInt(this.expWidth));
this.expHeight && (this.eH = this.expHeight.toString().indexOf('upx') >= 0 ? parseInt(this.expHeight) * this.pxRatio :
parseInt(this.expHeight));
if (this.sD === 'flex') {
this.fDrawInit(true);
}
this.fHideImg();
},
fSelect() {
if (this.fSelecting) return;
this.fSelecting = true;
setTimeout(() => {
this.fSelecting = false;
}, 500);
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (r) => {
console.log(r)
// #ifdef MP-ALIPAY
uni.showLoading();
// #endif
// #ifndef MP-ALIPAY
uni.showLoading({
title: '加载中...',
mask: true
});
// #endif
let path = this.imgPath = r.tempFilePaths[0];
this.Filename=r.tempFiles[0].name
console.log(this.Filename)
console.log(r.tempFiles[0].name)
console.log((r.tempFiles[0].size / 1024))
uni.getImageInfo({
src: path,
success: r => {
console.log(r)
this.imgWidth = r.width;
this.imgHeight = r.height;
this.path = path;
if (!this.hasSel) {
let style = this.sS || {};
if (this.selWidth && this.selHeight) {
let sW = this.selWidth.toString().indexOf('upx') >= 0 ? parseInt(this.selWidth) * this.pxRatio : parseInt(
this.selWidth),
sH = this.selHeight.toString().indexOf('upx') >= 0 ? parseInt(this.selHeight) * this.pxRatio : parseInt(
this.selHeight);
style.width = sW + 'px';
style.height = sH + 'px';
style.top = ((this.wH - sH - tH)|0) / 2 + 'px';
style.left = ((this.wW - sW)|0) / 2 + 'px';
} else {
uni.showModal({
title: '裁剪框的宽或高没有设置',
showCancel: false
})
return;
}
this.sS = style;
}
if (this.noBar) {
this.fDrawInit(true);
} else {
uni.hideTabBar({
complete: () => {
this.fDrawInit(true);
}
});
}
},
fail: () => {
uni.showToast({
title: "只能上传png和jpg格式的!",
duration: 2000,
icon:'none'
})
},
complete() {
uni.hideLoading();
}
});
}
})
},
fUpload() {
if (this.fUploading) return;
this.fUploading = true;
setTimeout(() => {
this.fUploading = false;
}, 1000)
let style = this.sS,
x = parseInt(style.left),
y = parseInt(style.top),
width = parseInt(style.width),
height = parseInt(style.height),
expWidth = this.eW || (width* this.pixelRatio),
expHeight = this.eH || (height* this.pixelRatio);
// #ifdef MP-ALIPAY
uni.showLoading();
// #endif
// #ifndef MP-ALIPAY
uni.showLoading({
title: '加载中...',
mask: true
});
// #endif
this.sD = 'none';
this.sT = '-10000px';
this.hasSel = false;
this.fHideImg();
// #ifdef MP-ALIPAY
this.cc.toTempFilePath({
x: x,
y: y,
width: width,
height: height,
destWidth: expWidth,
destHeight: expHeight,
fileType: this.fType,
quality: this.qlty,
success: (r) => {
console.log(r)
r = r.apFilePath;
this.$emit("upload", {
avatar: this.imgSrc,
path: r,
index: this.indx,
data: this.rtn,
Filename:this.Filename,
base64: this.base64 || null
});
},
fail: (res) => {
uni.showToast({
title: "error1",
duration: 2000,
})
},
complete: () => {
uni.hideLoading();
this.noBar || uni.showTabBar();
this.$emit("end");
}
});
// #endif
// #ifndef MP-ALIPAY
uni.canvasToTempFilePath({
x: x,
y: y,
width: width,
height: height,
destWidth: expWidth,
destHeight: expHeight,
canvasId: 'avatar-canvas',
fileType: this.fType,
quality: this.qlty,
success: (r) => {
console.log(r)
r = r.tempFilePath;
// #ifdef H5
this.btop(r).then((r) => {
console.log(r)
this.$emit("upload", {
avatar: this.imgSrc,
path: r,
index: this.indx,
data: this.rtn,
Filename:this.Filename,
base64: this.base64 || null
});
return;
})
// #endif
// #ifndef H5
this.$emit("upload", {
avatar: this.imgSrc,
path: r,
index: this.indx,
data: this.rtn,
base64: this.base64 || null
});
// #endif
},
fail: (res) => {
uni.showToast({
title: "error1",
duration: 2000,
})
},
complete: () => {
uni.hideLoading();
this.noBar || uni.showTabBar();
this.$emit("end");
}
}, this);
// #endif
},
fPrvUpload() {
if (this.fPrvUploading) return;
this.fPrvUploading = true;
setTimeout(() => {
this.fPrvUploading = false;
}, 1000)
let style = this.sS,
destWidth = parseInt(style.width),
destHeight = parseInt(style.height),
prvX = this.prvX,
prvY = this.prvY,
prvWidth = this.prvWidth,
prvHeight = this.prvHeight,
expWidth = this.eW || (parseInt(style.width) * this.pixelRatio),
expHeight = this.eH || (parseInt(style.height) * this.pixelRatio);
// #ifdef MP-ALIPAY
uni.showLoading();
// #endif
// #ifndef MP-ALIPAY
uni.showLoading({
title: '加载中...',
mask: true
});
// #endif
this.sD = 'none';
this.sT = '-10000px';
this.hasSel = false;
this.fHideImg();
// #ifdef MP-ALIPAY
this.ccp.toTempFilePath({
x: prvX,
y: prvY,
width: prvWidth,
height: prvHeight,
destWidth: expWidth,
destHeight: expHeight,
fileType: this.fType,
quality: this.qlty,
success: (r) => {
r = r.apFilePath;
console.log(r)
this.$emit("upload", {
avatar: this.imgSrc,
path: r,
index: this.indx,
data: this.rtn,
Filename:this.Filename,
base64: this.base64 || null
});
},
fail: () => {
uni.showToast({
title: "error_prv",
duration: 2000,
})
},
complete: () => {
uni.hideLoading();
this.noBar || uni.showTabBar();
this.$emit("end");
}
});
// #endif
// #ifndef MP-ALIPAY
uni.canvasToTempFilePath({
x: prvX,
y: prvY,
width: prvWidth,
height: prvHeight,
destWidth: expWidth,
destHeight: expHeight,
canvasId: 'prv-canvas',
fileType: this.fType,
quality: this.qlty,
success: (r) => {
r = r.tempFilePath;
// #ifdef H5
this.btop(r).then((r) => {
console.log(r)
this.$emit("upload", {
avatar: this.imgSrc,
path: r,
index: this.indx,
data: this.rtn,
Filename:this.Filename,
base64: this.base64 || null
});
})
// #endif
// #ifndef H5
this.$emit("upload", {
avatar: this.imgSrc,
path: r,
index: this.indx,
data: this.rtn,
Filename:this.Filename,
base64: this.base64 || null
});
// #endif
},
fail: () => {
uni.showToast({
title: "error_prv",
duration: 2000,
})
},
complete: () => {
uni.hideLoading();
this.noBar || uni.showTabBar();
this.$emit("end");
}
}, this);
// #endif
},
fDrawInit(ini = false) {
let allWidth = this.wW,
allHeight = this.wH,
imgWidth = this.imgWidth,
imgHeight = this.imgHeight,
imgRadio = imgWidth / imgHeight,
useWidth = allWidth - 40,
useHeight = allHeight - tH - 80,
useRadio = useWidth / useHeight,
sW = parseInt(this.sS.width),
sH = parseInt(this.sS.height);
this.fixWidth = 0;
this.fixHeight = 0;
this.lckWidth = 0;
this.lckHeight = 0;
switch (this.stc) {
case 'x':
this.fixWidth = 1;
break;
case 'y':
this.fixHeight = 1;
break;
case 'long':
if (imgRadio > 1) this.fixWidth = 1;
else this.fixHeight = 1;
break;
case 'short':
if (imgRadio > 1) this.fixHeight = 1;
else this.fixWidth = 1;
break;
case 'longSel':
if (sW > sH) this.fixWidth = 1;
else this.fixHeight = 1;
break;
case 'shortSel':
if (sW > sH) this.fixHeight = 1;
else this.fixWidth = 1;
break;
}
switch (this.lck) {
case 'x':
this.lckWidth = 1;
break;
case 'y':
this.lckHeight = 1;
break;
case 'long':
if (imgRadio > 1) this.lckWidth = 1;
else this.lckHeight = 1;
break;
case 'short':
if (imgRadio > 1) this.lckHeight = 1;
else this.lckWidth = 1;
break;
case 'longSel':
if (sW > sH) this.lckWidth = 1;
else this.lckHeight = 1;
break;
case 'shortSel':
if (sW > sH) this.lckHeight = 1;
else this.lckWidth = 1;
break;
}
if (this.fixWidth) {
useWidth = sW;
useHeight = useWidth / imgRadio;
} else if (this.fixHeight) {
useHeight = sH;
useWidth = useHeight * imgRadio;
} else if (imgRadio < useRadio) {
if (imgHeight < useHeight) {
useWidth = imgWidth;
useHeight = imgHeight;
} else {
useWidth = useHeight * imgRadio;
}
} else {
if (imgWidth < useWidth) {
useWidth = imgWidth;
useHeight = imgHeight;
} else {
useHeight = useWidth / imgRadio;
}
}
if (this.isin) {
if (useWidth < sW) {
useWidth = sW;
useHeight = useWidth / imgRadio;
this.lckHeight = 0;
}
if (useHeight < sH) {
useHeight = sH;
useWidth = useHeight * imgRadio;
this.lckWidth = 0;
}
}
this.scaleSize = 1;
this.rotateDeg = 0;
this.posWidth = (allWidth - useWidth) / 2 | 0;
this.posHeight = (allHeight - useHeight - tH) / 2 | 0;
this.useWidth = useWidth | 0;
this.useHeight = useHeight | 0;
this.centerX = this.posWidth + useWidth / 2;
this.centerY = this.posHeight + useHeight / 2;
this.focusX = 0;
this.focusY = 0;
let style = this.sS,
left = parseInt(style.left),
top = parseInt(style.top),
width = parseInt(style.width),
height = parseInt(style.height),
canvas = this.canvas,
canvasOper = this.canvasOper,
cc = this.cc,
cco = this.cco;
cco.beginPath();
cco.setLineWidth(3);
cco.setGlobalAlpha(1);
cco.setStrokeStyle('white');
cco.strokeRect(left, top, width, height);
cco.setFillStyle('black');
cco.setGlobalAlpha(0.5);
cco.fillRect(0, 0, this.wW, top);
cco.fillRect(0, top, left, height);
cco.fillRect(0, top + height, this.wW, this.wH - height - top - tH);
cco.fillRect(left + width, top, this.wW - width - left, height);
cco.setGlobalAlpha(1);
cco.setStrokeStyle('red');
cco.moveTo(left+15, top);
cco.lineTo(left, top);
cco.lineTo(left, top+15);
cco.moveTo(left+width-15, top);
cco.lineTo(left+width, top);
cco.lineTo(left+width, top+15);
cco.moveTo(left+15, top+height);
cco.lineTo(left, top+height);
cco.lineTo(left, top+height-15);
cco.moveTo(left+width-15, top+height);
cco.lineTo(left+width, top+height);
cco.lineTo(left+width, top+height-15);
cco.stroke();
cco.draw(false, () => {
if (ini) {
this.sD = 'flex';
this.sT = this.drawTop + 'px';
this.fDrawImage(true);
}
});
this.$emit("init");
},
fDrawImage(ini = false) {
let tm_now = Date.now();
if (tm_now - this.drawTm < 20) return;
this.drawTm = tm_now;
let cc = this.cc,
imgWidth = this.useWidth * this.scaleSize,
imgHeight = this.useHeight * this.scaleSize;
// #ifdef MP-ALIPAY
cc.save();
// #endif
if (this.bgImage) {
// #ifdef MP-ALIPAY
cc.clearRect(0, 0, this.wW, this.wH - tH);
// #endif
// #ifndef MP-ALIPAY
cc.drawImage(this.bgImage, 0, 0, this.wW, this.wH - tH);
// #endif
} else {
cc.fillRect(0, 0, this.wW, this.wH - tH);
}
if (this.isin) {
let cx = this.focusX * (this.scaleSize - 1),
cy = this.focusY * (this.scaleSize - 1);
cc.translate(this.centerX, this.centerY);
cc.rotate(this.rotateDeg * Math.PI / 180);
cc.drawImage(this.imgPath, this.posWidth-this.centerX-cx, this.posHeight-this.centerY-cy, imgWidth, imgHeight);
} else {
cc.translate(this.posWidth + imgWidth / 2, this.posHeight + imgHeight / 2);
cc.rotate(this.rotateDeg * Math.PI / 180);
cc.drawImage(this.imgPath, -imgWidth / 2, -imgHeight / 2, imgWidth, imgHeight);
}
cc.draw(false);
// #ifdef MP-ALIPAY
cc.restore();
// #endif
},
fPreview() {
if (this.fPreviewing) return;
this.fPreviewing = true;
setTimeout(() => {
this.fPreviewing = false;
}, 1000);
let style = this.sS,
x = parseInt(style.left),
y = parseInt(style.top),
width = parseInt(style.width),
height = parseInt(style.height);
// #ifdef MP-ALIPAY
uni.showLoading();
// #endif
// #ifndef MP-ALIPAY
uni.showLoading({
title: '加载中...',
mask: true
});
// #endif
// #ifdef MP-ALIPAY
this.cc.toTempFilePath({
x: x,
y: y,
width: width,
height: height,
expWidth: width * this.pixelRatio,
expHeight: height * this.pixelRatio,
fileType: this.fType,
quality: this.qlty,
success: (r) => {
this.prvImgTmp = r = r.apFilePath;
let ccp = this.ccp,
prvX = this.wW,
prvY = parseInt(this.csH),
prvWidth = parseInt(this.sS.width),
prvHeight = parseInt(this.sS.height),
useWidth = prvX - 40,
useHeight = prvY - 80,
radio = useWidth / prvWidth,
rHeight = prvHeight * radio;
if (rHeight < useHeight) {
prvWidth = useWidth;
prvHeight = rHeight;
} else {
radio = useHeight / prvHeight;
prvWidth *= radio;
prvHeight = useHeight;
}
ccp.fillRect(0, 0, prvX, prvY);
this.prvX = prvX = ((prvX - prvWidth) / 2) | 0;
this.prvY = prvY = ((prvY - prvHeight) / 2) | 0;
this.prvWidth = prvWidth = prvWidth | 0;
this.prvHeight = prvHeight = prvHeight | 0;
ccp.drawImage(r, prvX, prvY, prvWidth, prvHeight);
ccp.draw(false);
this.sO = false;
this.pT = '0';
},
fail: () => {
uni.showToast({
title: "error2",
duration: 2000,
})
},
complete: () => {
uni.hideLoading();
}
});
// #endif
// #ifndef MP-ALIPAY
uni.canvasToTempFilePath({
x: x,
y: y,
width: width,
height: height,
expWidth: width * this.pixelRatio,
expHeight: height * this.pixelRatio,
canvasId: 'avatar-canvas',
fileType: this.fType,
quality: this.qlty,
success: (r) => {
this.prvImgTmp = r = r.tempFilePath;
let ccp = this.ccp,
prvX = this.wW,
prvY = parseInt(this.csH);
// #ifndef H5||MP-WEIXIN||APP-PLUS
prvY += tH;
// #endif
// #ifdef APP-PLUS
if (this.platform === 'android') {
prvY += tH;
}
// #endif
let prvWidth = parseInt(this.sS.width),
prvHeight = parseInt(this.sS.height),
useWidth = prvX - 40,
useHeight = prvY - 80,
radio = useWidth / prvWidth,
rHeight = prvHeight * radio;
if (rHeight < useHeight) {
prvWidth = useWidth;
prvHeight = rHeight;
} else {
radio = useHeight / prvHeight;
prvWidth *= radio;
prvHeight = useHeight;
}
ccp.fillRect(0, 0, prvX, prvY);
this.prvX = prvX = ((prvX - prvWidth) / 2) | 0;
this.prvY = prvY = ((prvY - prvHeight) / 2) | 0;
this.prvWidth = prvWidth = prvWidth | 0;
this.prvHeight = prvHeight = prvHeight | 0;
ccp.drawImage(r, prvX, prvY, prvWidth, prvHeight);
ccp.draw(false);
// #ifdef H5
this.btop(r).then((r) => {
this.sO = false;
this.pT = this.drawTop + 'px';
})
// #endif
this.sO = false;
// if (this.platform === 'android') this.sO = false;
this.pT = this.drawTop + 'px';
},
fail: () => {
uni.showToast({
title: "error2",
duration: 2000,
})
},
complete: () => {
uni.hideLoading();
}
}, this);
// #endif
},
fChooseImg(index = undefined, params = undefined, data = undefined) {
if (params) {
let sW = params.selWidth,
sH = params.selHeight,
expWidth = params.expWidth,
expHeight = params.expHeight,
quality = params.quality,
canRotate = params.canRotate,
canScale = params.canScale,
minScale = params.minScale,
maxScale = params.maxScale,
stretch = params.stretch,
fileType = params.fileType,
inner = params.inner,
lock = params.lock;
expWidth && (this.eW = expWidth.toString().indexOf('upx') >= 0 ? parseInt(expWidth) * this.pxRatio : parseInt(
expWidth));
expHeight && (this.eH = expHeight.toString().indexOf('upx') >= 0 ? parseInt(expHeight) * this.pxRatio : parseInt(
expHeight));
this.letRotate = (canRotate === false || inner === true || inner === 'true' || canRotate === 'false') ? 0 : 1;
this.letScale = (canScale === false || canScale === 'false') ? 0 : 1;
this.qlty = parseFloat(quality) || 1;
this.mnScale = parseFloat(minScale) || 0.3;
this.mxScale = parseFloat(maxScale) || 4;
this.stc = stretch;
this.isin = (inner === true || inner === 'true') ? 1 : 0;
this.fType = fileType === 'jpg' ? 'jpg' : 'png';
this.lck = lock;
if (this.isin||!this.letRotate) {
this.bW = '24%';
this.bD = 'none';
} else {
this.bW = '19%';
this.bD = 'flex';
}
if (sW && sH) {
sW = sW.toString().indexOf('upx') >= 0 ? parseInt(sW) * this.pxRatio : parseInt(sW);
sH = sH.toString().indexOf('upx') >= 0 ? parseInt(sH) * this.pxRatio : parseInt(sH);
this.sS.width = sW + 'px';
this.sS.height = sH + 'px';
this.sS.top = ((this.wH - sH - tH)|0) / 2 + 'px';
this.sS.left = ((this.wW - sW)|0) / 2 + 'px';
this.hasSel = true;
}
}
this.rtn = data;
this.indx = index;
this.fSelect();
},
fRotate() {
this.rotateDeg += 90 - this.rotateDeg % 90;
this.fDrawImage();
},
fStart(e) {
let touches = e.touches,
touch0 = touches[0],
touch1 = touches[1];
this.touch0 = touch0;
this.touch1 = touch1;
if (touch1) {
let x = touch1.x - touch0.x,
y = touch1.y - touch0.y;
this.fgDistance = Math.sqrt(x * x + y * y);
}
},
fMove(e) {
let touches = e.touches,
touch0 = touches[0],
touch1 = touches[1];
if (touch1) {
let x = touch1.x - touch0.x,
y = touch1.y - touch0.y,
fgDistance = Math.sqrt(x * x + y * y),
scaleSize = 0.005 * (fgDistance - this.fgDistance),
beScaleSize = this.scaleSize + scaleSize;
do {
if (!this.letScale) break;
if (beScaleSize < this.mnScale) break;
if (beScaleSize > this.mxScale) break;
let growX = this.useWidth * scaleSize / 2,
growY = this.useHeight * scaleSize / 2;
if (this.isin) {
let imgWidth = this.useWidth * beScaleSize,
imgHeight = this.useHeight * beScaleSize,
l = this.posWidth - growX,
t = this.posHeight - growY,
r = l + imgWidth,
b = t + imgHeight,
left = parseInt(this.sS.left),
top = parseInt(this.sS.top),
width = parseInt(this.sS.width),
height = parseInt(this.sS.height),
right = left + width,
bottom = top + height,
cx, cy;
if (imgWidth <= width || imgHeight <= height) break;
this.cx = cx = this.focusX * beScaleSize - this.focusX,
this.cy = cy = this.focusY * beScaleSize - this.focusY;
this.posWidth -= growX;
this.posHeight -= growY;
if (this.posWidth - cx > left) {
this.posWidth = left + cx;
}
if (this.posWidth + imgWidth - cx < right) {
this.posWidth = right - imgWidth + cx;
}
if (this.posHeight - cy > top) {
this.posHeight = top + cy;
}
if (this.posHeight + imgHeight - cy < bottom) {
this.posHeight = bottom - imgHeight + cy;
}
} else {
this.posWidth -= growX;
this.posHeight -= growY;
}
this.scaleSize = beScaleSize;
} while (0);
this.fgDistance = fgDistance;
if (touch1.x !== touch0.x && this.letRotate) {
x = (this.touch1.y - this.touch0.y) / (this.touch1.x - this.touch0.x);
y = (touch1.y - touch0.y) / (touch1.x - touch0.x);
this.rotateDeg += Math.atan((y - x) / (1 + x * y)) * 180 / Math.PI;
this.touch0 = touch0;
this.touch1 = touch1;
}
this.fDrawImage();
} else if (this.touch0) {
let x = touch0.x - this.touch0.x,
y = touch0.y - this.touch0.y,
beX = this.posWidth + x,
beY = this.posHeight + y;
if (this.isin) {
let imgWidth = this.useWidth * this.scaleSize,
imgHeight = this.useHeight * this.scaleSize,
l = beX,
t = beY,
r = l + imgWidth,
b = t + imgHeight,
left = parseInt(this.sS.left),
top = parseInt(this.sS.top),
right = left + parseInt(this.sS.width),
bottom = top + parseInt(this.sS.height),
cx, cy;
this.cx = cx = this.focusX * this.scaleSize - this.focusX;
this.cy = cy = this.focusY * this.scaleSize - this.focusY;
if (!this.lckWidth && Math.abs(x) < 100) {
if (left < l - cx) {
this.posWidth = left + cx;
} else if (right > r - cx) {
this.posWidth = right - imgWidth + cx;
} else {
this.posWidth = beX;
this.focusX -= x;
}
}
if (!this.lckHeight && Math.abs(y) < 100) {
if (top < t - cy) {
this.focusY -= (top + cy - this.posHeight);
this.posHeight = top + cy;
} else if (bottom > b - cy) {
this.focusY -= (bottom + cy - (this.posHeight + imgHeight));
this.posHeight = bottom - imgHeight + cy;
} else {
this.posHeight = beY;
this.focusY -= y;
}
}
} else {
if (Math.abs(x) < 100 && !this.lckWidth) this.posWidth = beX;
if (Math.abs(y) < 100 && !this.lckHeight) this.posHeight = beY;
this.focusX -= x;
this.focusY -= y;
}
this.touch0 = touch0;
this.fDrawImage();
}
},
fEnd(e) {
let touches = e.touches,
touch0 = touches && touches[0],
touch1 = touches && touches[1];
if (touch0) {
this.touch0 = touch0;
} else {
this.touch0 = null;
this.touch1 = null;
}
},
fHideImg() {
this.prvImg = '';
this.pT = '-10000px';
this.sO = true;
this.prvImgData = null;
this.target = null;
},
fClose() {
this.sD = 'none';
this.sT = '-10000px';
this.hasSel = false;
this.fHideImg();
this.noBar || uni.showTabBar();
this.$emit("end");
},
fGetImgData() {
return new Promise((resolve, reject) => {
let prvX = this.prvX,
prvY = this.prvY,
prvWidth = this.prvWidth,
prvHeight = this.prvHeight;
// #ifdef MP-ALIPAY
this.ccp.getImageData({
x: prvX,
y: prvY,
width: prvWidth,
height: prvHeight,
success(res) {
resolve(res.data);
},
fail(err) {
reject(err);
}
}, this);
// #endif
// #ifndef MP-ALIPAY
uni.canvasGetImageData({
canvasId: 'prv-canvas',
x: prvX,
y: prvY,
width: prvWidth,
height: prvHeight,
success(res) {
resolve(res.data);
},
fail(err) {
reject(err);
}
}, this);
// #endif
});
},
async fColorChange(e) {
let tm_now = Date.now();
if (tm_now - this.prvTm < 100) return;
this.prvTm = tm_now;
// #ifdef MP-ALIPAY
uni.showLoading();
// #endif
// #ifndef MP-ALIPAY
uni.showLoading({
title: '加载中...',
mask: true
});
// #endif
if (!this.prvImgData) {
if (!(this.prvImgData = await this.fGetImgData().catch(() => {
uni.showToast({
title: "error_read",
duration: 2000,
})
}))) return;
this.target = new Uint8ClampedArray(this.prvImgData.length);
}
let data = this.prvImgData,
target = this.target,
i = e.detail.value,
r, g, b, a, h, s, l, d, p, q, t, min, max, hK, tR, tG, tB;
if (i === 0) {
target = data;
} else {
i = (i + 100) / 200;
if (i < 0.005) i = 0;
if (i > 0.995) i = 1;
for (let n = data.length - 1; n >= 0; n -= 4) {
r = data[n - 3] / 255;
g = data[n - 2] / 255;
b = data[n - 1] / 255;
max = Math.max(r, g, b);
min = Math.min(r, g, b);
d = max - min;
if (max === min) {
h = 0;
} else if (max === r && g >= b) {
h = 60 * ((g - b) / d);
} else if (max === r && g < b) {
h = 60 * ((g - b) / d) + 360;
} else if (max === g) {
h = 60 * ((b - r) / d) + 120;
} else if (max === b) {
h = 60 * ((r - g) / d) + 240;
}
l = (max + min) / 2;
if (l === 0 || max === min) {
s = 0;
} else if (0 < l && l <= 0.5) {
s = d / (2 * l);
} else if (l > 0.5) {
s = d / (2 - 2 * l);
}
data[n] && (a = data[n]);
if (i < 0.5) {
s = s * i / 0.5;
} else if (i > 0.5) {
s = 2 * s + 2 * i - (s * i / 0.5) - 1;
}
if (s === 0) {
r = g = b = Math.round(l * 255);
} else {
if (l < 0.5) {
q = l * (1 + s);
} else if (l >= 0.5) {
q = l + s - (l * s);
}
p = 2 * l - q;
hK = h / 360;
tR = hK + 1 / 3;
tG = hK;
tB = hK - 1 / 3;
let correctRGB = (t) => {
if (t < 0) {
return t + 1.0;
}
if (t > 1) {
return t - 1.0;
}
return t;
};
let createRGB = (t) => {
if (t < (1 / 6)) {
return p + ((q - p) * 6 * t);
} else if (t >= (1 / 6) && t < (1 / 2)) {
return q;
} else if (t >= (1 / 2) && t < (2 / 3)) {
return p + ((q - p) * 6 * ((2 / 3) - t));
}
return p;
};
r = tR = Math.round(createRGB(correctRGB(tR)) * 255);
g = tG = Math.round(createRGB(correctRGB(tG)) * 255);
b = tB = Math.round(createRGB(correctRGB(tB)) * 255);
}
a && (target[n] = a);
target[n - 3] = r;
target[n - 2] = g;
target[n - 1] = b;
}
}
let prvX = this.prvX,
prvY = this.prvY,
prvWidth = this.prvWidth,
prvHeight = this.prvHeight;
// #ifdef MP-ALIPAY
this.ccp.putImageData({
x: prvX,
y: prvY,
width: prvWidth,
height: prvHeight,
data: target,
fail() {
uni.showToast({
title: 'error_put',
duration: 2000
})
},
complete() {
uni.hideLoading();
}
}, this);
// #endif
// #ifndef MP-ALIPAY
uni.canvasPutImageData({
canvasId: 'prv-canvas',
x: prvX,
y: prvY,
width: prvWidth,
height: prvHeight,
data: target,
fail() {
uni.showToast({
title: 'error_put',
duration: 2000
})
},
complete() {
uni.hideLoading();
}
}, this);
// #endif
},
btop(base64) {
this.base64 = base64;
return new Promise(function(resolve, reject) {
var arr = base64.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return resolve((window.URL || window.webkitURL).createObjectURL(new Blob([u8arr], {
type: mime
})));
});
},
}
}
</script>
<style>
.my-canvas {
display: flex;
position: fixed !important;
background: #000000;
left: 0;
z-index: 100000;
width: 100%;
}
.my-avatar {
width: 150upx;
height: 150upx;
border-radius: 100%;
}
.oper-canvas {
display: flex;
position: fixed !important;
left: 0;
z-index: 100001;
width: 100%;
}
.prv-canvas {
display: flex;
position: fixed !important;
background: #000000;
left: 0;
z-index: 200000;
width: 100%;
}
.oper-wrapper {
height: 50px;
position: fixed !important;
box-sizing: border-box;
/* border: 1px solid #F1F1F1; */
background: #000000;
width: 100%;
left: 0;
bottom: 0;
z-index: 100009;
flex-direction: row;
}
.oper {
display: flex;
flex-direction: column;
justify-content: center;
padding: 10upx 20upx;
width: 100%;
height: 100%;
box-sizing: border-box;
align-self: center;
}
.btn-wrapper {
display: flex;
flex-direction: row;
/* #ifndef H5 */
flex-grow: 1;
/* #endif */
/* #ifdef H5 */
height: 50px;
/* #endif */
justify-content: space-between;
}
.btn-wrapper view {
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #FFFFFF;
/* border: 1px solid #f1f1f1; */
border-radius: 6%;
}
/* 点击效果 */
.hover {
/* background: #f1f1f1; */
/* border-radius: 6%; */
color: #ff0000!important;
}
.clr-wrapper {
display: flex;
flex-direction: row;
flex-grow: 1;
}
.clr-wrapper view {
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #FFFFFF;
/* border: 1px solid #f1f1f1; */
border-radius: 6%;
}
.my-slider {
flex-grow: 1;
}
</style>
1441
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
