|
@@ -1,1034 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="tui-container" @touchmove.stop.prevent="stop">
|
|
|
- <view class="tui-image-cropper" @touchend="cutTouchEnd" @touchstart="cutTouchStart" @touchmove="cutTouchMove">
|
|
|
- <view class="tui-content">
|
|
|
- <view class="tui-content-top tui-bg-transparent" :style="{ height: cutY + 'px', transitionProperty: cutAnimation ? '' : 'background' }"></view>
|
|
|
- <view class="tui-content-middle" :style="{ height: canvasHeight + 'px' }">
|
|
|
- <view class="tui-bg-transparent" :style="{ width: cutX + 'px', transitionProperty: cutAnimation ? '' : 'background' }"></view>
|
|
|
- <view
|
|
|
- class="tui-cropper-box"
|
|
|
- :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', 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="start"
|
|
|
- @touchmove="move"
|
|
|
- @touchend="end"
|
|
|
- :style="{
|
|
|
- width: imgWidth ? imgWidth + 'px' : 'auto',
|
|
|
- height: imgHeight ? imgHeight + 'px' : 'auto',
|
|
|
- transform: imgTransform,
|
|
|
- transitionDuration: (cutAnimation ? 0.35 : 0) + 's'
|
|
|
- }"
|
|
|
- class="tui-cropper-image"
|
|
|
- :src="imageUrl"
|
|
|
- v-if="imageUrl"
|
|
|
- mode="widthFix"
|
|
|
- ></image>
|
|
|
- </view>
|
|
|
- <canvas
|
|
|
- canvas-id="tui-image-cropper"
|
|
|
- id="tui-image-cropper"
|
|
|
- :disable-scroll="true"
|
|
|
- :style="{ width: CROPPER_WIDTH * scaleRatio + 'px', height: CROPPER_HEIGHT * scaleRatio + 'px' }"
|
|
|
- class="tui-cropper-canvas"
|
|
|
- ></canvas>
|
|
|
- <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>
|
|
|
-/**
|
|
|
- * 注意:组件中使用的图片地址,将文件复制到自己项目中
|
|
|
- * 如果图片位置与组件同级,编译成小程序时图片会丢失
|
|
|
- * 拷贝static下整个components文件夹
|
|
|
- *也可直接转成base64(不建议)
|
|
|
- * */
|
|
|
-export default {
|
|
|
- name: 'tuiImageCropper',
|
|
|
- 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
|
|
|
- },
|
|
|
- //图片旋转角度
|
|
|
- rotateAngle: {
|
|
|
- type: Number,
|
|
|
- default: 0
|
|
|
- },
|
|
|
- //图片最小缩放比
|
|
|
- minScale: {
|
|
|
- type: Number,
|
|
|
- default: 0.5
|
|
|
- },
|
|
|
- //图片最大缩放比
|
|
|
- maxScale: {
|
|
|
- type: Number,
|
|
|
- default: 2
|
|
|
- },
|
|
|
- //是否禁用触摸旋转(为false则可以触摸转动图片,limitMove为false生效)
|
|
|
- disableRotate: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- },
|
|
|
- //是否限制移动范围(剪裁框只能在图片内,为true不可触摸转动图片)
|
|
|
- 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 {
|
|
|
- MOVE_THROTTLE: null, //触摸移动节流setTimeout
|
|
|
- MOVE_THROTTLE_FLAG: true, //节流标识
|
|
|
- TIME_CUT_CENTER: null,
|
|
|
- CROPPER_WIDTH: 200, //裁剪框宽
|
|
|
- CROPPER_HEIGHT: 200, //裁剪框高
|
|
|
- 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, //图片旋转角度
|
|
|
- cutAnimation: false, //是否开启图片和裁剪框过渡
|
|
|
- cutAnimationTime: null,
|
|
|
- imgTop: 0, //图片上边距
|
|
|
- imgLeft: 0, //图片左边距
|
|
|
- ctx: null,
|
|
|
- sysInfo: null
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- imgTransform: function() {
|
|
|
- return `translate3d(${this.imgLeft - this.imgWidth / 2}px,${this.imgTop - this.imgHeight / 2}px,0) scale(${this.scale}) rotate(${this.angle}deg)`;
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- imageUrl(val, oldVal) {
|
|
|
- this.imageReset();
|
|
|
- this.showLoading();
|
|
|
- uni.getImageInfo({
|
|
|
- src: val,
|
|
|
- success: res => {
|
|
|
- //计算图片尺寸
|
|
|
- this.imgComputeSize(res.width, res.height);
|
|
|
- if (this.limitMove) {
|
|
|
- //限制移动,不留空白处理
|
|
|
- this.imgMarginDetectionScale();
|
|
|
- }
|
|
|
- },
|
|
|
- fail: err => {
|
|
|
- this.imgComputeSize();
|
|
|
- if (this.limitMove) {
|
|
|
- this.imgMarginDetectionScale();
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- //监听截取框宽高变化
|
|
|
- canvasWidth(val) {
|
|
|
- if (val < this.minWidth) {
|
|
|
- this.canvasWidth = this.minWidth;
|
|
|
- }
|
|
|
- this.computeCutSize();
|
|
|
- },
|
|
|
- canvasHeight(val) {
|
|
|
- if (val < this.minHeight) {
|
|
|
- this.canvasHeight = this.minHeight;
|
|
|
- }
|
|
|
- this.computeCutSize();
|
|
|
- },
|
|
|
- rotateAngle(val) {
|
|
|
- this.cutAnimation = true;
|
|
|
- this.angle = val;
|
|
|
- },
|
|
|
- angle(val) {
|
|
|
- this.moveStop();
|
|
|
- if (this.limitMove && val % 90) {
|
|
|
- this.angle = Math.round(val / 90) * 90;
|
|
|
- }
|
|
|
- this.imgMarginDetectionScale();
|
|
|
- },
|
|
|
- cutAnimation(val) {
|
|
|
- //开启过渡260毫秒之后自动关闭
|
|
|
- clearTimeout(this.cutAnimationTime);
|
|
|
- if (val) {
|
|
|
- this.cutAnimationTime = setTimeout(() => {
|
|
|
- this.cutAnimation = false;
|
|
|
- }, 260);
|
|
|
- }
|
|
|
- },
|
|
|
- limitMove(val) {
|
|
|
- if (val) {
|
|
|
- if (this.angle % 90) {
|
|
|
- this.angle = Math.round(this.angle / 90) * 90;
|
|
|
- }
|
|
|
- this.imgMarginDetectionScale();
|
|
|
- }
|
|
|
- },
|
|
|
- cutY(value) {
|
|
|
- this.cutDetectionPosition();
|
|
|
- },
|
|
|
- cutX(value) {
|
|
|
- this.cutDetectionPosition();
|
|
|
- },
|
|
|
- startCutting(val) {
|
|
|
- if (this.custom && val) {
|
|
|
- this.getImage();
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.sysInfo = uni.getSystemInfoSync();
|
|
|
- this.imgTop = this.sysInfo.windowHeight / 2;
|
|
|
- this.imgLeft = this.sysInfo.windowWidth / 2;
|
|
|
- this.CROPPER_WIDTH = this.width;
|
|
|
- this.CROPPER_HEIGHT = this.height;
|
|
|
- this.canvasHeight = this.height;
|
|
|
- this.canvasWidth = this.width;
|
|
|
- this.ctx = uni.createCanvasContext('tui-image-cropper', this);
|
|
|
- this.setCutCenter();
|
|
|
- //设置裁剪框大小>设置图片尺寸>绘制canvas
|
|
|
- this.computeCutSize();
|
|
|
- //检查裁剪框是否在范围内
|
|
|
- this.cutDetectionPosition();
|
|
|
- setTimeout(() => {
|
|
|
- this.$emit('ready', {});
|
|
|
- }, 200);
|
|
|
- },
|
|
|
- methods: {
|
|
|
- //返回裁剪后图片信息
|
|
|
- getImage() {
|
|
|
- if (!this.imageUrl) {
|
|
|
- uni.showToast({
|
|
|
- title: '请选择图片',
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
- this.loadding && this.showLoading();
|
|
|
- let draw = () => {
|
|
|
- //图片实际大小
|
|
|
- let imgWidth = this.imgWidth * this.scale * this.scaleRatio;
|
|
|
- let imgHeight = this.imgHeight * this.scale * this.scaleRatio;
|
|
|
- //canvas和图片的相对距离
|
|
|
- let xpos = this.imgLeft - this.cutX;
|
|
|
- let ypos = this.imgTop - this.cutY;
|
|
|
- //旋转画布
|
|
|
- this.ctx.translate(xpos * this.scaleRatio, ypos * this.scaleRatio);
|
|
|
- this.ctx.rotate((this.angle * Math.PI) / 180);
|
|
|
- this.ctx.drawImage(this.imageUrl, -imgWidth / 2, -imgHeight / 2, imgWidth, imgHeight);
|
|
|
- this.ctx.draw(false, () => {
|
|
|
- let params = {
|
|
|
- width: this.canvasWidth * this.scaleRatio,
|
|
|
- height: Math.round(this.canvasHeight * this.scaleRatio),
|
|
|
- destWidth: this.canvasWidth * this.scaleRatio,
|
|
|
- destHeight: Math.round(this.canvasHeight) * this.scaleRatio,
|
|
|
- fileType: 'png',
|
|
|
- quality: this.quality
|
|
|
- };
|
|
|
- let data = {
|
|
|
- url: '',
|
|
|
- base64: '',
|
|
|
- width: this.canvasWidth * this.scaleRatio,
|
|
|
- height: this.canvasHeight * this.scaleRatio
|
|
|
- };
|
|
|
- // #ifdef MP-ALIPAY
|
|
|
-
|
|
|
- if (this.isBase64) {
|
|
|
- this.ctx.toDataURL(params).then(dataURL => {
|
|
|
- data.base64 = dataURL;
|
|
|
- this.loadding && uni.hideLoading();
|
|
|
- this.$emit('cropper', data);
|
|
|
- });
|
|
|
- } else {
|
|
|
- this.ctx.toTempFilePath({
|
|
|
- ...params,
|
|
|
- success: res => {
|
|
|
- data.url = res.tempFilePath;
|
|
|
- this.loadding && uni.hideLoading();
|
|
|
- this.$emit('cropper', data);
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- // #endif
|
|
|
-
|
|
|
- // #ifndef MP-ALIPAY
|
|
|
- // #ifdef MP-BAIDU || MP-TOUTIAO || H5
|
|
|
- this.isBase64 = false;
|
|
|
- // #endif
|
|
|
- if (this.isBase64) {
|
|
|
- uni.canvasGetImageData({
|
|
|
- canvasId: 'tui-image-cropper',
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- width: this.canvasWidth * this.scaleRatio,
|
|
|
- height: Math.round(this.canvasHeight * this.scaleRatio),
|
|
|
- success: res => {
|
|
|
- const arrayBuffer = new Uint8Array(res.data);
|
|
|
- const base64 = uni.arrayBufferToBase64(arrayBuffer);
|
|
|
- data.base64 = base64;
|
|
|
- this.loadding && uni.hideLoading();
|
|
|
- this.$emit('cropper', data);
|
|
|
- }
|
|
|
- });
|
|
|
- } else {
|
|
|
- uni.canvasToTempFilePath(
|
|
|
- {
|
|
|
- ...params,
|
|
|
- canvasId: 'tui-image-cropper',
|
|
|
- success: res => {
|
|
|
- data.url = res.tempFilePath;
|
|
|
- // #ifdef H5
|
|
|
- data.base64 = res.tempFilePath;
|
|
|
- // #endif
|
|
|
- this.loadding && uni.hideLoading();
|
|
|
- this.$emit('cropper', data);
|
|
|
- },
|
|
|
- fail(res) {
|
|
|
- console.log(res);
|
|
|
- }
|
|
|
- },
|
|
|
- this
|
|
|
- );
|
|
|
- }
|
|
|
- // #endif
|
|
|
- });
|
|
|
- };
|
|
|
- if (this.CROPPER_WIDTH != this.canvasWidth || this.CROPPER_HEIGHT != this.canvasHeight) {
|
|
|
- this.CROPPER_WIDTH = this.canvasWidth;
|
|
|
- this.CROPPER_HEIGHT = this.canvasHeight;
|
|
|
- this.ctx.draw();
|
|
|
- this.$nextTick(() => {
|
|
|
- setTimeout(() => {
|
|
|
- draw();
|
|
|
- }, 100);
|
|
|
- });
|
|
|
- } else {
|
|
|
- draw();
|
|
|
- }
|
|
|
- },
|
|
|
- /**
|
|
|
- * 设置剪裁框和图片居中
|
|
|
- */
|
|
|
- setCutCenter() {
|
|
|
- let sys = this.sysInfo || uni.getSystemInfoSync();
|
|
|
- let cutY = (sys.windowHeight - this.canvasHeight) * 0.5;
|
|
|
- let cutX = (sys.windowWidth - this.canvasWidth) * 0.5;
|
|
|
- //顺序不能变
|
|
|
- this.imgTop = this.imgTop - this.cutY + cutY;
|
|
|
- this.cutY = cutY; //截取的框上边距
|
|
|
- this.imgLeft = this.imgLeft - this.cutX + cutX;
|
|
|
- this.cutX = cutX; //截取的框左边距
|
|
|
- },
|
|
|
- imageReset() {
|
|
|
- // this.cutAnimation = true;
|
|
|
- this.scale = 1;
|
|
|
- this.angle = 0;
|
|
|
- let sys = this.sysInfo || uni.getSystemInfoSync();
|
|
|
- this.imgTop = sys.windowHeight / 2;
|
|
|
- this.imgLeft = sys.windowWidth / 2;
|
|
|
- },
|
|
|
- imageLoad(e) {
|
|
|
- this.imageReset();
|
|
|
- uni.hideLoading();
|
|
|
- this.$emit('imageLoad', {});
|
|
|
- },
|
|
|
- //检测剪裁框位置是否在允许的范围内(屏幕内)
|
|
|
- cutDetectionPosition() {
|
|
|
- let cutDetectionPositionTop = () => {
|
|
|
- //检测上边距是否在范围内
|
|
|
- if (this.cutY < 0) {
|
|
|
- this.cutY = 0;
|
|
|
- }
|
|
|
- if (this.cutY > this.sysInfo.windowHeight - this.canvasHeight) {
|
|
|
- this.cutY = this.sysInfo.windowHeight - this.canvasHeight;
|
|
|
- }
|
|
|
- },
|
|
|
- cutDetectionPositionLeft = () => {
|
|
|
- //检测左边距是否在范围内
|
|
|
- if (this.cutX < 0) {
|
|
|
- this.cutX = 0;
|
|
|
- }
|
|
|
- if (this.cutX > this.sysInfo.windowWidth - this.canvasWidth) {
|
|
|
- this.cutX = this.sysInfo.windowWidth - this.canvasWidth;
|
|
|
- }
|
|
|
- };
|
|
|
- //裁剪框坐标处理(如果只写一个参数则另一个默认为0,都不写默认居中)
|
|
|
- if (this.cutY == null && this.cutX == null) {
|
|
|
- let cutY = (this.sysInfo.windowHeight - this.canvasHeight) * 0.5;
|
|
|
- let cutX = (this.sysInfo.windowWidth - this.canvasWidth) * 0.5;
|
|
|
- this.cutY = cutY; //截取的框上边距
|
|
|
- this.cutX = cutX; //截取的框左边距
|
|
|
- } else if (this.cutY != null && this.cutX != null) {
|
|
|
- cutDetectionPositionTop();
|
|
|
- cutDetectionPositionLeft();
|
|
|
- } else if (this.cutY != null && this.cutX == null) {
|
|
|
- cutDetectionPositionTop();
|
|
|
- this.cutX = (this.sysInfo.windowWidth - this.canvasWidth) / 2;
|
|
|
- } else if (this.cutY == null && this.cutX != null) {
|
|
|
- cutDetectionPositionLeft();
|
|
|
- this.cutY = (this.sysInfo.windowHeight - this.canvasHeight) / 2;
|
|
|
- }
|
|
|
- },
|
|
|
- /**
|
|
|
- * 图片边缘检测-位置
|
|
|
- */
|
|
|
- imgMarginDetectionPosition(scale) {
|
|
|
- if (!this.limitMove) return;
|
|
|
- let left = this.imgLeft;
|
|
|
- let top = this.imgTop;
|
|
|
- scale = scale || this.scale;
|
|
|
- let imgWidth = this.imgWidth;
|
|
|
- let imgHeight = this.imgHeight;
|
|
|
- if ((this.angle / 90) % 2) {
|
|
|
- imgWidth = this.imgHeight;
|
|
|
- imgHeight = this.imgWidth;
|
|
|
- }
|
|
|
- left = this.cutX + (imgWidth * scale) / 2 >= left ? left : this.cutX + (imgWidth * scale) / 2;
|
|
|
- left = this.cutX + this.canvasWidth - (imgWidth * scale) / 2 <= left ? left : this.cutX + this.canvasWidth - (imgWidth * scale) / 2;
|
|
|
- top = this.cutY + (imgHeight * scale) / 2 >= top ? top : this.cutY + (imgHeight * scale) / 2;
|
|
|
- top = this.cutY + this.canvasHeight - (imgHeight * scale) / 2 <= top ? top : this.cutY + this.canvasHeight - (imgHeight * scale) / 2;
|
|
|
- this.imgLeft = left;
|
|
|
- this.imgTop = top;
|
|
|
- this.scale = scale;
|
|
|
- },
|
|
|
- /**
|
|
|
- * 图片边缘检测-缩放
|
|
|
- */
|
|
|
- imgMarginDetectionScale(scale) {
|
|
|
- if (!this.limitMove) return;
|
|
|
- scale = scale || this.scale;
|
|
|
- let imgWidth = this.imgWidth;
|
|
|
- let imgHeight = this.imgHeight;
|
|
|
- if ((this.angle / 90) % 2) {
|
|
|
- imgWidth = this.imgHeight;
|
|
|
- imgHeight = this.imgWidth;
|
|
|
- }
|
|
|
- if (imgWidth * scale < this.canvasWidth) {
|
|
|
- scale = this.canvasWidth / imgWidth;
|
|
|
- }
|
|
|
- if (imgHeight * scale < this.canvasHeight) {
|
|
|
- scale = Math.max(scale, this.canvasHeight / imgHeight);
|
|
|
- }
|
|
|
- this.imgMarginDetectionPosition(scale);
|
|
|
- },
|
|
|
- /**
|
|
|
- * 计算图片尺寸
|
|
|
- */
|
|
|
- imgComputeSize(width, height) {
|
|
|
- //默认按图片最小边 = 对应裁剪框尺寸
|
|
|
- let imgWidth = width,
|
|
|
- imgHeight = height;
|
|
|
- if (imgWidth && imgHeight) {
|
|
|
- if (imgWidth / imgHeight > (this.canvasWidth || this.width) / (this.canvasHeight || this.height)) {
|
|
|
- imgHeight = this.canvasHeight || this.height;
|
|
|
- imgWidth = (width / height) * imgHeight;
|
|
|
- } else {
|
|
|
- imgWidth = this.canvasWidth || this.width;
|
|
|
- imgHeight = (height / width) * imgWidth;
|
|
|
- }
|
|
|
- } else {
|
|
|
- let sys = this.sysInfo || uni.getSystemInfoSync();
|
|
|
- imgWidth = sys.windowWidth;
|
|
|
- imgHeight = 0;
|
|
|
- }
|
|
|
- this.imgWidth = imgWidth;
|
|
|
- this.imgHeight = imgHeight;
|
|
|
- },
|
|
|
- //改变截取框大小
|
|
|
- computeCutSize() {
|
|
|
- if (this.canvasWidth > this.sysInfo.windowWidth) {
|
|
|
- this.canvasWidth = this.sysInfo.windowWidth;
|
|
|
- } else if (this.canvasWidth + this.cutX > this.sysInfo.windowWidth) {
|
|
|
- this.cutX = this.sysInfo.windowWidth - this.cutX;
|
|
|
- }
|
|
|
- if (this.canvasHeight > this.sysInfo.windowHeight) {
|
|
|
- this.canvasHeight = this.sysInfo.windowHeight;
|
|
|
- } else if (this.canvasHeight + this.cutY > this.sysInfo.windowHeight) {
|
|
|
- this.cutY = this.sysInfo.windowHeight - this.cutY;
|
|
|
- }
|
|
|
- },
|
|
|
- //开始触摸
|
|
|
- start(e) {
|
|
|
- this.flagEndTouch = false;
|
|
|
- if (e.touches.length == 1) {
|
|
|
- //单指拖动
|
|
|
- this.touchRelative[0] = {
|
|
|
- x: e.touches[0].clientX - this.imgLeft,
|
|
|
- y: e.touches[0].clientY - this.imgTop
|
|
|
- };
|
|
|
- } else {
|
|
|
- //双指放大
|
|
|
- let width = Math.abs(e.touches[0].clientX - e.touches[1].clientX);
|
|
|
- let height = Math.abs(e.touches[0].clientY - e.touches[1].clientY);
|
|
|
- this.touchRelative = [
|
|
|
- {
|
|
|
- x: e.touches[0].clientX - this.imgLeft,
|
|
|
- y: e.touches[0].clientY - this.imgTop
|
|
|
- },
|
|
|
- {
|
|
|
- x: e.touches[1].clientX - this.imgLeft,
|
|
|
- y: e.touches[1].clientY - this.imgTop
|
|
|
- }
|
|
|
- ];
|
|
|
- this.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
|
|
|
- }
|
|
|
- },
|
|
|
- moveThrottle() {
|
|
|
- if (this.sysInfo.platform == 'android') {
|
|
|
- clearTimeout(this.MOVE_THROTTLE);
|
|
|
- this.MOVE_THROTTLE = setTimeout(() => {
|
|
|
- this.MOVE_THROTTLE_FLAG = true;
|
|
|
- }, 800 / 40);
|
|
|
- return this.MOVE_THROTTLE_FLAG;
|
|
|
- } else {
|
|
|
- this.MOVE_THROTTLE_FLAG = true;
|
|
|
- }
|
|
|
- },
|
|
|
- move(e) {
|
|
|
- if (this.flagEndTouch || !this.MOVE_THROTTLE_FLAG) return;
|
|
|
- this.MOVE_THROTTLE_FLAG = false;
|
|
|
- this.moveThrottle();
|
|
|
- this.moveDuring();
|
|
|
- if (e.touches.length == 1) {
|
|
|
- //单指拖动
|
|
|
- let left = e.touches[0].clientX - this.touchRelative[0].x,
|
|
|
- top = e.touches[0].clientY - this.touchRelative[0].y;
|
|
|
- //图像边缘检测,防止截取到空白
|
|
|
- this.imgLeft = left;
|
|
|
- this.imgTop = top;
|
|
|
- this.imgMarginDetectionPosition();
|
|
|
- } else {
|
|
|
- //双指放大
|
|
|
- let width = Math.abs(e.touches[0].clientX - e.touches[1].clientX),
|
|
|
- height = Math.abs(e.touches[0].clientY - e.touches[1].clientY),
|
|
|
- hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)),
|
|
|
- scale = this.scale * (hypotenuse / this.hypotenuseLength),
|
|
|
- current_deg = 0;
|
|
|
- scale = scale <= this.minScale ? this.minScale : scale;
|
|
|
- scale = scale >= this.maxScale ? this.maxScale : scale;
|
|
|
- //图像边缘检测,防止截取到空白
|
|
|
- // this.scale = scale;
|
|
|
- this.imgMarginDetectionScale(scale);
|
|
|
- //双指旋转(如果没禁用旋转)
|
|
|
- let touchRelative = [
|
|
|
- {
|
|
|
- x: e.touches[0].clientX - this.imgLeft,
|
|
|
- y: e.touches[0].clientY - this.imgTop
|
|
|
- },
|
|
|
- {
|
|
|
- x: e.touches[1].clientX - this.imgLeft,
|
|
|
- y: e.touches[1].clientY - this.imgTop
|
|
|
- }
|
|
|
- ];
|
|
|
- if (!this.disableRotate) {
|
|
|
- let first_atan = (180 / Math.PI) * Math.atan2(touchRelative[0].y, touchRelative[0].x);
|
|
|
- let first_atan_old = (180 / Math.PI) * Math.atan2(this.touchRelative[0].y, this.touchRelative[0].x);
|
|
|
- let second_atan = (180 / Math.PI) * Math.atan2(touchRelative[1].y, touchRelative[1].x);
|
|
|
- let second_atan_old = (180 / Math.PI) * Math.atan2(this.touchRelative[1].y, this.touchRelative[1].x);
|
|
|
- //当前旋转的角度
|
|
|
- let 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;
|
|
|
- }
|
|
|
- }
|
|
|
- this.touchRelative = touchRelative;
|
|
|
- this.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
|
|
|
- //更新视图
|
|
|
- this.angle = this.angle + current_deg;
|
|
|
- this.scale = this.scale;
|
|
|
- }
|
|
|
- },
|
|
|
- //结束操作
|
|
|
- end(e) {
|
|
|
- this.flagEndTouch = true;
|
|
|
- this.moveStop();
|
|
|
- },
|
|
|
- //裁剪框处理
|
|
|
- cutTouchMove(e) {
|
|
|
- if (this.flagCutTouch && this.MOVE_THROTTLE_FLAG) {
|
|
|
- if (this.lockRatio && (this.lockWidth || this.lockHeight)) return;
|
|
|
- //节流
|
|
|
- this.MOVE_THROTTLE_FLAG = false;
|
|
|
- this.moveThrottle();
|
|
|
- let width = this.canvasWidth,
|
|
|
- height = this.canvasHeight,
|
|
|
- cutY = this.cutY,
|
|
|
- cutX = this.cutX,
|
|
|
- size_correct = () => {
|
|
|
- width = width <= this.maxWidth ? (width >= this.minWidth ? width : this.minWidth) : this.maxWidth;
|
|
|
- height = height <= this.maxHeight ? (height >= this.minHeight ? height : this.minHeight) : this.maxHeight;
|
|
|
- },
|
|
|
- size_inspect = () => {
|
|
|
- if ((width > this.maxWidth || width < this.minWidth || height > this.maxHeight || height < this.minHeight) && this.lockRatio) {
|
|
|
- size_correct();
|
|
|
- return false;
|
|
|
- } else {
|
|
|
- size_correct();
|
|
|
- return true;
|
|
|
- }
|
|
|
- };
|
|
|
- height = this.CUT_START.height + (this.CUT_START.corner > 1 && this.CUT_START.corner < 4 ? 1 : -1) * (this.CUT_START.y - e.touches[0].clientY);
|
|
|
- switch (this.CUT_START.corner) {
|
|
|
- case 1:
|
|
|
- width = this.CUT_START.width - this.CUT_START.x + e.touches[0].clientX;
|
|
|
- if (this.lockRatio) {
|
|
|
- height = width / (this.canvasWidth / this.canvasHeight);
|
|
|
- }
|
|
|
- if (!size_inspect()) return;
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- width = this.CUT_START.width - this.CUT_START.x + e.touches[0].clientX;
|
|
|
- if (this.lockRatio) {
|
|
|
- height = width / (this.canvasWidth / this.canvasHeight);
|
|
|
- }
|
|
|
- if (!size_inspect()) return;
|
|
|
- cutY = this.CUT_START.cutY - (height - this.CUT_START.height);
|
|
|
- break;
|
|
|
- case 3:
|
|
|
- width = this.CUT_START.width + this.CUT_START.x - e.touches[0].clientX;
|
|
|
- if (this.lockRatio) {
|
|
|
- height = width / (this.canvasWidth / this.canvasHeight);
|
|
|
- }
|
|
|
- if (!size_inspect()) return;
|
|
|
- cutY = this.CUT_START.cutY - (height - this.CUT_START.height);
|
|
|
- cutX = this.CUT_START.cutX - (width - this.CUT_START.width);
|
|
|
- break;
|
|
|
- case 4:
|
|
|
- width = this.CUT_START.width + this.CUT_START.x - e.touches[0].clientX;
|
|
|
- if (this.lockRatio) {
|
|
|
- height = width / (this.canvasWidth / this.canvasHeight);
|
|
|
- }
|
|
|
- if (!size_inspect()) return;
|
|
|
- cutX = this.CUT_START.cutX - (width - this.CUT_START.width);
|
|
|
- break;
|
|
|
- default:
|
|
|
- break;
|
|
|
- }
|
|
|
- if (!this.lockWidth && !this.lockHeight) {
|
|
|
- this.canvasWidth = width;
|
|
|
- this.cutX = cutX;
|
|
|
- this.canvasHeight = height;
|
|
|
- this.cutY = cutY;
|
|
|
- } else if (!this.lockWidth) {
|
|
|
- this.canvasWidth = width;
|
|
|
- this.cutX = cutX;
|
|
|
- } else if (!this.lockHeight) {
|
|
|
- this.canvasHeight = height;
|
|
|
- this.cutY = cutY;
|
|
|
- }
|
|
|
- this.imgMarginDetectionScale();
|
|
|
- }
|
|
|
- },
|
|
|
- cutTouchStart(e) {
|
|
|
- let currentX = e.touches[0].clientX;
|
|
|
- let currentY = e.touches[0].clientY;
|
|
|
-
|
|
|
- /*
|
|
|
- * (右下-1 右上-2 左上-3 左下-4)
|
|
|
- * left_x [3,4]
|
|
|
- * top_y [2,3]
|
|
|
- * right_x [1,2]
|
|
|
- * bottom_y [1,4]
|
|
|
- */
|
|
|
- let left_x1 = this.cutX - 24;
|
|
|
- let left_x2 = this.cutX + 24;
|
|
|
-
|
|
|
- let top_y1 = this.cutY - 24;
|
|
|
- let top_y2 = this.cutY + 24;
|
|
|
-
|
|
|
- let right_x1 = this.cutX + this.canvasWidth - 24;
|
|
|
- let right_x2 = this.cutX + this.canvasWidth + 24;
|
|
|
-
|
|
|
- let bottom_y1 = this.cutY + this.canvasHeight - 24;
|
|
|
- let bottom_y2 = this.cutY + this.canvasHeight + 24;
|
|
|
-
|
|
|
- if (currentX > right_x1 && currentX < right_x2 && currentY > bottom_y1 && currentY < bottom_y2) {
|
|
|
- this.moveDuring();
|
|
|
- this.flagCutTouch = true;
|
|
|
- this.flagEndTouch = true;
|
|
|
- this.CUT_START = {
|
|
|
- width: this.canvasWidth,
|
|
|
- height: this.canvasHeight,
|
|
|
- x: currentX,
|
|
|
- y: currentY,
|
|
|
- corner: 1
|
|
|
- };
|
|
|
- } else if (currentX > right_x1 && currentX < right_x2 && currentY > top_y1 && currentY < top_y2) {
|
|
|
- this.moveDuring();
|
|
|
- this.flagCutTouch = true;
|
|
|
- this.flagEndTouch = true;
|
|
|
- this.CUT_START = {
|
|
|
- width: this.canvasWidth,
|
|
|
- height: this.canvasHeight,
|
|
|
- x: currentX,
|
|
|
- y: currentY,
|
|
|
- cutY: this.cutY,
|
|
|
- cutX: this.cutX,
|
|
|
- corner: 2
|
|
|
- };
|
|
|
- } else if (currentX > left_x1 && currentX < left_x2 && currentY > top_y1 && currentY < top_y2) {
|
|
|
- this.moveDuring();
|
|
|
- this.flagCutTouch = true;
|
|
|
- this.flagEndTouch = true;
|
|
|
- this.CUT_START = {
|
|
|
- width: this.canvasWidth,
|
|
|
- height: this.canvasHeight,
|
|
|
- cutY: this.cutY,
|
|
|
- cutX: this.cutX,
|
|
|
- x: currentX,
|
|
|
- y: currentY,
|
|
|
- corner: 3
|
|
|
- };
|
|
|
- } else if (currentX > left_x1 && currentX < left_x2 && currentY > bottom_y1 && currentY < bottom_y2) {
|
|
|
- this.moveDuring();
|
|
|
- this.flagCutTouch = true;
|
|
|
- this.flagEndTouch = true;
|
|
|
- this.CUT_START = {
|
|
|
- width: this.canvasWidth,
|
|
|
- height: this.canvasHeight,
|
|
|
- cutY: this.cutY,
|
|
|
- cutX: this.cutX,
|
|
|
- x: currentX,
|
|
|
- y: currentY,
|
|
|
- corner: 4
|
|
|
- };
|
|
|
- }
|
|
|
- },
|
|
|
- cutTouchEnd(e) {
|
|
|
- this.moveStop();
|
|
|
- this.flagCutTouch = false;
|
|
|
- },
|
|
|
- //停止移动时需要做的操作
|
|
|
- moveStop() {
|
|
|
- //清空之前的自动居中延迟函数并添加最新的
|
|
|
- clearTimeout(this.TIME_CUT_CENTER);
|
|
|
- this.TIME_CUT_CENTER = setTimeout(() => {
|
|
|
- //动画启动
|
|
|
- if (!this.cutAnimation) {
|
|
|
- this.cutAnimation = true;
|
|
|
- }
|
|
|
- this.setCutCenter();
|
|
|
- }, 800);
|
|
|
- },
|
|
|
- //移动中
|
|
|
- moveDuring() {
|
|
|
- //清空之前的自动居中延迟函数
|
|
|
- clearTimeout(this.TIME_CUT_CENTER);
|
|
|
- },
|
|
|
- showLoading() {
|
|
|
- uni.showLoading({
|
|
|
- title: '请稍候...',
|
|
|
- mask: true
|
|
|
- });
|
|
|
- },
|
|
|
- stop() {},
|
|
|
- back() {
|
|
|
- uni.navigateBack();
|
|
|
- },
|
|
|
- setAngle() {
|
|
|
- this.cutAnimation = true;
|
|
|
- this.angle = this.angle + 90;
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
-</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.35s;
|
|
|
-}
|
|
|
-
|
|
|
-.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.3s; */
|
|
|
- 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-cropper-canvas {
|
|
|
- position: fixed;
|
|
|
- z-index: 10;
|
|
|
- left: -2000px;
|
|
|
- top: -2000px;
|
|
|
- pointer-events: none;
|
|
|
-}
|
|
|
-
|
|
|
-.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>
|