From e10ea8191b0d2ad44ad9796d3644cbb0c343a4e6 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Tue, 31 May 2022 16:24:13 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E5=89=AA=E8=A3=81=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/saas/AppCountryAlbum/Clipping.vue         | 185 ++++
 src/saas/AppCountryAlbum/Watermark.vue        |  19 +-
 .../components/ksp-cropper.vue                | 952 ++++++++++++++++++
 .../components/report/Daily.vue               |   4 +-
 .../components/report/InspectLog.vue          |   4 +-
 .../components/report/MeetingMminutes.vue     |   4 +-
 .../components/report/RenderContent.vue       |  21 +-
 .../components/report/WorkReport.vue          |   4 +-
 .../images/clipping/clipping1.png             | Bin 0 -> 288 bytes
 .../images/clipping/clipping2.png             | Bin 0 -> 290 bytes
 .../images/clipping/clipping3.png             | Bin 0 -> 288 bytes
 .../images/clipping/clipping4.png             | Bin 0 -> 291 bytes
 .../images/clipping/clipping5.png             | Bin 0 -> 543 bytes
 .../images/clipping/yuantu.png                | Bin 0 -> 531 bytes
 14 files changed, 1186 insertions(+), 7 deletions(-)
 create mode 100644 src/saas/AppCountryAlbum/Clipping.vue
 create mode 100644 src/saas/AppCountryAlbum/components/ksp-cropper.vue
 create mode 100644 src/saas/AppCountryAlbum/images/clipping/clipping1.png
 create mode 100644 src/saas/AppCountryAlbum/images/clipping/clipping2.png
 create mode 100644 src/saas/AppCountryAlbum/images/clipping/clipping3.png
 create mode 100644 src/saas/AppCountryAlbum/images/clipping/clipping4.png
 create mode 100644 src/saas/AppCountryAlbum/images/clipping/clipping5.png
 create mode 100644 src/saas/AppCountryAlbum/images/clipping/yuantu.png

