info
This commit is contained in:
@@ -0,0 +1,780 @@
|
||||
<template>
|
||||
<view class="tui-container" @touchmove.stop.prevent="stop">
|
||||
<view
|
||||
class="tui-image-cropper"
|
||||
:change:prop="parse.propsChange"
|
||||
:prop="props"
|
||||
:data-lockRatio="lockRatio"
|
||||
:data-lockWidth="lockWidth"
|
||||
:data-lockHeight="lockHeight"
|
||||
:data-maxWidth="maxWidth"
|
||||
:data-minWidth="minWidth"
|
||||
:data-maxHeight="maxHeight"
|
||||
:data-minHeight="minHeight"
|
||||
:data-width="width"
|
||||
:data-height="height"
|
||||
:data-limitMove="limitMove"
|
||||
:data-windowHeight="sysInfo.windowHeight || 600"
|
||||
:data-windowWidth="sysInfo.windowWidth || 400"
|
||||
:data-imgTop="imgTop"
|
||||
:data-imgLeft="imgLeft"
|
||||
:data-imgWidth="imgWidth"
|
||||
:data-imgHeight="imgHeight"
|
||||
:data-angle="angle"
|
||||
@touchend="parse.cutTouchEnd"
|
||||
@touchstart="parse.cutTouchStart"
|
||||
@touchmove="parse.cutTouchMove"
|
||||
>
|
||||
<view class="tui-content">
|
||||
<view class="tui-content-top tui-bg-transparent" :style="{ transitionProperty: cutAnimation ? '' : 'background' }"></view>
|
||||
<view class="tui-content-middle">
|
||||
<view class="tui-bg-transparent tui-wxs-bg" :style="{ transitionProperty: cutAnimation ? '' : 'background' }"></view>
|
||||
<view class="tui-cropper-box" :style="{ borderColor: borderColor, transitionProperty: cutAnimation ? '' : 'background' }">
|
||||
<view
|
||||
v-for="(item, index) in 4"
|
||||
:key="index"
|
||||
class="tui-edge"
|
||||
:class="[`tui-${index < 2 ? 'top' : 'bottom'}-${index === 0 || index === 2 ? 'left' : 'right'}`]"
|
||||
:style="{
|
||||
width: edgeWidth,
|
||||
height: edgeWidth,
|
||||
borderColor: edgeColor,
|
||||
borderWidth: edgeBorderWidth,
|
||||
left: index === 0 || index === 2 ? `-${edgeOffsets}` : 'auto',
|
||||
right: index === 1 || index === 3 ? `-${edgeOffsets}` : 'auto',
|
||||
top: index < 2 ? `-${edgeOffsets}` : 'auto',
|
||||
bottom: index > 1 ? `-${edgeOffsets}` : 'auto'
|
||||
}"
|
||||
></view>
|
||||
</view>
|
||||
<view class="tui-flex-auto tui-bg-transparent" :style="{ transitionProperty: cutAnimation ? '' : 'background' }"></view>
|
||||
</view>
|
||||
<view class="tui-flex-auto tui-bg-transparent" :style="{ transitionProperty: cutAnimation ? '' : 'background' }"></view>
|
||||
</view>
|
||||
<image
|
||||
@load="imageLoad"
|
||||
@error="imageLoad"
|
||||
@touchstart="parse.touchstart"
|
||||
@touchmove="parse.touchmove"
|
||||
@touchend="parse.touchend"
|
||||
:data-minScale="minScale"
|
||||
:data-maxScale="maxScale"
|
||||
:data-disableRotate="disableRotate"
|
||||
:style="{
|
||||
width: imgWidth ? imgWidth + 'px' : 'auto',
|
||||
height: imgHeight ? imgHeight + 'px' : 'auto',
|
||||
transitionDuration: (cutAnimation ? 0.3 : 0) + 's'
|
||||
}"
|
||||
class="tui-cropper-image"
|
||||
:src="picturePath"
|
||||
v-if="picturePath"
|
||||
mode="widthFix"
|
||||
></image>
|
||||
</view>
|
||||
<view class="tui-cropper-tabbar" v-if="!custom">
|
||||
<view class="tui-op-btn" @tap.stop="back">取消</view>
|
||||
<image :src="rotateImg" class="tui-rotate-img" @tap="setAngle"></image>
|
||||
<view class="tui-op-btn" @tap.stop="getImage">完成</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script src="./tui-cropper-app.wxs" module="parse" lang="wxs"></script>
|
||||
<script>
|
||||
/**
|
||||
* 注意：组件中使用的图片地址，将文件复制到自己项目中
|
||||
* 如果图片位置与组件同级，编译成小程序时图片会丢失
|
||||
* 拷贝static下整个components文件夹
|
||||
*也可直接转成base64（不建议）
|
||||
*
|
||||
* */
|
||||
export default {
|
||||
name: 'tuiCropperApp',
|
||||
props: {
|
||||
//图片路径
|
||||
imageUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
/*
|
||||
默认正方形，可修改大小控制比例
|
||||
裁剪框高度 px
|
||||
*/
|
||||
height: {
|
||||
type: Number,
|
||||
default: 280
|
||||
},
|
||||
//裁剪框宽度 px
|
||||
width: {
|
||||
type: Number,
|
||||
default: 280
|
||||
},
|
||||
//裁剪框最小宽度 px
|
||||
minWidth: {
|
||||
type: Number,
|
||||
default: 100
|
||||
},
|
||||
//裁剪框最小高度 px
|
||||
minHeight: {
|
||||
type: Number,
|
||||
default: 100
|
||||
},
|
||||
//裁剪框最大宽度 px
|
||||
maxWidth: {
|
||||
type: Number,
|
||||
default: 360
|
||||
},
|
||||
//裁剪框最大高度 px
|
||||
maxHeight: {
|
||||
type: Number,
|
||||
default: 360
|
||||
},
|
||||
//裁剪框border颜色
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: 'rgba(255,255,255,0.1)'
|
||||
},
|
||||
//裁剪框边缘线颜色
|
||||
edgeColor: {
|
||||
type: String,
|
||||
default: '#FFFFFF'
|
||||
},
|
||||
//裁剪框边缘线宽度 w=h
|
||||
edgeWidth: {
|
||||
type: String,
|
||||
default: '34rpx'
|
||||
},
|
||||
//裁剪框边缘线border宽度
|
||||
edgeBorderWidth: {
|
||||
type: String,
|
||||
default: '6rpx'
|
||||
},
|
||||
//偏移距离，根据edgeBorderWidth进行调整
|
||||
edgeOffsets: {
|
||||
type: String,
|
||||
default: '6rpx'
|
||||
},
|
||||
/**
|
||||
* 如果宽度和高度都为true则裁剪框禁止拖动
|
||||
* 裁剪框宽度锁定
|
||||
*/
|
||||
lockWidth: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//裁剪框高度锁定
|
||||
lockHeight: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//锁定裁剪框比例（放大或缩小）
|
||||
lockRatio: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//生成的图片尺寸相对剪裁框的比例
|
||||
scaleRatio: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
//图片的质量，取值范围为 (0, 1]，不在范围内时当作1.0处理
|
||||
quality: {
|
||||
type: Number,
|
||||
default: 0.8
|
||||
},
|
||||
//图片旋转角度[当前版本只能传90的倍数，否则可能导致裁剪失败或不正确]
|
||||
rotateAngle: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
//图片最小缩放比
|
||||
minScale: {
|
||||
type: Number,
|
||||
default: 0.5
|
||||
},
|
||||
//图片最大缩放比
|
||||
maxScale: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
//是否禁用触摸旋转（为false则可以触摸转动图片，limitMove为false生效）
|
||||
//此属性App端当前版本不可用，否则可能导致裁剪失败或不正确
|
||||
disableRotate: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//是否限制移动范围(剪裁框只能在图片内,为true不可触摸转动图片)
|
||||
//注意:此属性当前版本不可传false，由于api不支持超出裁剪区域裁剪，所以只能限制在裁剪框内
|
||||
limitMove: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//自定义操作栏（为true时隐藏底部操作栏）
|
||||
custom: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//值发生改变开始裁剪（custom为true时生效）
|
||||
startCutting: {
|
||||
type: [Number, Boolean],
|
||||
default: 0
|
||||
},
|
||||
/**
|
||||
* 是否返回base64(H5端默认base64)
|
||||
* 支持平台：App，微信小程序，支付宝小程序,H5(默认url就是base64)
|
||||
**/
|
||||
isBase64: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//裁剪时是否显示loadding
|
||||
loadding: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//旋转icon
|
||||
rotateImg: {
|
||||
type: String,
|
||||
default: '/static/components/cropper/img_rotate.png'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
TIME_CUT_CENTER: null,
|
||||
cutX: 0, //画布x轴起点
|
||||
cutY: 0, //画布y轴起点0
|
||||
canvasWidth: 0,
|
||||
canvasHeight: 0,
|
||||
naturalWidth: 0,
|
||||
naturalHeight: 0,
|
||||
imgWidth: 0, //图片宽度
|
||||
imgHeight: 0, //图片高度
|
||||
scale: 1, //图片缩放比
|
||||
angle: 0, //图片旋转角度
|
||||
cutAnimation: false, //是否开启图片和裁剪框过渡
|
||||
cutAnimationTime: null,
|
||||
imgTop: 0, //图片上边距
|
||||
imgLeft: 0, //图片左边距
|
||||
sysInfo: {},
|
||||
props: '',
|
||||
sizeChange: 0, //2
|
||||
angleChange: 0, //3
|
||||
resetChange: 0, //4
|
||||
centerChange: 0, //5
|
||||
orientation: '',
|
||||
picturePath: ''
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
//定义变量然后利用change触发
|
||||
imageUrl(val, oldVal) {
|
||||
this.imageReset();
|
||||
this.showLoading();
|
||||
uni.getImageInfo({
|
||||
src: val,
|
||||
success: res => {
|
||||
//计算图片尺寸
|
||||
this.naturalWidth = res.width;
|
||||
this.naturalHeight = res.height;
|
||||
this.orientation = res.orientation;
|
||||
if (this.orientation != 'up') {
|
||||
//宽高传值颠倒
|
||||
let width = this.orientation == 'down' ? res.width : res.height;
|
||||
let height = this.orientation == 'down' ? res.height : res.width;
|
||||
this.compressImage(val, width, height);
|
||||
} else {
|
||||
this.picturePath = val;
|
||||
this.imgComputeSize(res.width, res.height);
|
||||
if (this.limitMove) {
|
||||
this.angleChange++;
|
||||
this.props = `3,${this.angleChange}`;
|
||||
}
|
||||
}
|
||||
},
|
||||
fail: err => {
|
||||
this.imgComputeSize();
|
||||
if (this.limitMove) {
|
||||
this.angleChange++;
|
||||
this.props = `3,${this.angleChange}`;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
rotateAngle(val) {
|
||||
this.cutAnimation = true;
|
||||
this.angle = val;
|
||||
this.angleChanged(val);
|
||||
},
|
||||
cutAnimation(val) {
|
||||
//开启过渡260毫秒之后自动关闭
|
||||
clearTimeout(this.cutAnimationTime);
|
||||
if (val) {
|
||||
this.cutAnimationTime = setTimeout(() => {
|
||||
this.cutAnimation = false;
|
||||
}, 260);
|
||||
}
|
||||
},
|
||||
limitMove(val) {
|
||||
if (val) {
|
||||
this.angleChanged(this.angle);
|
||||
}
|
||||
},
|
||||
startCutting(val) {
|
||||
if (this.custom && val) {
|
||||
this.getImage();
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.picturePath = this.imageUrl;
|
||||
},
|
||||
mounted() {
|
||||
this.sysInfo = uni.getSystemInfoSync();
|
||||
this.imgTop = this.sysInfo.windowHeight / 2;
|
||||
this.imgLeft = this.sysInfo.windowWidth / 2;
|
||||
this.canvasHeight = this.height;
|
||||
this.canvasWidth = this.width;
|
||||
//初始化
|
||||
setTimeout(() => {
|
||||
this.props = '1,1';
|
||||
}, 0);
|
||||
setTimeout(() => {
|
||||
this.$emit('ready', {});
|
||||
}, 200);
|
||||
},
|
||||
methods: {
|
||||
toast(title) {
|
||||
uni.showToast({
|
||||
title: title || '出错啦~',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
async compressImage(url, width, height) {
|
||||
let imgUrl = url;
|
||||
if (~imgUrl.indexOf('https:')) {
|
||||
imgUrl = await this.getLocalImage(url);
|
||||
if (!imgUrl) {
|
||||
this.toast('网络图片处理失败~');
|
||||
return;
|
||||
}
|
||||
}
|
||||
let defaultAngle =
|
||||
{
|
||||
up: 0,
|
||||
down: 180,
|
||||
left: 270,
|
||||
right: 90
|
||||
}[this.orientation] || 0;
|
||||
let f_dst = `_documents/${this.unique()}.jpg`;
|
||||
plus.zip.compressImage(
|
||||
{
|
||||
src: imgUrl,
|
||||
dst: f_dst,
|
||||
overwrite: true,
|
||||
rotate: defaultAngle,
|
||||
format: 'jpg'
|
||||
},
|
||||
i => {
|
||||
this.picturePath = i.target;
|
||||
this.imgComputeSize(width, height);
|
||||
if (this.limitMove) {
|
||||
this.angleChange++;
|
||||
this.props = `3,${this.angleChange}`;
|
||||
}
|
||||
},
|
||||
e => {
|
||||
this.picturePath = imgUrl;
|
||||
this.imgComputeSize(width, height);
|
||||
if (this.limitMove) {
|
||||
this.angleChange++;
|
||||
this.props = `3,${this.angleChange}`;
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
//网络图片转成本地文件[同步执行]
|
||||
async getLocalImage(url) {
|
||||
return await new Promise((resolve, reject) => {
|
||||
uni.downloadFile({
|
||||
url: url,
|
||||
success: res => {
|
||||
resolve(res.tempFilePath);
|
||||
},
|
||||
fail: res => {
|
||||
reject(false);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
//返回裁剪后图片信息
|
||||
getImage() {
|
||||
if (!this.picturePath) {
|
||||
this.toast('请选择图片');
|
||||
return;
|
||||
}
|
||||
this.loadding && this.showLoading();
|
||||
let cutting = async () => {
|
||||
//图片实际大小
|
||||
let imgUrl = this.picturePath;
|
||||
if (~this.picturePath.indexOf('https:')) {
|
||||
imgUrl = await this.getLocalImage(this.picturePath);
|
||||
if (!imgUrl) {
|
||||
this.toast('网络图片处理失败~');
|
||||
return;
|
||||
}
|
||||
}
|
||||
let data = {
|
||||
url: '',
|
||||
base64: ''
|
||||
};
|
||||
let f_dst = `_documents/${this.unique()}.jpg`;
|
||||
let multiple = Math.round(this.angle / 90);
|
||||
let angle = 0,
|
||||
x = 0,
|
||||
y = 0,
|
||||
left = 0,
|
||||
top = 0,
|
||||
clipHeight = 0,
|
||||
clipWidth = 0;
|
||||
|
||||
let isAndroid = this.sysInfo.platform.toLocaleLowerCase() == 'android';
|
||||
|
||||
if (multiple % 2 == 0) {
|
||||
angle = this.angle % 360 == 0 || this.angle == 0 ? 0 : 180;
|
||||
if (!isAndroid || (isAndroid && angle == 0)) {
|
||||
x = this.imgLeft - (this.imgWidth * this.scale) / 2;
|
||||
y = this.imgTop - (this.imgHeight * this.scale) / 2;
|
||||
left = (((this.cutX - x) / this.imgWidth / this.scale) * 100).toFixed(2);
|
||||
top = (((this.cutY - y) / this.imgHeight / this.scale) * 100).toFixed(2);
|
||||
clipWidth = ((this.canvasWidth / this.imgWidth / this.scale) * 100).toFixed(2);
|
||||
clipHeight = ((this.canvasHeight / this.imgHeight / this.scale) * 100).toFixed(2);
|
||||
} else {
|
||||
x = this.imgLeft - (this.imgWidth * this.scale) / 2;
|
||||
y = this.imgTop - (this.imgHeight * this.scale) / 2;
|
||||
left = (((this.imgWidth * this.scale - (this.cutX - x) - this.canvasWidth) / this.imgWidth / this.scale) * 100).toFixed(2);
|
||||
top = (((this.imgHeight * this.scale - (this.cutY - y) - this.canvasHeight) / this.imgHeight / this.scale) * 100).toFixed(2);
|
||||
clipWidth = ((this.canvasWidth / this.imgWidth / this.scale) * 100).toFixed(2);
|
||||
clipHeight = ((this.canvasHeight / this.imgHeight / this.scale) * 100).toFixed(2);
|
||||
}
|
||||
} else {
|
||||
angle = this.angle % 270 == 0 ? 270 : 90;
|
||||
if (isAndroid) {
|
||||
if (angle == 90) {
|
||||
x = this.imgLeft - (this.imgHeight * this.scale) / 2;
|
||||
y = this.imgTop - (this.imgWidth * this.scale) / 2;
|
||||
top = (((this.imgHeight * this.scale - (this.cutX - x) - this.canvasHeight) / this.imgHeight / this.scale) * 100).toFixed(2);
|
||||
left = (((this.imgWidth * this.scale - (this.cutY - y) - this.canvasWidth) / this.imgWidth / this.scale) * 100).toFixed(2);
|
||||
clipHeight = ((this.canvasWidth / this.imgHeight / this.scale) * 100).toFixed(2);
|
||||
clipWidth = ((this.canvasHeight / this.imgWidth / this.scale) * 100).toFixed(2);
|
||||
} else {
|
||||
x = this.imgLeft - (this.imgHeight * this.scale) / 2;
|
||||
y = this.imgTop - (this.imgWidth * this.scale) / 2;
|
||||
top = (((this.cutX - x) / this.imgHeight / this.scale) * 100).toFixed(2);
|
||||
left = (((this.cutY - y) / this.imgWidth / this.scale) * 100).toFixed(2);
|
||||
clipHeight = ((this.canvasWidth / this.imgHeight / this.scale) * 100).toFixed(2);
|
||||
clipWidth = ((this.canvasHeight / this.imgWidth / this.scale) * 100).toFixed(2);
|
||||
}
|
||||
} else {
|
||||
x = this.imgLeft - (this.imgHeight * this.scale) / 2;
|
||||
y = this.imgTop - (this.imgWidth * this.scale) / 2;
|
||||
left = (((this.cutX - x) / this.imgHeight / this.scale) * 100).toFixed(2);
|
||||
top = (((this.cutY - y) / this.imgWidth / this.scale) * 100).toFixed(2);
|
||||
clipWidth = ((this.canvasWidth / this.imgHeight / this.scale) * 100).toFixed(2);
|
||||
clipHeight = ((this.canvasHeight / this.imgWidth / this.scale) * 100).toFixed(2);
|
||||
}
|
||||
}
|
||||
let width = (this.imgWidth < this.naturalWidth ? this.naturalWidth : this.imgWidth) * this.scale;
|
||||
let height = (this.imgHeight < this.naturalHeight ? this.naturalHeight : this.imgHeight) * this.scale;
|
||||
// if (isAndroid && width > 800) {
|
||||
// width = '800px';
|
||||
// height = 'auto'
|
||||
// } else {
|
||||
// width = `${width}px`;
|
||||
// height = `${height}px`
|
||||
// }
|
||||
width = `${width}px`;
|
||||
height = `${height}px`;
|
||||
left = Number(left) <= 0 ? 0 : left;
|
||||
top = Number(top) <= 0 ? 0 : top;
|
||||
plus.zip.compressImage(
|
||||
{
|
||||
src: imgUrl,
|
||||
dst: f_dst,
|
||||
quality: this.quality * 100,
|
||||
overwrite: true,
|
||||
format: 'jpg',
|
||||
width: width,
|
||||
height: height,
|
||||
rotate: angle,
|
||||
clip: {
|
||||
top: `${top}%`,
|
||||
left: `${left}%`,
|
||||
width: `${clipWidth}%`,
|
||||
height: `${clipHeight}%`
|
||||
}
|
||||
},
|
||||
i => {
|
||||
this.loadding && uni.hideLoading();
|
||||
data.url = i.target;
|
||||
if (this.isBase64) {
|
||||
plus.io.resolveLocalFileSystemURL(f_dst, entry => {
|
||||
entry.file(
|
||||
file => {
|
||||
let reader = new plus.io.FileReader();
|
||||
reader.onloadend = e => {
|
||||
data.base64 = e.target.result;
|
||||
this.$emit('cropper', data);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
},
|
||||
e => {
|
||||
//转换base64失败，传回图片url
|
||||
this.$emit('cropper', data);
|
||||
}
|
||||
);
|
||||
});
|
||||
} else {
|
||||
this.$emit('cropper', data);
|
||||
}
|
||||
},
|
||||
e => {
|
||||
console.log(e);
|
||||
this.toast('图片裁剪失败,请稍候再试~');
|
||||
//原图输出
|
||||
// data.url = imgUrl;
|
||||
// this.$emit('cropper', data);
|
||||
}
|
||||
);
|
||||
};
|
||||
setTimeout(() => {
|
||||
cutting();
|
||||
}, 20);
|
||||
},
|
||||
unique(n = 6) {
|
||||
let rnd = '';
|
||||
for (let i = 0; i < n; i++) rnd += Math.floor(Math.random() * 10);
|
||||
return 'thorui_' + new Date().getTime() + rnd;
|
||||
},
|
||||
change(e) {
|
||||
this.cutX = e.cutX || 0;
|
||||
this.cutY = e.cutY || 0;
|
||||
this.canvasWidth = e.canvasWidth || this.width;
|
||||
this.canvasHeight = e.canvasHeight || this.height;
|
||||
this.imgWidth = e.imgWidth || this.imgWidth;
|
||||
this.imgHeight = e.imgHeight || this.imgHeight;
|
||||
this.scale = e.scale || 1;
|
||||
this.angle = e.angle || 0;
|
||||
this.imgTop = e.imgTop || 0;
|
||||
this.imgLeft = e.imgLeft || 0;
|
||||
},
|
||||
imageReset() {
|
||||
this.scale = 1;
|
||||
this.angle = 0;
|
||||
let sys = this.sysInfo.windowHeight ? this.sysInfo : uni.getSystemInfoSync();
|
||||
this.imgTop = sys.windowHeight / 2;
|
||||
this.imgLeft = sys.windowWidth / 2;
|
||||
this.resetChange++;
|
||||
this.props = `4,${this.resetChange}`;
|
||||
//初始化旋转角度 0deg
|
||||
this.$emit('initAngle', {});
|
||||
},
|
||||
imageLoad(e) {
|
||||
this.imageReset();
|
||||
uni.hideLoading();
|
||||
this.$emit('imageLoad', {});
|
||||
},
|
||||
|
||||
imgComputeSize(width, height) {
|
||||
//默认按图片最小边 = 对应裁剪框尺寸
|
||||
let imgWidth = width,
|
||||
imgHeight = height;
|
||||
if (imgWidth && imgHeight) {
|
||||
if (imgWidth / imgHeight > this.width / this.height) {
|
||||
imgHeight = this.height;
|
||||
imgWidth = (width / height) * imgHeight;
|
||||
} else {
|
||||
imgWidth = this.width;
|
||||
imgHeight = (height / width) * imgWidth;
|
||||
}
|
||||
} else {
|
||||
let sys = this.sysInfo || uni.getSystemInfoSync();
|
||||
imgWidth = sys.windowWidth;
|
||||
imgHeight = 0;
|
||||
}
|
||||
this.imgWidth = imgWidth;
|
||||
this.imgHeight = imgHeight;
|
||||
this.sizeChange++;
|
||||
this.props = `2,${this.sizeChange}`;
|
||||
},
|
||||
moveStop() {
|
||||
clearTimeout(this.TIME_CUT_CENTER);
|
||||
this.TIME_CUT_CENTER = setTimeout(() => {
|
||||
if (!this.cutAnimation) {
|
||||
this.cutAnimation = true;
|
||||
}
|
||||
this.centerChange++;
|
||||
this.props = `5,${this.centerChange}`;
|
||||
}, 666);
|
||||
},
|
||||
moveDuring() {
|
||||
clearTimeout(this.TIME_CUT_CENTER);
|
||||
},
|
||||
showLoading() {
|
||||
uni.showLoading({
|
||||
title: '请稍候...',
|
||||
mask: true
|
||||
});
|
||||
},
|
||||
stop() {},
|
||||
back() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
angleChanged(val) {
|
||||
this.moveStop();
|
||||
if (this.limitMove && val % 90) {
|
||||
this.angle = Math.round(val / 90) * 90;
|
||||
}
|
||||
this.angleChange++;
|
||||
this.props = `3,${this.angleChange}`;
|
||||
},
|
||||
setAngle() {
|
||||
this.cutAnimation = true;
|
||||
this.angle = this.angle + 90;
|
||||
this.angleChanged(this.angle);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tui-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tui-image-cropper {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.tui-content {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tui-bg-transparent {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
.tui-content-top {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tui-content-middle {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tui-cropper-box {
|
||||
position: relative;
|
||||
/* transition-duration: 0.2s; */
|
||||
border-style: solid;
|
||||
border-width: 1rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tui-flex-auto {
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.tui-cropper-image {
|
||||
width: 100%;
|
||||
border-style: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.tui-edge {
|
||||
border-style: solid;
|
||||
pointer-events: auto;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tui-top-left {
|
||||
border-bottom-width: 0 !important;
|
||||
border-right-width: 0 !important;
|
||||
}
|
||||
|
||||
.tui-top-right {
|
||||
border-bottom-width: 0 !important;
|
||||
border-left-width: 0 !important;
|
||||
}
|
||||
|
||||
.tui-bottom-left {
|
||||
border-top-width: 0 !important;
|
||||
border-right-width: 0 !important;
|
||||
}
|
||||
|
||||
.tui-bottom-right {
|
||||
border-top-width: 0 !important;
|
||||
border-left-width: 0 !important;
|
||||
}
|
||||
|
||||
.tui-cropper-tabbar {
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
padding: 0 40rpx;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.tui-cropper-tabbar::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
border-top: 1rpx solid rgba(255, 255, 255, 0.2);
|
||||
-webkit-transform: scaleY(0.5) translateZ(0);
|
||||
transform: scaleY(0.5) translateZ(0);
|
||||
transform-origin: 0 100%;
|
||||
}
|
||||
|
||||
.tui-op-btn {
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tui-rotate-img {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,560 @@
|
||||
var cropper = {
|
||||
CUT_START: null,
|
||||
cutX: 0, //画布x轴起点
|
||||
cutY: 0, //画布y轴起点0
|
||||
touchRelative: [{
|
||||
x: 0,
|
||||
y: 0
|
||||
}], //手指或鼠标和图片中心的相对位置
|
||||
flagCutTouch: false, //是否是拖动裁剪框
|
||||
hypotenuseLength: 0, //双指触摸时斜边长度
|
||||
flagEndTouch: false, //是否结束触摸
|
||||
canvasWidth: 0,
|
||||
canvasHeight: 0,
|
||||
imgWidth: 0, //图片宽度
|
||||
imgHeight: 0, //图片高度
|
||||
scale: 1, //图片缩放比
|
||||
angle: 0, //图片旋转角度
|
||||
imgTop: 0, //图片上边距
|
||||
imgLeft: 0, //图片左边距
|
||||
//是否限制移动范围(剪裁框只能在图片内,为true不可触摸转动图片)
|
||||
limitMove: true,
|
||||
minHeight: 0,
|
||||
maxHeight: 0,
|
||||
minWidth: 0,
|
||||
maxWidth: 0,
|
||||
windowHeight: 0,
|
||||
windowWidth: 0,
|
||||
init: true
|
||||
}
|
||||
|
||||
function bool(str) {
|
||||
return str === 'true' || str == true ? true : false
|
||||
}
|
||||
|
||||
function touchstart(e, ins) {
|
||||
//var instance = e.instance;
|
||||
// var state = instance.getState();
|
||||
var touch = e.touches || e.changedTouches;
|
||||
cropper.flagEndTouch = false;
|
||||
if (touch.length == 1) {
|
||||
cropper.touchRelative[0] = {
|
||||
x: touch[0].pageX - cropper.imgLeft,
|
||||
y: touch[0].pageY - cropper.imgTop
|
||||
};
|
||||
} else {
|
||||
var width = Math.abs(touch[0].pageX - touch[1].pageX);
|
||||
var height = Math.abs(touch[0].pageY - touch[1].pageY);
|
||||
cropper.touchRelative = [{
|
||||
x: touch[0].pageX - cropper.imgLeft,
|
||||
y: touch[0].pageY - cropper.imgTop
|
||||
},
|
||||
{
|
||||
x: touch[1].pageX - cropper.imgLeft,
|
||||
y: touch[1].pageY - cropper.imgTop
|
||||
}
|
||||
];
|
||||
cropper.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function moveDuring(ins) {
|
||||
if (!ins) return;
|
||||
ins.callMethod('moveDuring')
|
||||
}
|
||||
|
||||
function moveStop(ins) {
|
||||
if (!ins) return;
|
||||
ins.callMethod('moveStop')
|
||||
};
|
||||
|
||||
function setCutCenter(ins) {
|
||||
var cutY = (cropper.windowHeight - cropper.canvasHeight) * 0.5;
|
||||
var cutX = (cropper.windowWidth - cropper.canvasWidth) * 0.5;
|
||||
//顺序不能变
|
||||
cropper.imgTop = cropper.imgTop - cropper.cutY + cutY;
|
||||
cropper.cutY = cutY; //截取的框上边距
|
||||
cropper.imgLeft = cropper.imgLeft - cropper.cutX + cutX;
|
||||
cropper.cutX = cutX; //截取的框左边距
|
||||
styleUpdate(ins)
|
||||
cutDetectionPosition(ins)
|
||||
imgTransform(ins)
|
||||
updateData(ins)
|
||||
}
|
||||
|
||||
function touchmove(e, ins) {
|
||||
var touch = e.touches || e.changedTouches;
|
||||
if (cropper.flagEndTouch) return;
|
||||
moveDuring(ins);
|
||||
if (e.touches.length == 1) {
|
||||
var left = touch[0].pageX - cropper.touchRelative[0].x,
|
||||
top = touch[0].pageY - cropper.touchRelative[0].y;
|
||||
cropper.imgLeft = left;
|
||||
cropper.imgTop = top;
|
||||
imgTransform(ins);
|
||||
imgMarginDetectionPosition(ins);
|
||||
} else {
|
||||
var res = e.instance.getDataset();
|
||||
var minScale = +res.minscale;
|
||||
var maxScale = +res.maxscale;
|
||||
var disableRotate = bool(res.disablerotate)
|
||||
var width = Math.abs(touch[0].pageX - touch[1].pageX),
|
||||
height = Math.abs(touch[0].pageY - touch[1].pageY),
|
||||
hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)),
|
||||
scale = cropper.scale * (hypotenuse / cropper.hypotenuseLength),
|
||||
current_deg = 0;
|
||||
scale = scale <= minScale ? minScale : scale;
|
||||
scale = scale >= maxScale ? maxScale : scale;
|
||||
cropper.scale = scale;
|
||||
imgMarginDetectionScale(ins, true);
|
||||
var touchRelative = [{
|
||||
x: touch[0].pageX - cropper.imgLeft,
|
||||
y: touch[0].pageY - cropper.imgTop
|
||||
},
|
||||
{
|
||||
x: touch[1].pageX - cropper.imgLeft,
|
||||
y: touch[1].pageY - cropper.imgTop
|
||||
}
|
||||
];
|
||||
if (!disableRotate) {
|
||||
var first_atan = (180 / Math.PI) * Math.atan2(touchRelative[0].y, touchRelative[0].x);
|
||||
var first_atan_old = (180 / Math.PI) * Math.atan2(cropper.touchRelative[0].y, cropper.touchRelative[0].x);
|
||||
var second_atan = (180 / Math.PI) * Math.atan2(touchRelative[1].y, touchRelative[1].x);
|
||||
var second_atan_old = (180 / Math.PI) * Math.atan2(cropper.touchRelative[1].y, cropper.touchRelative[1].x);
|
||||
var first_deg = first_atan - first_atan_old,
|
||||
second_deg = second_atan - second_atan_old;
|
||||
if (first_deg != 0) {
|
||||
current_deg = first_deg;
|
||||
} else if (second_deg != 0) {
|
||||
current_deg = second_deg;
|
||||
}
|
||||
}
|
||||
cropper.touchRelative = touchRelative;
|
||||
cropper.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
|
||||
//更新视图
|
||||
cropper.angle = cropper.angle + current_deg;
|
||||
imgTransform(ins);
|
||||
}
|
||||
}
|
||||
|
||||
function touchend(e, ins) {
|
||||
cropper.flagEndTouch = true;
|
||||
moveStop(ins);
|
||||
updateData(ins)
|
||||
}
|
||||
|
||||
|
||||
function cutTouchStart(e, ins) {
|
||||
var touch = e.touches || e.changedTouches;
|
||||
var currentX = touch[0].pageX;
|
||||
var currentY = touch[0].pageY;
|
||||
|
||||
/*
|
||||
* (右下-1 右上-2 左上-3 左下-4)
|
||||
* left_x [3,4]
|
||||
* top_y [2,3]
|
||||
* right_x [1,2]
|
||||
* bottom_y [1,4]
|
||||
*/
|
||||
var left_x1 = cropper.cutX - 30;
|
||||
var left_x2 = cropper.cutX + 30;
|
||||
|
||||
var top_y1 = cropper.cutY - 30;
|
||||
var top_y2 = cropper.cutY + 30;
|
||||
|
||||
var right_x1 = cropper.cutX + cropper.canvasWidth - 30;
|
||||
var right_x2 = cropper.cutX + cropper.canvasWidth + 30;
|
||||
|
||||
var bottom_y1 = cropper.cutY + cropper.canvasHeight - 30;
|
||||
var bottom_y2 = cropper.cutY + cropper.canvasHeight + 30;
|
||||
|
||||
if (currentX > right_x1 && currentX < right_x2 && currentY > bottom_y1 && currentY < bottom_y2) {
|
||||
moveDuring();
|
||||
cropper.flagCutTouch = true;
|
||||
cropper.flagEndTouch = true;
|
||||
cropper.CUT_START = {
|
||||
width: cropper.canvasWidth,
|
||||
height: cropper.canvasHeight,
|
||||
x: currentX,
|
||||
y: currentY,
|
||||
corner: 1
|
||||
};
|
||||
} else if (currentX > right_x1 && currentX < right_x2 && currentY > top_y1 && currentY < top_y2) {
|
||||
moveDuring();
|
||||
cropper.flagCutTouch = true;
|
||||
cropper.flagEndTouch = true;
|
||||
cropper.CUT_START = {
|
||||
width: cropper.canvasWidth,
|
||||
height: cropper.canvasHeight,
|
||||
x: currentX,
|
||||
y: currentY,
|
||||
cutY: cropper.cutY,
|
||||
cutX: cropper.cutX,
|
||||
corner: 2
|
||||
};
|
||||
} else if (currentX > left_x1 && currentX < left_x2 && currentY > top_y1 && currentY < top_y2) {
|
||||
moveDuring();
|
||||
cropper.flagCutTouch = true;
|
||||
cropper.flagEndTouch = true;
|
||||
cropper.CUT_START = {
|
||||
width: cropper.canvasWidth,
|
||||
height: cropper.canvasHeight,
|
||||
cutY: cropper.cutY,
|
||||
cutX: cropper.cutX,
|
||||
x: currentX,
|
||||
y: currentY,
|
||||
corner: 3
|
||||
};
|
||||
} else if (currentX > left_x1 && currentX < left_x2 && currentY > bottom_y1 && currentY < bottom_y2) {
|
||||
moveDuring();
|
||||
cropper.flagCutTouch = true;
|
||||
cropper.flagEndTouch = true;
|
||||
cropper.CUT_START = {
|
||||
width: cropper.canvasWidth,
|
||||
height: cropper.canvasHeight,
|
||||
cutY: cropper.cutY,
|
||||
cutX: cropper.cutX,
|
||||
x: currentX,
|
||||
y: currentY,
|
||||
corner: 4
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function cutTouchMove(e, ins) {
|
||||
if (!cropper.CUT_START || cropper.CUT_START === 'null') return;
|
||||
if (cropper.flagCutTouch) {
|
||||
var touch = e.touches || e.changedTouches;
|
||||
var res = e.instance.getDataset();
|
||||
var lockRatio = bool(res.lockratio);
|
||||
var lockWidth = bool(res.lockwidth);
|
||||
var lockHeight = bool(res.lockheight);
|
||||
if (lockRatio && (lockWidth || lockHeight)) return;
|
||||
var width = cropper.canvasWidth,
|
||||
height = cropper.canvasHeight,
|
||||
cutY = cropper.cutY,
|
||||
cutX = cropper.cutX;
|
||||
|
||||
var size_correct = function() {
|
||||
width = width <= cropper.maxWidth ? (width >= cropper.minWidth ? width : cropper.minWidth) : cropper.maxWidth;
|
||||
height = height <= cropper.maxHeight ? (height >= cropper.minHeight ? height : cropper.minHeight) : cropper.maxHeight;
|
||||
}
|
||||
|
||||
var size_inspect = function() {
|
||||
if ((width > cropper.maxWidth || width < cropper.minWidth || height > cropper.maxHeight || height < cropper.minHeight) &&
|
||||
lockRatio) {
|
||||
size_correct();
|
||||
return false;
|
||||
} else {
|
||||
size_correct();
|
||||
return true;
|
||||
}
|
||||
};
|
||||
height = cropper.CUT_START.height + (cropper.CUT_START.corner > 1 && cropper.CUT_START.corner < 4 ? 1 : -1) * (
|
||||
cropper.CUT_START.y - touch[0].pageY);
|
||||
switch (cropper.CUT_START.corner) {
|
||||
case 1:
|
||||
width = cropper.CUT_START.width - cropper.CUT_START.x + touch[0].pageX;
|
||||
if (lockRatio) {
|
||||
height = width / (cropper.canvasWidth / cropper.canvasHeight);
|
||||
}
|
||||
if (!size_inspect()) return;
|
||||
break;
|
||||
case 2:
|
||||
width = cropper.CUT_START.width - cropper.CUT_START.x + touch[0].pageX;
|
||||
if (lockRatio) {
|
||||
height = width / (cropper.canvasWidth / cropper.canvasHeight);
|
||||
}
|
||||
if (!size_inspect()) return;
|
||||
cutY = cropper.CUT_START.cutY - (height - cropper.CUT_START.height);
|
||||
break;
|
||||
case 3:
|
||||
width = cropper.CUT_START.width + cropper.CUT_START.x - touch[0].pageX;
|
||||
if (lockRatio) {
|
||||
height = width / (cropper.canvasWidth / cropper.canvasHeight);
|
||||
}
|
||||
if (!size_inspect()) return;
|
||||
cutY = cropper.CUT_START.cutY - (height - cropper.CUT_START.height);
|
||||
cutX = cropper.CUT_START.cutX - (width - cropper.CUT_START.width);
|
||||
break;
|
||||
case 4:
|
||||
width = cropper.CUT_START.width + cropper.CUT_START.x - touch[0].pageX;
|
||||
if (lockRatio) {
|
||||
height = width / (cropper.canvasWidth / cropper.canvasHeight);
|
||||
}
|
||||
if (!size_inspect()) return;
|
||||
cutX = cropper.CUT_START.cutX - (width - cropper.CUT_START.width);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
if (!lockWidth && !lockHeight) {
|
||||
cropper.canvasWidth = width;
|
||||
cropper.cutX = cutX;
|
||||
cropper.canvasHeight = height;
|
||||
cropper.cutY = cutY;
|
||||
canvasHeight(ins);
|
||||
canvasWidth(ins);
|
||||
} else if (!lockWidth) {
|
||||
cropper.canvasWidth = width;
|
||||
cropper.cutX = cutX;
|
||||
canvasWidth(ins);
|
||||
} else if (!lockHeight) {
|
||||
cropper.canvasHeight = height;
|
||||
cropper.cutY = cutY;
|
||||
canvasHeight(ins);
|
||||
}
|
||||
styleUpdate(ins)
|
||||
imgMarginDetectionScale(ins);
|
||||
}
|
||||
}
|
||||
|
||||
//检测剪裁框位置是否在允许的范围内(屏幕内)
|
||||
function cutDetectionPosition(ins) {
|
||||
var windowHeight = cropper.windowHeight,
|
||||
windowWidth = cropper.windowWidth;
|
||||
|
||||
var cutDetectionPositionTop = function() {
|
||||
//检测上边距是否在范围内
|
||||
if (cropper.cutY < 0) {
|
||||
cropper.cutY = 0;
|
||||
}
|
||||
if (cropper.cutY > windowHeight - cropper.canvasHeight) {
|
||||
cropper.cutY = windowHeight - cropper.canvasHeight;
|
||||
}
|
||||
}
|
||||
|
||||
var cutDetectionPositionLeft = function() {
|
||||
//检测左边距是否在范围内
|
||||
if (cropper.cutX < 0) {
|
||||
cropper.cutX = 0;
|
||||
}
|
||||
if (cropper.cutX > windowWidth - cropper.canvasWidth) {
|
||||
cropper.cutX = windowWidth - cropper.canvasWidth;
|
||||
}
|
||||
}
|
||||
//裁剪框坐标处理（如果只写一个参数则另一个默认为0，都不写默认居中）
|
||||
if (cropper.cutY == null && cropper.cutX == null) {
|
||||
var cutY = (windowHeight - cropper.canvasHeight) * 0.5;
|
||||
var cutX = (windowWidth - cropper.canvasWidth) * 0.5;
|
||||
cropper.cutY = cutY; //截取的框上边距
|
||||
cropper.cutX = cutX; //截取的框左边距
|
||||
} else if (cropper.cutY != null && cropper.cutX != null) {
|
||||
cutDetectionPositionTop();
|
||||
cutDetectionPositionLeft();
|
||||
} else if (cropper.cutY != null && cropper.cutX == null) {
|
||||
cutDetectionPositionTop();
|
||||
cropper.cutX = (windowWidth - cropper.canvasWidth) / 2;
|
||||
} else if (cropper.cutY == null && cropper.cutX != null) {
|
||||
cutDetectionPositionLeft();
|
||||
cropper.cutY = (windowHeight - cropper.canvasHeight) / 2;
|
||||
}
|
||||
|
||||
styleUpdate(ins)
|
||||
}
|
||||
|
||||
/**
|
||||
* 图片边缘检测-缩放
|
||||
*/
|
||||
function imgMarginDetectionScale(ins, delay) {
|
||||
if (!cropper.limitMove) return;
|
||||
var scale = cropper.scale;
|
||||
var imgWidth = cropper.imgWidth;
|
||||
var imgHeight = cropper.imgHeight;
|
||||
if ((cropper.angle / 90) % 2) {
|
||||
imgWidth = cropper.imgHeight;
|
||||
imgHeight = cropper.imgWidth;
|
||||
}
|
||||
if (imgWidth * scale < cropper.canvasWidth) {
|
||||
scale = cropper.canvasWidth / imgWidth;
|
||||
}
|
||||
if (imgHeight * scale < cropper.canvasHeight) {
|
||||
scale = Math.max(scale, cropper.canvasHeight / imgHeight);
|
||||
}
|
||||
imgMarginDetectionPosition(ins, scale, delay);
|
||||
}
|
||||
/**
|
||||
* 图片边缘检测-位置
|
||||
*/
|
||||
function imgMarginDetectionPosition(ins, scale, delay) {
|
||||
if (!cropper.limitMove) return;
|
||||
var left = cropper.imgLeft;
|
||||
var top = cropper.imgTop;
|
||||
scale = scale || cropper.scale;
|
||||
var imgWidth = cropper.imgWidth;
|
||||
var imgHeight = cropper.imgHeight;
|
||||
if ((cropper.angle / 90) % 2) {
|
||||
imgWidth = cropper.imgHeight;
|
||||
imgHeight = cropper.imgWidth;
|
||||
}
|
||||
left = cropper.cutX + (imgWidth * scale) / 2 >= left ? left : cropper.cutX + (imgWidth * scale) / 2;
|
||||
left = cropper.cutX + cropper.canvasWidth - (imgWidth * scale) / 2 <= left ? left : cropper.cutX + cropper.canvasWidth -
|
||||
(imgWidth * scale) / 2;
|
||||
top = cropper.cutY + (imgHeight * scale) / 2 >= top ? top : cropper.cutY + (imgHeight * scale) / 2;
|
||||
top = cropper.cutY + cropper.canvasHeight - (imgHeight * scale) / 2 <= top ? top : cropper.cutY + cropper.canvasHeight -
|
||||
(imgHeight * scale) / 2;
|
||||
|
||||
cropper.imgLeft = left;
|
||||
cropper.imgTop = top;
|
||||
cropper.scale = scale;
|
||||
styleUpdate(ins)
|
||||
if (!delay || delay === 'null') {
|
||||
imgTransform(ins);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function cutTouchEnd(e, ins) {
|
||||
moveStop(ins);
|
||||
cropper.flagCutTouch = false;
|
||||
updateData(ins)
|
||||
}
|
||||
|
||||
|
||||
//改变截取框大小
|
||||
function computeCutSize(ins) {
|
||||
if (cropper.canvasWidth > cropper.windowWidth) {
|
||||
cropper.canvasWidth = cropper.windowWidth;
|
||||
// canvasWidth(ins)
|
||||
} else if (cropper.canvasWidth + cropper.cutX > cropper.windowWidth) {
|
||||
cropper.cutX = cropper.windowWidth - cropper.cutX;
|
||||
}
|
||||
if (cropper.canvasHeight > cropper.windowHeight) {
|
||||
cropper.canvasHeight = cropper.windowHeight;
|
||||
// canvasHeight(ins)
|
||||
} else if (cropper.canvasHeight + cropper.cutY > cropper.windowHeight) {
|
||||
cropper.cutY = cropper.windowHeight - cropper.cutY;
|
||||
}
|
||||
// styleUpdate(ins)
|
||||
}
|
||||
|
||||
function styleUpdate(ins) {
|
||||
if (!ins) return;
|
||||
ins.selectComponent('.tui-cropper-box').setStyle({
|
||||
'width': cropper.canvasWidth + 'px',
|
||||
'height': cropper.canvasHeight + 'px'
|
||||
})
|
||||
ins.selectComponent('.tui-content-middle').setStyle({
|
||||
'height': cropper.canvasHeight + 'px'
|
||||
})
|
||||
ins.selectComponent('.tui-content-top').setStyle({
|
||||
'height': cropper.cutY + 'px'
|
||||
})
|
||||
ins.selectComponent('.tui-wxs-bg').setStyle({
|
||||
'width': cropper.cutX + 'px'
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function imgTransform(ins) {
|
||||
var owner = ins.selectComponent('.tui-cropper-image')
|
||||
if (!owner) return
|
||||
var x = cropper.imgLeft - cropper.imgWidth / 2;
|
||||
var y = cropper.imgTop - cropper.imgHeight / 2;
|
||||
owner.setStyle({
|
||||
'transform': 'translate3d(' + x + 'px,' + y + 'px,0) scale(' + cropper.scale + ') rotate(' + cropper.angle + 'deg)'
|
||||
})
|
||||
}
|
||||
|
||||
function imageReset(ins) {
|
||||
cropper.scale = 1;
|
||||
cropper.angle = 0;
|
||||
imgTransform(ins);
|
||||
}
|
||||
//监听截取框宽高变化
|
||||
function canvasWidth(ins) {
|
||||
if (cropper.canvasWidth < cropper.minWidth) {
|
||||
cropper.canvasWidth = cropper.minWidth;
|
||||
}
|
||||
if (!ins) return;
|
||||
computeCutSize(ins);
|
||||
}
|
||||
|
||||
function canvasHeight(ins) {
|
||||
if (cropper.canvasHeight < cropper.minHeight) {
|
||||
cropper.canvasHeight = cropper.minHeight;
|
||||
}
|
||||
if (!ins) return;
|
||||
computeCutSize(ins);
|
||||
}
|
||||
|
||||
function updateData(ins) {
|
||||
if (!ins) return;
|
||||
ins.callMethod('change', {
|
||||
cutX: cropper.cutX,
|
||||
cutY: cropper.cutY,
|
||||
canvasWidth: cropper.canvasWidth,
|
||||
canvasHeight: cropper.canvasHeight,
|
||||
imgWidth: cropper.imgWidth,
|
||||
imgHeight: cropper.imgHeight,
|
||||
scale: cropper.scale,
|
||||
angle: cropper.angle,
|
||||
imgTop: cropper.imgTop,
|
||||
imgLeft: cropper.imgLeft
|
||||
})
|
||||
}
|
||||
|
||||
function propsChange(prop, oldProp, ownerInstance, ins) {
|
||||
if (prop && prop !== 'null') {
|
||||
var params = prop.split(',')
|
||||
var type = +params[0]
|
||||
var dataset = ins.getDataset();
|
||||
if (cropper.init || type == 4) {
|
||||
cropper.maxHeight = +dataset.maxheight;
|
||||
cropper.minHeight = +dataset.minheight;
|
||||
cropper.maxWidth = +dataset.maxwidth;
|
||||
cropper.minWidth = +dataset.minwidth;
|
||||
cropper.canvasWidth = +dataset.width;
|
||||
cropper.canvasHeight = +dataset.height;
|
||||
cropper.imgTop = dataset.windowheight / 2;
|
||||
cropper.imgLeft = dataset.windowwidth / 2;
|
||||
cropper.imgWidth = +dataset.imgwidth;
|
||||
cropper.imgHeight = +dataset.imgheight;
|
||||
cropper.windowHeight = +dataset.windowheight;
|
||||
cropper.windowWidth = +dataset.windowwidth;
|
||||
cropper.init = false
|
||||
} else if (type == 2 || type == 3) {
|
||||
cropper.imgWidth = +dataset.imgwidth;
|
||||
cropper.imgHeight = +dataset.imgheight;
|
||||
}
|
||||
cropper.limitMove = bool(dataset.limitmove);
|
||||
cropper.angle = +dataset.angle;
|
||||
if (type == 3) {
|
||||
imgTransform(ownerInstance);
|
||||
}
|
||||
switch (type) {
|
||||
case 1:
|
||||
setCutCenter(ownerInstance);
|
||||
//设置裁剪框大小>设置图片尺寸>绘制canvas
|
||||
computeCutSize(ownerInstance);
|
||||
//检查裁剪框是否在范围内
|
||||
cutDetectionPosition(ownerInstance);
|
||||
break;
|
||||
case 2:
|
||||
setCutCenter(ownerInstance);
|
||||
break;
|
||||
case 3:
|
||||
imgMarginDetectionScale(ownerInstance)
|
||||
break;
|
||||
case 4:
|
||||
imageReset(ownerInstance);
|
||||
break;
|
||||
case 5:
|
||||
setCutCenter(ownerInstance);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
touchstart: touchstart,
|
||||
touchmove: touchmove,
|
||||
touchend: touchend,
|
||||
cutTouchStart: cutTouchStart,
|
||||
cutTouchMove: cutTouchMove,
|
||||
cutTouchEnd: cutTouchEnd,
|
||||
propsChange: propsChange
|
||||
}
|
||||
Reference in New Issue
Block a user