335 lines
10 KiB
Vue
335 lines
10 KiB
Vue
<template>
|
||
<!-- 画布 start -->
|
||
<view class="content">
|
||
<view class="cropper-wrapper" :style="{ height: cropperOpt.height + 'px' }">
|
||
<canvas
|
||
class="cropper"
|
||
:disable-scroll="true"
|
||
@touchstart="touchStart"
|
||
@touchmove="touchMove"
|
||
@touchend="touchEnd"
|
||
:style="{ width: cropperOpt.width, height: cropperOpt.height, backgroundColor: 'rgba(0, 0, 0, 0.8)' }"
|
||
canvas-id="cropper"
|
||
></canvas>
|
||
<canvas
|
||
class="cropper"
|
||
:disable-scroll="true"
|
||
:style="{
|
||
position: 'fixed',
|
||
top: `-${cropperOpt.width * cropperOpt.pixelRatio}px`,
|
||
left: `-${cropperOpt.height * cropperOpt.pixelRatio}px`,
|
||
width: `${cropperOpt.width * cropperOpt.pixelRatio}px`,
|
||
height: `${cropperOpt.height * cropperOpt.pixelRatio}`
|
||
}"
|
||
canvas-id="targetId"
|
||
></canvas>
|
||
</view>
|
||
<!-- 画布 end -->
|
||
<!-- 按钮 start -->
|
||
<view class="cropper-buttons safe-area-padding" :style="{ height: bottomNavHeight + 'px' }">
|
||
<!-- #ifdef H5 -->
|
||
<!-- <view class="upload" @tap="uploadTap">{{i18n['选择图片']}}</view> -->
|
||
<!-- #endif -->
|
||
<!-- #ifndef H5 -->
|
||
<!-- <view class="upload" @tap="uploadTap">{{i18n['重新选择']}}</view> -->
|
||
<!-- #endif -->
|
||
<view class="upload" @tap="uploadTap">重新选择</view>
|
||
<view class="getCropperImage" @tap="getCropperImage(false)">完成</view>
|
||
</view>
|
||
<!-- 按钮 end -->
|
||
<!-- 断网检测 start -->
|
||
<fu-notwork></fu-notwork>
|
||
<!-- 断网检测 end -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// 引入裁剪js
|
||
import WeCropper from '../static/lib/weCropper.js';
|
||
export default {
|
||
props: {
|
||
// 裁剪矩形框的样式，其中可包含的属性为lineWidth-边框宽度(单位rpx)，color: 边框颜色，
|
||
// mask-遮罩颜色，一般设置为一个rgba的透明度，如"rgba(0, 0, 0, 0.35)"
|
||
boundStyle: {
|
||
type: Object,
|
||
default() {
|
||
return {
|
||
lineWidth: 4,
|
||
borderColor: 'rgb(245, 245, 245)',
|
||
mask: 'rgba(0, 0, 0, 0.35)'
|
||
};
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
// 底部导航的高度
|
||
bottomNavHeight: 50,
|
||
// originWidth: 200,
|
||
// originHeight: 200,
|
||
width: 0, //屏幕宽度
|
||
height: 0, //屏幕高度
|
||
cropperOpt: {
|
||
id: 'cropper', //画布id
|
||
targetId: 'targetCropper', //画布事件源id
|
||
pixelRatio: 1, //设备像素密度
|
||
width: 0, //屏幕宽度
|
||
height: 0, //屏幕高度
|
||
scale: 2.5, //图片缩放倍数
|
||
zoom: 8, //缩放系数
|
||
cut: {
|
||
x: (this.width - this.rectWidth) / 2, //裁剪框宽度x坐标
|
||
y: (this.height - this.rectHeight) / 2, //裁剪框宽度y坐标
|
||
width: this.rectWidth, //裁剪框宽度
|
||
height: this.rectHeight //裁剪框高度
|
||
},
|
||
// 裁剪矩形框的样式，其中可包含的属性为lineWidth-边框宽度(单位rpx)，color: 边框颜色，
|
||
// mask-遮罩颜色，一般设置为一个rgba的透明度，如"rgba(0, 0, 0, 0.35)"
|
||
boundStyle: {
|
||
lineWidth: uni.upx2px(this.boundStyle.lineWidth), //宽度
|
||
mask: this.boundStyle.mask, //遮罩层颜色
|
||
color: this.boundStyle.borderColor //边框颜色
|
||
}
|
||
},
|
||
// 裁剪框和输出图片的尺寸，高度默认等于宽度
|
||
// 输出图片宽度，单位px
|
||
destWidth: this.rectWidth, //输出图片宽度
|
||
destHeight: this.rectHeight, //输出图片高度
|
||
// 裁剪框宽度，单位px
|
||
rectWidth: 200, //裁剪框宽度
|
||
rectHeight: 200, //裁剪框高度
|
||
// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
|
||
fileType: 'jpg',
|
||
cropper: null //声明裁剪对象
|
||
};
|
||
},
|
||
/**
|
||
* @description 图片裁剪接收参数
|
||
* @param {Object} option
|
||
* @param {String} option.fileType 图片格式
|
||
* @param {String} option.myImgUrl 图片本地路径
|
||
* @param {String} option.rectHeight 图片裁剪框高度
|
||
* @param {String} option.rectWidth 图片裁剪框宽度
|
||
*/
|
||
onLoad(option) {
|
||
console.log('图片裁剪接受的参数==>', option);
|
||
// 获取手机宽高等信息
|
||
let rectInfo = uni.getSystemInfoSync();
|
||
this.width = rectInfo.windowWidth; //手机宽度
|
||
this.height = rectInfo.windowHeight - this.bottomNavHeight; //手机高度
|
||
console.log('width: '+this.width,'height: '+this.height)
|
||
this.cropperOpt.width = this.width; //手机宽度
|
||
this.cropperOpt.height = this.height; //手机高度
|
||
this.cropperOpt.pixelRatio = rectInfo.pixelRatio; //设备像素密度赋值
|
||
// 接收参数赋值
|
||
if (option.rectWidth && option.rectHeight) {
|
||
// 宽高参数如果超过了手机屏幕宽度,需要限制,否则生成的图片白屏
|
||
// 如果是宽度比高度大的图片 以最大宽度为准
|
||
// 如果是高度比宽度大的图片 以最大高度为准
|
||
let _scale = option.rectWidth / option.rectHeight;
|
||
let _width = Number(option.rectWidth);
|
||
let _height = Number(option.rectHeight);
|
||
if(_scale >= 1){
|
||
// 宽度为准
|
||
if(Number(option.rectWidth) >= this.width){
|
||
_width = this.width;
|
||
_height = option.rectHeight * _scale;
|
||
}
|
||
}else{
|
||
// 高度为准
|
||
if(Number(option.rectHeight) >= this.height){
|
||
_height = this.height;
|
||
_width = this.width * _scale;
|
||
}
|
||
}
|
||
let rectWidth = _width; //图片裁剪框宽度
|
||
let rectHeight = _height; //图片裁剪框高度
|
||
this.rectWidth = rectWidth;
|
||
this.rectHeight = rectHeight;
|
||
this.destWidth = rectWidth; //输出图片宽度
|
||
this.destHeight = rectHeight; //输出图片高度
|
||
console.log(`裁剪宽高==>${this.rectWidth},${this.rectHeight}，输出宽高==>${this.destWidth},${this.destHeight}`);
|
||
this.cropperOpt.cut = {
|
||
x: (this.width - rectWidth) / 2, //裁剪框宽度x坐标
|
||
y: (this.height - rectHeight) / 2, //裁剪框宽度y坐标
|
||
width: rectWidth, //图片裁剪框宽度
|
||
height: rectHeight //图片裁剪框高度
|
||
};
|
||
}
|
||
console.log('手机宽度',this.width)
|
||
console.log('手机高度',this.height)
|
||
console.log('设备像素密度赋值',this.cropperOpt.pixelRatio)
|
||
// 图片格式赋值
|
||
if (option.fileType) this.fileType = option.fileType;
|
||
// 初始化
|
||
this.cropper = new WeCropper(this.cropperOpt)
|
||
.on('ready', ctx => {
|
||
// wecropper is ready for work!
|
||
})
|
||
.on('beforeImageLoad', ctx => {
|
||
// before picture loaded, i can do something
|
||
})
|
||
.on('imageLoad', ctx => {
|
||
// picture loaded
|
||
})
|
||
.on('beforeDraw', (ctx, instance) => {
|
||
// before canvas draw,i can do something
|
||
});
|
||
// 设置导航栏样式，以免用户在page.json中没有设置为黑色背景
|
||
uni.setNavigationBarColor({
|
||
frontColor: '#ffffff',
|
||
backgroundColor: '#000000'
|
||
});
|
||
setTimeout(() => {
|
||
this.cropper.pushOrign(option.myImgUrl);
|
||
}, 200);
|
||
},
|
||
methods: {
|
||
/**
|
||
* @description 手指触摸开始事件
|
||
* @param {Object} e 事件对象
|
||
*/
|
||
touchStart(e) {
|
||
this.cropper.touchStart(e);
|
||
},
|
||
/**
|
||
* @description 手指触摸移动事件
|
||
* @param {Object} e 事件对象
|
||
*/
|
||
touchMove(e) {
|
||
this.cropper.touchMove(e);
|
||
},
|
||
/**
|
||
* @description 手指触摸开结束事件
|
||
* @param {Object} e 事件对象
|
||
*/
|
||
touchEnd(e) {
|
||
this.cropper.touchEnd(e);
|
||
},
|
||
/**
|
||
* @description 裁剪完成完成事件
|
||
*/
|
||
getCropperImage() {
|
||
let cropper_opt = {
|
||
destHeight: Number(this.destHeight), // uni.canvasToTempFilePath要求这些参数为数值 输出图片高度
|
||
destWidth: Number(this.destWidth), // 输出图片宽度
|
||
fileType: this.fileType //输出图片类型
|
||
};
|
||
// canvas生成图片
|
||
this.cropper.getCropperImage(cropper_opt, (path, err) => {
|
||
console.log('export image path',path);
|
||
console.log('export image err',err);
|
||
// 生成图片错误提示
|
||
if (err) {
|
||
uni.showModal({
|
||
title: this.i18n['温馨提示'],
|
||
content: err.message
|
||
});
|
||
} else {
|
||
// 裁剪完成推送裁剪后的path并返回上一页
|
||
uni.$emit('uPicCropper', path);
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
}
|
||
});
|
||
},
|
||
/**
|
||
* @description 重新选择图片
|
||
*/
|
||
uploadTap() {
|
||
let self = this;
|
||
uni.chooseImage({
|
||
count: 1, // 默认9
|
||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
||
success(res) {
|
||
// 获取选择图片之后的图片本地路径
|
||
let src = res.tempFilePaths[0];
|
||
// 获取裁剪图片资源后，给data添加src属性及其值
|
||
self.cropper.pushOrign(src);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* nvue不能用标签命名样式 */
|
||
/* #ifndef APP-NVUE */
|
||
image {
|
||
display: inline-block;
|
||
/* 解决图片加载时可能会瞬间变形的问题 */
|
||
will-change: transform;
|
||
}
|
||
|
||
/* 在weex，也即nvue中，所有元素默认为border-box */
|
||
view,
|
||
text {
|
||
box-sizing: border-box;
|
||
}
|
||
/* #endif */
|
||
/* 裁剪样式 start */
|
||
.content {
|
||
background-color: #000000;
|
||
height: 100vh;
|
||
/* background: rgba(255, 255, 255, 1); */
|
||
}
|
||
|
||
.cropper {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 99999999999999;
|
||
}
|
||
|
||
.cropper-buttons {
|
||
background-color: #000000;
|
||
color: #eee;
|
||
}
|
||
|
||
.cropper-wrapper {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
background-color: #000;
|
||
}
|
||
|
||
.cropper-buttons {
|
||
width: 100vw;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.cropper-buttons .upload,
|
||
.cropper-buttons .getCropperImage {
|
||
width: 50%;
|
||
text-align: center;
|
||
}
|
||
|
||
.cropper-buttons .upload {
|
||
text-align: left;
|
||
padding-left: 50rpx;
|
||
width: 180rpx;
|
||
}
|
||
|
||
.cropper-buttons .getCropperImage {
|
||
text-align: right;
|
||
padding-right: 50rpx;
|
||
width: 160rpx;
|
||
}
|
||
/* 裁剪样式 end */
|
||
</style>
|