diff --git a/src/saas/AppCountryAlbum/Clipping.vue b/src/saas/AppCountryAlbum/Clipping.vue
new file mode 100644
index 00000000..ffbe42ba
--- /dev/null
+++ b/src/saas/AppCountryAlbum/Clipping.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="Clipping">
+    <div class="photo-wrapper">
+      <!-- <image mode="widthFix" :src="img" /> -->
+      <kspCropper mode="free" ref="Cropper" :url="img" @ok="onOk"></kspCropper>
+    </div>
+    <div class="photo-footer">
+      <div class="title">
+        <span @click="back">返回</span>
+        <h2>裁剪</h2>
+        <span class="save-btn" @click="save">保存</span>
+      </div>
+      <scroll-view class="photo-bottom" scroll-x v-if="false">
+        <div class="clipping-item" @click="currIndex = 0" :class="[currIndex === 0 ? 'active' : '']">
+          <image src="./images/clipping/yuantu.png" />
+          <span>原图</span>
+        </div>
+        <div class="clipping-item" @click="currIndex = 1" :class="[currIndex === 1 ? 'active' : '']">
+          <image src="./images/clipping/clipping5.png" />
+          <span>自由</span>
+        </div>
+        <div class="clipping-item" @click="currIndex = 2" :class="[currIndex === 2 ? 'active' : '']">
+          <image src="./images/clipping/clipping4.png" />
+          <span>正方形</span>
+        </div>
+        <div class="clipping-item" @click="currIndex = 3" :class="[currIndex === 3 ? 'active' : '']">
+          <image src="./images/clipping/clipping3.png" />
+          <span>2:3</span>
+        </div>
+        <div class="clipping-item" @click="currIndex = 4" :class="[currIndex === 4 ? 'active' : '']">
+          <image src="./images/clipping/clipping2.png" />
+          <span>3:2</span>
+        </div>
+        <div class="clipping-item" @click="currIndex = 5" :class="[currIndex === 5 ? 'active' : '']">
+          <image src="./images/clipping/clipping1.png" />
+          <span>3:4</span>
+        </div>
+      </scroll-view>
+    </div>
+  </div>
+</template>
+
+<script>
+  import kspCropper from './components/ksp-cropper.vue'
+  export default {
+    name: 'Clipping',
+
+    appName: '图片剪裁',
+
+    components: {
+      kspCropper
+    },
+
+    data () {
+      return {
+        img: '',
+        currIndex: 0
+      }
+    },
+
+    onLoad (query) {
+      this.img = decodeURIComponent(query.url)
+      this.type = query.type
+    },
+
+    methods: {
+      back () {
+        uni.navigateBack({
+          delta: 1
+        })
+      },
+
+      save () {
+        this.$refs.Cropper.cropAppH5().then(res => {
+          console.log(res)
+        })
+      },
+
+      onOk (e) {
+        uni.$emit('cropper', e.path)
+
+        this.back()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .Clipping {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    overflow-y: auto;
+    background: #000;
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .photo-footer {
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      z-index: 1;
+      width: 100%;
+      background: #FFFFFF;
+      border-radius: 32px 32px 0px 0px;
+      border: 1px solid #DDDDDD;
+
+      .title {
+        display: flex;
+        position: relative;
+        align-items: center;
+        justify-content: center;
+        height: 96px;
+
+        span {
+          position: absolute;
+          top: 50%;
+          left: 32px;
+          z-index: 1;
+          color: #222;
+          font-size: 32px;
+          font-weight: 600;
+          transform: translateY(-50%);
+        }
+
+        .save-btn {
+          left: initial;
+          right: 32px;
+        }
+
+        h2 {
+          color: #333;
+          font-size: 28px;
+          font-weight: 600;
+        }
+      }
+
+      .photo-bottom {
+        padding: 48px 48px;
+        font-size: 0;
+        white-space: nowrap;
+
+        .clipping-item {
+          display: inline-block;
+          margin-right: 48px;
+          text-align: center;
+
+          &:last-child {
+            margin-right: 0;
+          }
+
+          span {
+            display: block;
+            color: #333;
+            font-size: 28px;
+          }
+
+          image {
+            width: 80px;
+            height: 80px;
+          }
+
+          &.active {
+            span {
+              color: #3975C6;
+            }
+          }
+        }
+      }
+    }
+
+    .photo-wrapper {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: calc(100vh - 312px);
+
+      & > image {
+        width: 100%;
+      }
+    }
+  }
+</style>
diff --git a/src/saas/AppCountryAlbum/Watermark.vue b/src/saas/AppCountryAlbum/Watermark.vue
index 65105ee6..6a1f5062 100644
--- a/src/saas/AppCountryAlbum/Watermark.vue
+++ b/src/saas/AppCountryAlbum/Watermark.vue
@@ -50,7 +50,7 @@
         </div>
       </div>
     </div>
-    <div class="photo-tabbar"  data-html2canvas-ignore>
+    <div class="photo-tabbar" data-html2canvas-ignore>
       <h2>编辑图片</h2>
       <div class="tabbar-wrapper">
         <div class="item" @click.stop="back">
@@ -61,7 +61,7 @@
           <image src="./images/shuiyin-white.png" />
           <div>水印</div>
         </div>
-        <div class="item" @click.stop="isHide = false">
+        <div class="item" @click.stop="toClipping">
           <image src="./images/jiancai.png" />
           <div>剪裁</div>
         </div>
@@ -187,11 +187,26 @@
       this.$nextTick(() => {
         this.getWatermarkList()
       })
+      uni.$on('cropper', e => {
+        this.img = e
+        this.x = 32
+        this.y = 200
+      })
+    },
+
+    onUnload () {
+      uni.$off('cropper')
     },
 
     methods: {
       ...mapActions(['injectJWeixin']),
 
+      toClipping () {
+        uni.navigateTo({
+          url: `./Clipping?url=${encodeURIComponent(this.img)}`
+        })
+      },
+
       onImgLoad () {
         const img = document.querySelector('.waterMarker-img')
 
diff --git a/src/saas/AppCountryAlbum/components/ksp-cropper.vue b/src/saas/AppCountryAlbum/components/ksp-cropper.vue
new file mode 100644
index 00000000..cc63f9ab
--- /dev/null
+++ b/src/saas/AppCountryAlbum/components/ksp-cropper.vue
@@ -0,0 +1,952 @@
+<template>
+<view v-show="url" :mode="modeValue" :change:mode="mwx.changeMode" :rotate="rotate" :change:rotate="mwx.changeRotate">
+	<!-- #ifdef MP-WEIXIN -->
+	<canvas type="2d" class="canvas" :style="{width: target.width + 'px', height: target.height + 'px'}"></canvas>
+	<!-- #endif -->
+	<!-- #ifdef APP-PLUS || H5 -->
+	<canvas :canvas-id="canvasId" :style="{width: target.width + 'px', height: target.height + 'px'}"></canvas>
+	<!-- #endif -->
+	<view class="panel">
+		<view class="body" @touchstart="mwx.touchstart" @touchmove="mwx.touchmove" @touchend="mwx.touchend" @touchcancel="mwx.touchcancel">
+			<view class="image-wrap" :class="{transit: transit}" :change:rect="mwx.changeImage" :rect="image">
+				<image class="image" mode="widthFix" :class="{transit: transit}" :src="url" @load="imageLoad"/>
+			</view>
+			<view class="mask"></view>
+			<view class="frame" :class="{transit: transit}" :change:rect="mwx.changeFrame" :rect="frame">
+				<view class="rect">
+					<view class="image-rect" :class="{transit: transit}">
+						<image class="image" :class="{transit: transit}" :src="url"/>
+					</view>
+				</view>
+				<view class="line-one"></view>
+				<view class="line-two"></view>
+				<view class="line-three"></view>
+				<view class="line-four"></view>
+				<view class="frame-left-top" @touchstart="mwx.touchstart"></view>
+				<view class="frame-left-bottom" @touchstart="mwx.touchstart"></view>
+				<view class="frame-right-top" @touchstart="mwx.touchstart"></view>
+				<view class="frame-right-bottom" @touchstart="mwx.touchstart"></view>
+			</view>
+		</view>
+		<!-- <view class="toolbar">
+			<view @tap="oncancle" class="btn-cancel">取消</view>
+			<view @tap="rotateAngle" class="btn-rotate">旋转</view>
+			<view @tap="onok" class="btn-ok">确定</view>
+		</view> -->
+	</view>
+</view>
+</template>
+<script>
+/**
+ * @property {String} mode 模式
+ *  @value fixed 固定模式，裁剪出固定大小
+ *  @value ratio 等比模式，宽高等比缩放
+ *  @value free 自由模式，不限制宽高比
+ * @property {String} url 图片路径
+ * @property {Number} width 宽度
+ * @property {Number} height 高度
+ * @property {Number} maxWidth 最大宽带
+ * @property {Number} minHeight 最大高度
+ */
+export default {
+	props: {
+		mode: {
+			type: String,
+			default: "free"
+		},
+		url: {
+			type: String,
+			default: ""
+		},
+		width: {
+			type: Number,
+			default: 200
+		},
+		height: {
+			type: Number,
+			default: 200
+		},
+		maxWidth: {
+			type: Number,
+			default: 10240
+		},
+		maxHeight: {
+			type: Number,
+			default: 10240
+		}
+	},
+	data() {
+		return {
+			canvasId: Math.random().toString(36).slice(-6),
+			real: {
+				width: 100,
+				height: 100
+			},
+			target: {
+				width: 100,
+				height: 100
+			},
+			body: {
+				width: 100,
+				height: 100
+			},
+			frame: {
+				left: 50,
+				top: 50,
+				width: 200,
+				height: 300
+			},
+			image: {
+				left: 20,
+				top: 20,
+				width: 300,
+				height: 400
+			},
+			rotate: 0,
+			transit: false,
+			modeValue: ""
+		};
+	},
+	methods: {
+		imageLoad(event) {
+			this.real.width = event.detail.width;
+			this.real.height = event.detail.height;
+			this.target = {};
+			var query = uni.createSelectorQuery().in(this);
+			query.select(".body").boundingClientRect((data) => {
+				this.body.width = data.width;
+				this.body.height = data.height;
+				this.init();
+			}).exec();
+		},
+		init() {
+			this.modeValue = this.mode;
+			this.rotate = 0;
+			var rate = this.width / this.height;
+			var width = this.body.width * 0.7;
+			var height = this.body.height * 0.7;
+			if (width / height > rate) {
+				width = height * rate;
+			} else {
+				height = width / rate;
+			}
+			var left = (this.body.width - width) / 2;
+			var top = (this.body.height - height) / 2;
+			this.frame = {
+				left: left,
+				top: top,
+				width: width,
+				height: height
+			};
+			rate = this.real.width / this.real.height;
+			width = this.frame.width;
+			height = this.frame.height;
+			if (width / height > rate) {
+				height = width / rate;
+			} else {
+				width = height * rate;
+			}
+			left = (this.frame.width - width) / 2 + this.frame.left;
+			top = (this.frame.height - height) / 2 + this.frame.top;
+			this.image = {
+				left: left,
+				top: top,
+				width: width,
+				height: height
+			};
+		},
+		async updateData(data) {
+			this.frame = data.frame;
+			this.image = data.image;
+			await this.$nextTick();
+			this.trimImage();
+		},
+		trimImage() {
+			var rate = this.frame.width / this.frame.height;
+			var width = this.body.width * 0.7;
+			var height = this.body.height * 0.7;
+			if (width / height > rate) {
+				width = height * rate;
+			} else {
+				height = width / rate;
+			}
+			var left = (this.body.width - width) / 2;
+			var top = (this.body.height - height) / 2;
+			var mul = width / this.frame.width;
+			var ox = this.frame.left - this.image.left;
+			var oy = this.frame.top - this.image.top;
+			this.frame = {
+				left: left,
+				top: top,
+				width: width,
+				height: height
+			};
+			width = this.image.width * mul;
+			height = this.image.height * mul;
+			left = this.frame.left - ox * mul;
+			top = this.frame.top - oy * mul;
+			this.image = {
+				left: left,
+				top: top,
+				width: width,
+				height: height
+			};
+			if (mul != 1) {
+				this.transit = true;
+				setTimeout(() => {
+					this.transit = false;
+				}, 300);
+			}
+		},
+		rotateAngle() {
+			this.rotate -= 90;
+			var width = this.image.height;
+			var height = this.image.width;
+			var left = this.image.left;
+			var top = this.image.top;
+			var rate = width / height;
+			if (width < this.frame.width) {
+				width = this.frame.width;
+				height = width / rate;
+			}
+			if (height < this.frame.height) {
+				height = this.frame.height;
+				width = height * rate;
+			}
+			if (left > this.frame.left) {
+				left = this.frame.left;
+			}
+			if (top > this.frame.top) {
+				top = this.frame.top;
+			}
+			if (left + width < this.frame.left + this.frame.width) {
+				left = this.frame.left + this.frame.width - width;
+			}
+			if (top + height < this.frame.top + this.frame.height) {
+				top = this.frame.top + this.frame.height - height;
+			}
+			this.image = {
+				left: left,
+				top: top,
+				width: width,
+				height: height
+			};
+			this.transit = true;
+			setTimeout(() => {
+				this.transit = false;
+			}, 300);
+		},
+		onok() {
+			// #ifdef MP-WEIXIN
+			this.cropWx();
+			// #endif
+			// #ifdef APP-PLUS || H5
+			this.cropAppH5();
+			// #endif
+		},
+		oncancle() {
+			this.$emit("cancel");
+		},
+		async cropWx() {
+			var mx = this.computeMatrix();
+			this.target = {
+				width: mx.tw,
+				height: mx.th
+			};
+			var canvas = await new Promise((resolve) => {
+				uni.createSelectorQuery()
+				.in(this)
+				.select(".canvas")
+				.fields({node: true})
+				.exec((rst) => {
+					var node = rst[0].node;
+					resolve(node);
+				});
+			});
+			canvas.width = mx.tw;
+			canvas.height = mx.th;
+			uni.showLoading({
+				title: "处理中"
+			});
+			await new Promise((resolve) => {
+				setTimeout(resolve, 200);
+			});
+			var context = canvas.getContext("2d");
+			var image = canvas.createImage();
+			await new Promise((resolve, reject) => {
+				image.onload = resolve;
+				image.onerror = reject;
+				image.src = this.url;
+			});
+			context.save();
+			context.rotate(this.rotate * Math.PI / 180);
+			context.drawImage(image, mx.sx, mx.sy, mx.sw, mx.sh, mx.dx, mx.dy, mx.dw, mx.dh);
+			context.restore();
+			uni.canvasToTempFilePath({
+				canvas: canvas,
+				destWidth: mx.tw,
+				destHeight: mx.th,
+				success: (rst) => {
+					var path = rst.tempFilePath;
+					this.$emit("ok", {
+						path: path
+					});
+				},
+				complete: () => {
+					uni.hideLoading();
+				}
+			});
+		},
+		async cropAppH5() {
+			var mx = this.computeMatrix();
+			this.target = {
+				width: mx.tw,
+				height: mx.th
+			};
+			uni.showLoading({
+				title: "处理中"
+			});
+			await new Promise((resolve) => {
+				setTimeout(resolve, 200);
+			});
+			var context = uni.createCanvasContext(this.canvasId, this);
+			context.save();
+			context.rotate(this.rotate * Math.PI / 180);
+			context.drawImage(this.url, mx.sx, mx.sy, mx.sw, mx.sh, mx.dx, mx.dy, mx.dw, mx.dh);
+			context.restore();
+			await new Promise((resolve) => {
+				context.draw(false, resolve);
+			});
+			uni.canvasToTempFilePath({
+				canvasId: this.canvasId,
+				destWidth: mx.tw,
+				destHeight: mx.th,
+				success: (rst) => {
+					var path = rst.tempFilePath;
+					// #ifdef H5
+					var base64 = path;
+					path = this.parseBlob(path);
+					this.$emit("ok", {
+						path: path,
+						base64: base64
+					});
+					// #endif
+					// #ifdef APP-PLUS
+					this.$emit("ok", {
+						path: path
+					});
+					// #endif
+				},
+				complete: () => {
+					uni.hideLoading();
+				}
+			}, this);
+		},
+		computeMatrix() {
+			var width = this.width;
+			var height = this.height;
+			var mul = this.image.width / this.real.width;
+			if (this.rotate % 180 != 0) {
+				mul = this.image.height / this.real.width;
+			}
+			if (this.mode != "fixed") {
+				width = this.frame.width / mul;
+				height = this.frame.height / mul;
+			}
+			var rate = width / height;
+			if (width > this.maxWidth) {
+				width = this.maxWidth;
+				height = width / rate;
+			}
+			if (height > this.maxHeight) {
+				height = this.maxHeight;
+				width = height * rate;
+			}
+			var sx = (this.frame.left - this.image.left) / mul;
+			var sy = (this.frame.top - this.image.top) / mul;
+			var sw = this.frame.width / mul;
+			var sh = this.frame.height / mul;
+			var ox = sx + sw / 2;
+			var oy = sy + sh / 2;
+			if (this.rotate % 180 != 0) {
+				var temp = sw;
+				sw = sh;
+				sh = temp;
+			}
+			var angle = this.rotate % 360;
+			if (angle < 0) {
+				angle += 360;
+			}
+			if (angle == 270) {
+				var x = this.real.width - oy;
+				var y = ox;
+				ox = x;
+				oy = y;
+			}
+			if (angle == 180) {
+				var x = this.real.width - ox;
+				var y = this.real.height - oy;
+				ox = x;
+				oy = y;
+			}
+			if (angle == 90) {
+				var x = oy;
+				var y = this.real.height - ox;
+				ox = x;
+				oy = y;
+			}
+			sx = ox - sw / 2;
+			sy = oy - sh / 2;
+			var dr = {x: 0, y: 0, w: width, h: height};
+			dr = this.parseRect(dr, -this.rotate);
+			return {
+				tw: width,
+				th: height,
+				sx: sx,
+				sy: sy,
+				sw: sw,
+				sh: sh,
+				dx: dr.x,
+				dy: dr.y,
+				dw: dr.w,
+				dh: dr.h
+			};
+		},
+		parsePoint(point, angle) {
+			var result = {};
+			result.x = point.x * Math.cos(angle * Math.PI / 180) - point.y * Math.sin(angle * Math.PI / 180);
+			result.y = point.y * Math.cos(angle * Math.PI / 180) + point.x * Math.sin(angle * Math.PI / 180);
+			return result;
+		},
+		parseRect(rect, angle) {
+			var x1 = rect.x;
+			var y1 = rect.y;
+			var x2 = rect.x + rect.w;
+			var y2 = rect.y + rect.h;
+			var p1 = this.parsePoint({x: x1, y: y1}, angle);
+			var p2 = this.parsePoint({x: x2, y: y2}, angle);
+			var result = {};
+			result.x = Math.min(p1.x, p2.x);
+			result.y = Math.min(p1.y, p2.y);
+			result.w = Math.abs(p2.x - p1.x);
+			result.h = Math.abs(p2.y - p1.y);
+			return result;
+		},
+		parseBlob(base64) {
+			var arr = base64.split(',');
+			var mime = arr[0].match(/:(.*?);/)[1];
+			var bstr = atob(arr[1]);
+			var n = bstr.length;
+			var u8arr = new Uint8Array(n);
+			for(var i = 0; i < n; i++) {
+				u8arr[i] = bstr.charCodeAt(i);
+			}
+			var url = URL || webkitURL;
+			return url.createObjectURL(new Blob([u8arr], {type: mime}));
+		},
+	}
+};
+</script>
+
+<script module="mwx" lang="wxs">
+	var mode = "";
+	var rotate = 0;
+	var image = {
+		left: 0,
+		top: 0,
+		width: 0,
+		height: 0
+	};
+	var frame = {
+		left: 0,
+		top: 0,
+		width: 0,
+		height: 0
+	};
+	var touches = [];
+	var touchType = "";
+	var start = {
+		frame: {
+			left: 0,
+			top: 0,
+			width: 0,
+			height: 0
+		},
+		image: {
+			left: 0,
+			top: 0,
+			width: 0,
+			height: 0
+		}
+	};
+	function changeMode(value) {
+		mode = value;
+	}
+	function changeRotate(value, old, oi, instance) {
+		rotate = value;
+		updateStyle(oi);
+	}
+	function changeImage(value, old, oi, instance) {
+		image = value;
+		updateStyle(oi);
+	}
+	function changeFrame(value, old, oi, instance) {
+		frame = value;
+		updateStyle(oi);
+	}
+	function touchstart(event, oi) {
+		// #ifdef APP-PLUS || H5
+		event.preventDefault();
+		event.stopPropagation();
+		// #endif
+		touches = event.touches;
+		var instance = event.instance;
+		if (instance.hasClass("body")) {
+			touchType = "body";
+		} else if (instance.hasClass("frame-left-top")) {
+			touchType = "left-top";
+		} else if (instance.hasClass("frame-left-bottom")) {
+			touchType = "left-bottom";
+		} else if (instance.hasClass("frame-right-top")) {
+			touchType = "right-top";
+		} else if (instance.hasClass("frame-right-bottom")) {
+			touchType = "right-bottom";
+		}
+		start.frame.left = frame.left;
+		start.frame.top = frame.top;
+		start.frame.width = frame.width;
+		start.frame.height = frame.height;
+		start.image.left = image.left;
+		start.image.top = image.top;
+		start.image.width = image.width;
+		start.image.height = image.height;
+		return false;
+	}
+	function touchmove(event, oi) {
+		// #ifdef APP-PLUS || H5
+		event.preventDefault();
+		event.stopPropagation();
+		// #endif
+		var instance = event.instance;
+		if (touches.length == 1) {
+			if (touchType == "body") {
+				moveImage(touches[0], event.touches[0], oi);
+			} else {
+				scaleFrame(touches[0], event.touches[0], oi);
+			}
+		} else if (touches.length == 2 && event.touches.length == 2) {
+			var ta = touches[0];
+			var tb = touches[1];
+			var tc = event.touches[0];
+			var td = event.touches[1];
+			if (ta.identifier != tc.identifier) {
+				var temp = tc;
+				tc = td;
+				td = temp;
+			}
+			scaleImage(ta, tb, tc, td, oi);
+		}
+	}
+	function touchend(event, oi) {
+		touches = [];
+		oi.callMethod("updateData", {frame: frame, image: image});
+	}
+	function touchcancel(event, oi) {
+		touches = [];
+		oi.callMethod("updateData", {frame: frame, image: image});
+	}
+	function moveImage(ta, tb, oi) {
+		var ax = tb.clientX - ta.clientX;
+		var ay = tb.clientY - ta.clientY;
+		image.left = start.image.left + ax;
+		image.top = start.image.top + ay;
+		var left = frame.left;
+		var top = frame.top;
+		var width = frame.width;
+		var height = frame.height;
+		if (image.left > left) {
+			image.left = left;
+		}
+		if (image.top > top) {
+			image.top = top;
+		}
+		if (image.left + image.width < left + width) {
+			image.left = left + width - image.width;
+		}
+		if (image.top + image.height < top + height) {
+			image.top = top + height - image.height;
+		}
+		updateStyle(oi);
+	}
+	function scaleImage(ta, tb, tc, td, oi) {
+		var x1 = ta.clientX;
+		var y1 = ta.clientY;
+		var x2 = tb.clientX;
+		var y2 = tb.clientY;
+		var x3 = tc.clientX;
+		var y3 = tc.clientY;
+		var x4 = td.clientX;
+		var y4 = td.clientY;
+		var ol = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
+		var el = Math.sqrt((x3 - x4) * (x3 - x4) + (y3 - y4) * (y3 - y4));
+		var ocx = (x1 + x2) / 2;
+		var ocy = (y1 + y2) / 2;
+		var ecx = (x3 + x4) / 2;
+		var ecy = (y3 + y4) / 2;
+		var ax = ecx - ocx;
+		var ay = ecy - ocy;
+		var scale = el / ol;
+		if (start.image.width * scale < frame.width) {
+			scale = frame.width / start.image.width;
+		}
+		if (start.image.height * scale < frame.height) {
+			scale = frame.height / start.image.height;
+		}
+		if (start.image.width * scale < frame.width) {
+			scale = frame.width / start.image.width;
+		}
+		image.left = start.image.left + ax - (ocx - start.image.left) * (scale - 1);
+		image.top = start.image.top + ay - (ocy - start.image.top) * (scale - 1);
+		image.width = start.image.width * scale;
+		image.height = start.image.height * scale;
+		if (image.left > frame.left) {
+			image.left = frame.left;
+		}
+		if (image.top > frame.top) {
+			image.top = frame.top;
+		}
+		if (image.left + image.width < frame.left + frame.width) {
+			image.left = frame.left + frame.width - image.width;
+		}
+		if (image.top + image.height < frame.top + frame.height) {
+			image.top = frame.top + frame.height - image.height;
+		}
+		updateStyle(oi);
+	}
+	function scaleFrame(ta, tb, oi) {
+		var ax = tb.clientX - ta.clientX;
+		var ay = tb.clientY - ta.clientY;
+		var x1 = start.frame.left;
+		var y1 = start.frame.top;
+		var x2 = start.frame.left + start.frame.width;
+		var y2 = start.frame.top + start.frame.height;
+		var cx1 = false;
+		var cy1 = false;
+		var cx2 = false;
+		var cy2 = false;
+		var mix = 30;
+		var rate = frame.width / frame.height;
+		if (touchType == "left-top") {
+			x1 += ax;
+			y1 += ay;
+			cx1 = true;
+			cy1 = true;
+		} else if (touchType == "left-bottom") {
+			x1 += ax;
+			y2 += ay;
+			cx1 = true;
+			cy2 = true;
+		} else if (touchType == "right-top") {
+			x2 += ax;
+			y1 += ay;
+			cx2 = true;
+			cy1 = true;
+		} else if (touchType == "right-bottom") {
+			x2 += ax;
+			y2 += ay;
+			cx2 = true;
+			cy2 = true;
+		}
+		if (x1 < image.left) {
+			x1 = image.left;
+		}
+		if (y1 < image.top) {
+			y1 = image.top;
+		}
+		if (x2 > image.left + image.width) {
+			x2 = image.left + image.width;
+		}
+		if (y2 > image.top + image.height) {
+			y2 = image.top + image.height;
+		}
+		if (cx1) {
+			if (x1 > x2 - mix) {
+				x1 = x2 - mix;
+			}
+		}
+		if (cy1) {
+			if (y1 > y2 - mix) {
+				y1 = y2 - mix;
+			}
+		}
+		if (cx2) {
+			if (x2 < x1 + mix) {
+				x2 = x1 + mix;
+			}
+		}
+		if (cy2) {
+			if (y2 < y1 + mix) {
+				y2 = y1 + mix;
+			}
+		}
+		if (cx1) {
+			if (mode != "free") {
+				var val = x2 - rate * (y2 - y1);
+				if (x1 < val) {
+					x1 = val;
+				}
+			}
+		}
+		if (cy1) {
+			if (mode != "free") {
+				var val = y2 - (x2 - x1) / rate;
+				if (y1 < val) {
+					y1 = val;
+				}
+			}
+		}
+		if (cx2) {
+			if (mode != "free") {
+				var val = rate * (y2 - y1) + x1;
+				if (x2 > val) {
+					x2 = val;
+				}
+			}
+		}
+		if (cy2) {
+			if (mode != "free") {
+				var val = (x2 - x1) / rate + y1;
+				if (y2 > val) {
+					y2 = val;
+				}
+			}
+		}
+		frame.left = x1;
+		frame.top = y1;
+		frame.width = x2 - x1;
+		frame.height = y2 - y1;
+		updateStyle(oi);
+	}
+	function updateStyle(oi) {
+		oi.selectComponent(".frame").setStyle({
+			"left": frame.left + "px",
+			"top": frame.top + "px",
+			"width": frame.width + "px",
+			"height": frame.height + "px"
+		});
+		oi.selectComponent(".image-wrap").setStyle({
+			"left": image.left + "px",
+			"top": image.top + "px",
+			"width": image.width + "px",
+			"height": image.height + "px"
+		});
+		oi.selectComponent(".image-rect").setStyle({
+			"left": image.left - frame.left + "px",
+			"top": image.top - frame.top + "px",
+			"width": image.width + "px",
+			"height": image.height + "px"
+		});
+		var left = 0;
+		var top = 0;
+		var width = image.width;
+		var height = image.height;
+		if (rotate % 180 != 0) {
+			width = image.height;
+			height = image.width;
+			top = width / 2 - height / 2;
+			left = height / 2 - width/ 2;
+		}
+		oi.selectComponent(".image-wrap .image").setStyle({
+			"left": left + "px",
+			"top": top + "px",
+			"width": width + "px",
+			"height": height + "px",
+			"transform": "rotate(" + rotate + "deg)"
+		});
+		oi.selectComponent(".image-rect .image").setStyle({
+			"left": left + "px",
+			"top": top + "px",
+			"width": width + "px",
+			"height": height + "px",
+			"transform": "rotate(" + rotate + "deg)"
+		});
+	}
+	module.exports = {
+		changeMode: changeMode,
+		changeRotate: changeRotate,
+		changeImage: changeImage,
+		changeFrame: changeFrame,
+		touchstart: touchstart,
+		touchmove: touchmove,
+		touchend: touchend,
+		touchcancel: touchcancel
+	};
+</script>
+
+<style scoped>
+.panel {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+.canvas {
+	position: absolute;
+	top: 5000px;
+	left: 5000px;
+}
+.toolbar {
+	position: absolute;
+	width: 100%;
+	height: 100rpx;
+	left: 0rpx;
+	bottom: 0rpx;
+	display: flex;
+	justify-content: space-around;
+	align-items: center;
+}
+.btn-cancel {
+	font-size: 40rpx;
+	color: #d5dfe5;
+	font-weight: bold;
+}
+.btn-ok {
+	font-size: 40rpx;
+	color: #FFFFFF;
+	font-weight: bold;
+}
+.btn-rotate {
+	font-size: 40rpx;
+	color: #d5dfe5;
+	font-weight: bold;
+}
+.body {
+	position: absolute;
+	left: 0rpx;
+	right: 0rpx;
+	top: 0rpx;
+	bottom: 0rpx;
+	background: black;
+	overflow: hidden;
+}
+.mask {
+	position: absolute;
+	left: 0rpx;
+	right: 0rpx;
+	top: 0rpx;
+	bottom: 0rpx;
+	background: black;
+	opacity: 0.4;
+}
+.plank {
+	position: absolute;
+	left: 0rpx;
+	right: 0rpx;
+	top: 0rpx;
+	bottom: 0rpx;
+}
+.image-wrap {
+	position: absolute;
+}
+.image-rect {
+	position: absolute;
+}
+.image {
+	position: absolute;
+}
+.frame {
+	position: absolute;
+	left: 100px;
+	top: 100px;
+	width: 200px;
+	height: 200px;
+}
+.rect {
+	position: absolute;
+	left: -2px;
+	top: -2px;
+	width: 100%;
+	height: 100%;
+	border: 2px solid white;
+	overflow: hidden;
+	box-sizing:content-box;
+}
+.line-one {
+	position: absolute;
+	width: 100%;
+	height: 1px;
+	background: white;
+	left: 0;
+	top: 33.3%;
+	box-sizing:content-box;
+}
+.line-two {
+	position: absolute;
+	width: 100%;
+	height: 1px;
+	background: white;
+	left: 0;
+	top: 66.7%;
+	box-sizing:content-box;
+}
+.line-three {
+	position: absolute;
+	width: 1px;
+	height: 100%;
+	background: white;
+	top: 0;
+	left: 33.3%;
+	box-sizing:content-box;
+}
+.line-four {
+	position: absolute;
+	width: 1px;
+	height: 100%;
+	background: white;
+	top: 0;
+	left: 66.7%;
+	box-sizing:content-box;
+}
+.frame-left-top {
+	position: absolute;
+	width: 20px;
+	height: 20px;
+	left: -6px;
+	top: -6px;
+	border-left: 4px solid red;
+	border-top: 4px solid red;
+	box-sizing:content-box;
+}
+.frame-left-bottom {
+	position: absolute;
+	width: 20px;
+	height: 20px;
+	left: -6px;
+	bottom: -6px;
+	border-left: 4px solid red;
+	border-bottom: 4px solid red;
+	box-sizing:content-box;
+}
+.frame-right-top {
+	position: absolute;
+	width: 20px;
+	height: 20px;
+	right: -6px;
+	top: -6px;
+	border-right: 4px solid red;
+	border-top: 4px solid red;
+	box-sizing:content-box;
+}
+.frame-right-bottom {
+	position: absolute;
+	width: 20px;
+	height: 20px;
+	right: -6px;
+	bottom: -6px;
+	border-right: 4px solid red;
+	border-bottom: 4px solid red;
+	box-sizing:content-box;
+}
+.transit {
+	transition: width 0.3s, height 0.3s, left 0.3s, top 0.3s, transform 0.3s;
+}
+</style>
diff --git a/src/saas/AppCountryAlbum/components/report/Daily.vue b/src/saas/AppCountryAlbum/components/report/Daily.vue
index 8782bb62..c36d3943 100644
--- a/src/saas/AppCountryAlbum/components/report/Daily.vue
+++ b/src/saas/AppCountryAlbum/components/report/Daily.vue
@@ -139,11 +139,13 @@
       onLongpress (e) {
         if (e.action === 'remove') {
           this.richList.splice(e.index, 1)
-        } else {
+        } else if (e.action === 'edit') {
           this.currIndex = e.index
           this.content = e.value
 
           this.isShowText = true
+        } else {
+          this.richList[e.index].value = e.value
         }
       },
 
diff --git a/src/saas/AppCountryAlbum/components/report/InspectLog.vue b/src/saas/AppCountryAlbum/components/report/InspectLog.vue
index 95e07bf1..cfb9071d 100644
--- a/src/saas/AppCountryAlbum/components/report/InspectLog.vue
+++ b/src/saas/AppCountryAlbum/components/report/InspectLog.vue
@@ -148,11 +148,13 @@
       onLongpress (e) {
         if (e.action === 'remove') {
           this.richList.splice(e.index, 1)
-        } else {
+        } else if (e.action === 'edit') {
           this.currIndex = e.index
           this.content = e.value
 
           this.isShowText = true
+        } else {
+          this.richList[e.index].value = e.value
         }
       },
 
diff --git a/src/saas/AppCountryAlbum/components/report/MeetingMminutes.vue b/src/saas/AppCountryAlbum/components/report/MeetingMminutes.vue
index 4fb3dd8e..c7611517 100644
--- a/src/saas/AppCountryAlbum/components/report/MeetingMminutes.vue
+++ b/src/saas/AppCountryAlbum/components/report/MeetingMminutes.vue
@@ -169,11 +169,13 @@
       onLongpress (e) {
         if (e.action === 'remove') {
           this.richList.splice(e.index, 1)
-        } else {
+        } else if (e.action === 'edit') {
           this.currIndex = e.index
           this.content = e.value
 
           this.isShowText = true
+        } else {
+          this.richList[e.index].value = e.value
         }
       },
 
diff --git a/src/saas/AppCountryAlbum/components/report/RenderContent.vue b/src/saas/AppCountryAlbum/components/report/RenderContent.vue
index e49ad338..b935822b 100644
--- a/src/saas/AppCountryAlbum/components/report/RenderContent.vue
+++ b/src/saas/AppCountryAlbum/components/report/RenderContent.vue
@@ -24,7 +24,7 @@
             <image src="../../images/xiugai.png" />
             <span>修改</span>
           </div>
-          <div class="btn-item" hover-class="bg-hover" v-else>
+          <div class="btn-item" hover-class="bg-hover" @click="toClipping" v-else>
             <image src="../../images/jiancai.png" />
             <span>剪裁</span>
           </div>
@@ -48,6 +48,19 @@
       }
     },
 
+    mounted () {
+      uni.$on('cropper', e => {
+        this.$emit('onLongpress', {
+          type: this.type,
+          value: e,
+          index: this.currIndex,
+          action: 'cropper'
+        })
+
+        this.isShow = false
+      })
+    },
+
     methods: {
       toEditText () {
         this.$emit('onLongpress', {
@@ -73,6 +86,12 @@
         this.isShow = false
       },
 
+      toClipping () {
+        uni.navigateTo({
+          url: `./Clipping?url=${encodeURIComponent(this.value)}`
+        })
+      },
+
       onLongpress (item, index) {
         this.currIndex = index
         this.type = item.type
diff --git a/src/saas/AppCountryAlbum/components/report/WorkReport.vue b/src/saas/AppCountryAlbum/components/report/WorkReport.vue
index bc2a5643..0f9fce9e 100644
--- a/src/saas/AppCountryAlbum/components/report/WorkReport.vue
+++ b/src/saas/AppCountryAlbum/components/report/WorkReport.vue
@@ -138,11 +138,13 @@
       onLongpress (e) {
         if (e.action === 'remove') {
           this.richList.splice(e.index, 1)
-        } else {
+        } else if (e.action === 'edit') {
           this.currIndex = e.index
           this.content = e.value
 
           this.isShowText = true
+        } else {
+          this.richList[e.index].value = e.value
         }
       },
 
diff --git a/src/saas/AppCountryAlbum/images/clipping/clipping1.png b/src/saas/AppCountryAlbum/images/clipping/clipping1.png
new file mode 100644
index 0000000000000000000000000000000000000000..74de453f852bcb7c3e063f953468bee650a39473
GIT binary patch
literal 288
zcmeAS@N?(olHy`uVBq!ia0vp^0U*r63?ysp-_HY5jKx9jP7LeL$-D$|v;urWT!FN<
zwzjpkwSj?wzP`SZk&%gs34}C81v_r#r~_5=mIV0)GqCXrXb1LB-gD)~r$7HMPC5gW
z==OAR4DmRgoFKuvIN<`*_M7Dk6VkctN*|@aKXh=e)16lm)$f%WrI{>5H{Ew-WVI0e
zb!V?AOY-V<d#hQNAG))<TTo{8?&}3wbE?f54kqrc7G8d6Z@H*|%(C6v3$^xCi<{?%
zJX~=ouyrw)`zEJF+(C=F(-v`8FIvsNNLyvmYKukMzK>Qv3^d?k6JuZyv3vUb>NIzt
Qs~8wOUHx3vIVCg!0Ha)Ei~s-t

literal 0
HcmV?d00001

diff --git a/src/saas/AppCountryAlbum/images/clipping/clipping2.png b/src/saas/AppCountryAlbum/images/clipping/clipping2.png
new file mode 100644
index 0000000000000000000000000000000000000000..b0370a582a69a0f1ce4935aff4259dae903eddfe
GIT binary patch
literal 290
zcmeAS@N?(olHy`uVBq!ia0vp^0U*r63?ysp-_HY5jKx9jP7LeL$-D$|v;urWT!FN<
zwzjpkwSj?wzP`SZk&%gs34}C81v_r#r~_5=mIV0)GqCXrXb1LB-gD)~r$7HMPC5gW
z==F4Q4DmRgoFKuvI6;Ib`GMJQJ*gWrn|$Z~xVc;6fuG_st7G?eM;zc~<Y|3VzOjjk
zr`4`JpLJpP%5{6IS)3E!-90+v-Ns$jyv{lA?lSnat|`w?>Ug_%b;HUDFW=?zY}{SG
zu~ky+VqoiHu9piYylC+*2~)5t7MvT~smIWv7u2D*q(lFk+d&Np*2Am}3><Awp9^?)
R-32;~!PC{xWt~$(698P9XQTiC

literal 0
HcmV?d00001

diff --git a/src/saas/AppCountryAlbum/images/clipping/clipping3.png b/src/saas/AppCountryAlbum/images/clipping/clipping3.png
new file mode 100644
index 0000000000000000000000000000000000000000..190f7685cb7aecf4f19ff441f9811c3929f3cc80
GIT binary patch
literal 288
zcmeAS@N?(olHy`uVBq!ia0vp^0U*r63?ysp-_HY5jKx9jP7LeL$-D$|v;urWT!FN<
zwzjpkwSj?wzP`SZk&%gs34}C81v_r#r~_5=mIV0)GqCXrXb1LB-gD)~r$7HMPC5gW
z==OAR4DmRgoFKuvIAH_R_M7Do6VkczN*|@aS8B9w-Eqb6+dWrCbCv>)l>OaoTm>3m
zc2;Y191M=F{?5VIy0ctdxp?inxWfwz-rZ$L(R+P&wuQ*My{j9}r0%MgZa=iU{NrbL
z(LODiP>WRsOSDvWDX8wsP}{XZeb+CAT~127x|DZaQrRaZ2ei9^kzvx0&)X;FZ@UF_
O7K5j&pUXO@geCy=tY<a=

literal 0
HcmV?d00001

diff --git a/src/saas/AppCountryAlbum/images/clipping/clipping4.png b/src/saas/AppCountryAlbum/images/clipping/clipping4.png
new file mode 100644
index 0000000000000000000000000000000000000000..afcf7eec084a842f4fd4f60f794caad001c872e8
GIT binary patch
literal 291
zcmeAS@N?(olHy`uVBq!ia0vp^0U*r63?ysp-_HY5jKx9jP7LeL$-D$|v;urWT!FN<
zwzjpkwSj?wzP`SZk&%gs34}C81v_r#r~_5=mIV0)GqCXrXb1LB-gD)~r$7HMPC5gW
z=<{@O4DmRgoFKuvI3a*(`_1x;2hNG)ygG9J-cg2fF2k#a-|ih{%Hv4TNZH>lDw3e_
zWoNZEN32ij+q=pVT*dG8j+OLZy_+qORQ#STK`Ui%wXk!}`&d?=R-f|x<c_<0yLHcO
z=;+gu3AI>N5b}^C*rUYJtK_0jNuqzrSI3f8ml9F;lBJ$CrZ!w|2M;ha@Vm&Gy^Hss
Q4s;oVr>mdKI;Vst0F~-vJpcdz

literal 0
HcmV?d00001

diff --git a/src/saas/AppCountryAlbum/images/clipping/clipping5.png b/src/saas/AppCountryAlbum/images/clipping/clipping5.png
new file mode 100644
index 0000000000000000000000000000000000000000..3dd6466b0e4015c046d76b7580eabd297a6ab0de
GIT binary patch
literal 543
zcmeAS@N?(olHy`uVBq!ia0vp^0U*r53?z4+XPOVB7>k44ofy`glX(f`)CKs2xB_X0
zh6dxbGY(n%9U87$mmRSwKWSBZ%ChX3Magl?(qk6I$1Tc_Tb7-)EIDRbanh>n1W2&t
zxK-(KkVqL2ov<ncaji;^0vSMAkb<(KASoaNC<sCjaWDzg1yTcI^PG`80(5|8NswPK
z0~0F`53jy~nYo9jXFy<JNN8ARS6A1>NlTV2y>avQokx!zJ%0S@^N)Xz!rH}vUXk*2
zaSVw#{C4`?ye0<$H%8GVVH2k*X?d|0TE73^wD)DaPs4i6@^d@q_D{|!yE*rx&0zzc
z#q$$(>qj@7zFhlqCtJqpzh)O|UmM5oxqp4u`%9I&ul}rY7QD3g*Cd1AKU;RCpPZl4
zm4BIWU5B{yLf06J1-ChV2QpsIu#t#u{QTqGl7{XnOI`Rp+>_ZCTqs-5z_)m%P={$E
z&y>Y0#b#t5vb@l@jNyvB!zsH38``2oy>5oat`B(_zo{)zg8%#z@i$NW8}^?5f8Ot&
zj_<v5vdi-<f)BKI>0gO@w17$KpoE!&YEQ5y`;NOsW+Jn6%lTdirE30MfAX1;&5u2q
zizC<drR~(0yRjswC3MmK#Dk|lmPpU~nzuYzssd=do4x$HFV@ShUt4z+6uF+RelF{r
G5}E*c%=C@`

literal 0
HcmV?d00001

diff --git a/src/saas/AppCountryAlbum/images/clipping/yuantu.png b/src/saas/AppCountryAlbum/images/clipping/yuantu.png
new file mode 100644
index 0000000000000000000000000000000000000000..1594de71a0ada5fa119d08c41ad8174a811d5e9e
GIT binary patch
literal 531
zcmeAS@N?(olHy`uVBq!ia0vp^0U*r53?z4+XPOVB7>k44ofy`glX(f`#0L0;xB_Wy
zZEb67YXbuVJv}`jsjshZYHDg^WMph?3?zZT#KZ(hLbz}?kO36I3LuJsQu~zufGn3Q
z3GxeOVB-}KQ`PqH4G0X6OfB#1pS*g{nJYIQef;$M&)>h{=1b&(&a?7#aSVw#{Py}?
zp(X_Z)(4yFPhL5tqjCSgVX-eaZ~NgbmwT(%sg&<K+3JyI-07k;u_tY===M{SqbII)
z%$qlxtLx<R3FWIE%n>kL&oqho@8aisk4#*z*QNjE%0IibC%O~v>3E#klj<5Pn!H*3
z`qI|zUDv!@8U@$N<%@2Wid`SDwt>lyG3FhA``<~tF|zMX_Q{9aJot7icgb~K_7z{!
zv#-4>|L}C~<u5s%d*`(^_AVFR<x`@~S0%-wm1~<}E%D8S<xS<=3o{)3nGZCk`%btU
zEc54+)x|GWT+Mvz#pGGEb}u(rF_&Avvc|5i)4*cWgtz+t-f41J)l2vZGT)6;f0rZp
zdZE<r+Zs!4-`~*bzpu9R&AQ04H?fg<PyAn<SNP4X{#)Ddx3~50jZJ?a9IiJ>wzv5t
hpRX#^nKG%8NmnLA_M(%BDlohmJYD@<);T3K0RWHj&Vv8|

literal 0
HcmV?d00001