上传图片就会涉及到图片裁剪
//上传图片
<view @click="uploadImage()"></view>
//canvas裁剪
<view class="Tailoring" style="position: absolute;top: 0;left: 0;z-index: -999;">
<view class="cropper-wrapper1">
<canvas class="cropper" :style="{ width: cropperOpt.width + 'px', height: cropperOpt.height + 'px' }"
disable-scroll="true" canvas-id="cropper"></canvas>
</view>
</view>
//上传图片的方法
<script>
import WeCropper from '@/common/weCropper.js';
const device = tt.getSystemInfoSync(); // 获取设备信息
const width = device.windowWidth; // 示例为一个与屏幕等宽的正方形裁剪框
const height = device.windowHeight;
import { checkImage as $checkImage } from '@/common/api.js';
export default {
data() {
return {
cropperOpt: {
id: 'cropper', // 用于手势操作的canvas组件标识符
targetId: 'targetCropper', // 用于用于生成截图的canvas组件标识符
pixelRatio: device.pixelRatio, // 传入设备像素比
width, // 画布宽度
height, // 画布高度
scale: 2.5, // 最大缩放倍数
zoom: 8, // 缩放系数
cut: {
x: (width - uni.upx2px(382)) / 2, // 裁剪框x轴起点
y: (height - uni.upx2px(502)) / 2, // 裁剪框y轴期起点
width: uni.upx2px(382), // 裁剪框宽度
height: uni.upx2px(502) // 裁剪框高度
}
},
cropper: ''
}
},
methods:{
upload() {
tt.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], //从相册选择
success: (res) => {
//转成base64
this.urlTobase64(res.tempFilePaths)
},
fail: (e) => {
return this.scopeAlbums()
},
});
},
// 是否授权
scopeAlbums() {
tt.getSetting({
success(res) {
if (res.authSetting['scope.album'] == false || res.authSetting['scope.camera'] == false) {
uni.showModal({
title: '温馨提示',
content: '为了更好的体验小程序,请授权相册哦~',
showCancel: false,
success() {
tt.openSetting({
success(res2) {
if (res2.authSetting['scope.album'] || res.authSetting[
'scope.camera']) {
return true;
} else {
return false;
}
},
fail(err) {
return false;
}
});
}
});
} else {
return true;
}
},
fail(err) {
return false;
}
});
},
// 图片转base64
urlTobase64(url) {
var that = this;
uni.getFileSystemManager().readFile({
filePath: url[0], //选择图片返回的相对路径
encoding: 'base64', //编码格式
success: async image => {
console.log('image', image);
const flag = await $checkImage(image.data); //抖音的图片违规校验
console.log(flag);
if (flag) {
console.log('图片不违规');
this.cropperOpt.src = url[0];
console.log(this.cropperOpt);
this.cropper = new WeCropper(this.cropperOpt).on('ready', ctx => {
console.log(`wecropper is ready for work!`);
})
.on('beforeImageLoad', ctx => {
uni.showToast({
title: '上传中',
icon: 'loading',
duration: 20000
});
})
.on('imageLoad', ctx => {
uni.hideToast();
setTimeout(res => {
this.cropper.getCropperImage(tempFilePath => {
if (tempFilePath) {
console.log('tempFilePath1', tempFilePath);
let arr = tempFilePath.split('?');
tempFilePath = arr[0];
console.log('tempFilePath2', tempFilePath);
this.imageIf = tempFilePath;
} else {
console.log('获取图片地址失败，请稍后重试');
}
});
}, 1500);
});
} else {
this.showloadings = false;
uni.showModal({
title: '温馨提示',
showCancel: false,
content: '图片违规！请重新上传'
});
}
},
fail: e => {
uni.hideLoading();
console.log('失败了1', e);
}
});
}
}
}
</script>
