From 17efddc6a667670dca682bf36b51a43e99615e6d Mon Sep 17 00:00:00 2001
From: k94314517 <8417338+k94314517@user.noreply.gitee.com>
Date: 星期三, 16 十月 2024 15:59:38 +0800
Subject: [PATCH] 代码初始化
---
h5/pages/cropping/cropping.vue | 76 ++++++++++++++++++++-----------------
1 files changed, 41 insertions(+), 35 deletions(-)
diff --git a/h5/pages/cropping/cropping.vue b/h5/pages/cropping/cropping.vue
index cd95adc..8d590ad 100644
--- a/h5/pages/cropping/cropping.vue
+++ b/h5/pages/cropping/cropping.vue
@@ -8,10 +8,13 @@
:style="{ width: preImgW + 'px', height: preImgH + 'px', transform: `translate(${x}px,${y}px)` }"></canvas>
</view>
<!-- 宸ュ叿 -->
- <view class="setting-btns"><text @click="onCrop">纭畾</text></view>
+ <view class="setting-btns">
+ <!-- <text @click="onCrop">纭畾</text> -->
+ <u-button text="纭畾" @click="onCrop"></u-button>
+ </view>
</view>
</template>
-
+
<script>
export default {
data() {
@@ -39,20 +42,23 @@
computed: {},
onLoad(option) {
// 閫夋嫨鐓х墖淇℃伅
- let data = JSON.parse(decodeURIComponent(option.item));
- const query = uni.createSelectorQuery();
- query.select('.settingHeadImage').boundingClientRect();
- query.exec(res => {
- // 璁剧疆灞忓箷澶у皬
- this.screenWidth = res[0].width;
- this.screenHeight = res[0].height;
- // 璁剧疆鍥惧儚鍩哄噯鍊硷紝鍥惧儚鍩哄噯鍊兼寜灞忓箷瀹藉害璁剧疆锛屼袱杈圭暀鐧藉悇40
- this.maxH = res[0].width - 80;
- this.maxW = res[0].width - 80;
- // 璁剧疆X杞村�硷紝绠楀紡锛氬睆骞曢珮搴︾殑涓�鍗婂噺鍘诲熀鍑嗘楂樺害鐨勪竴鍗�
- this.xToTop = this.screenHeight / 2 - this.maxH / 2;
- this.setImageSize(data);
- });
+ let data = JSON.parse(option.item);
+ console.log(data)
+ this.$nextTick(() => {
+ const query = uni.createSelectorQuery();
+ query.select('.settingHeadImage').boundingClientRect();
+ query.exec(res => {
+ // 璁剧疆灞忓箷澶у皬
+ this.screenWidth = res[0].width;
+ this.screenHeight = res[0].height;
+ // 璁剧疆鍥惧儚鍩哄噯鍊硷紝鍥惧儚鍩哄噯鍊兼寜灞忓箷瀹藉害璁剧疆锛屼袱杈圭暀鐧藉悇40
+ this.maxH = res[0].width - 80;
+ this.maxW = res[0].width - 80;
+ // 璁剧疆X杞村�硷紝绠楀紡锛氬睆骞曢珮搴︾殑涓�鍗婂噺鍘诲熀鍑嗘楂樺害鐨勪竴鍗�
+ this.xToTop = this.screenHeight / 2 - this.maxH / 2;
+ this.setImageSize(data);
+ });
+ })
},
methods: {
// 瀹介珮澶勭悊
@@ -98,17 +104,19 @@
this.preImgW = w;
// 璁剧疆钂欏眰
this.setBgBox();
- // 鍥惧儚棰勮
- this.previewCanvas({
- w,
- h,
- path
- });
+ setTimeout(() => {
+ // 鍥惧儚棰勮
+ this.previewCanvas({
+ w,
+ h,
+ path
+ });
+ }, 500)
}
}
});
},
-
+
// 璁剧疆钂欏眰
setBgBox() {
const {
@@ -142,6 +150,7 @@
h,
path
}) {
+ console.log(path, w, h)
const ctx = uni.createCanvasContext('mycanvas');
ctx.drawImage(path, 0, 0, w, h);
ctx.draw();
@@ -183,7 +192,7 @@
let y = (res[0].height - res[0].width) / 2;
/**
* 鍒ゆ柇鐓х墖鍙Щ鍔ㄧ殑璺濈鏄惁澶т簬鐣欑櫧鐨勫�硷紝濡傛灉澶т簬鍚戝彸鍒掓椂鍥剧墖鐨勫鍑忓幓鍩哄噯妗嗙殑瀹藉噺鍘荤暀鐧藉悜宸︽椂鐣欑櫧锛屽皬浜庢椂鎸夊浘鐗囩殑鍙Щ鍔ㄥ��
- * */
+ * */
let x = (preImgW - maxW) / 2 > 40 ? (fx < 0 ? preImgW - maxW - 40 : 40) : (preImgW - maxW) / 2;
if (preImgH > maxH) {
this.y = this.y > y ? y : this.y < -y ? -y : this.y;
@@ -222,14 +231,10 @@
destHeight: maxH,
canvasId: 'mycanvas',
success: fileRes => {
- console.log(fileRes);
- uni.previewImage({
- count: 1,
- urls: [fileRes.tempFilePath]
- });
+ uni.$emit('update', fileRes)
+ uni.navigateBack({ delta: 1 });
},
fail: function(err) {
- console.log(err);
uni.showToast({
title: '涓婁紶澶辫触锛氬浘鐗囩敓鎴愯繃绋嬩腑閬囧埌閿欒',
icon: 'none'
@@ -241,19 +246,19 @@
}
};
</script>
-
+
<style lang="scss" scoped>
.settingHeadImage {
background-color: #000000;
overflow: hidden;
-
+
.pre-canvas {
position: fixed;
top: 0;
left: 0;
z-index: 20;
}
-
+
.preImage {
min-width: 100vw;
height: 100vh;
@@ -262,18 +267,19 @@
align-items: center;
overflow: hidden;
z-index: 1;
-
+
.pre-i {
// transition: all 0.1s;
}
}
-
+
.setting-btns {
position: fixed;
bottom: 0;
left: 0;
z-index: 20;
font-size: 14px;
+ width: 100%;
color: #ffffff;
}
}
--
Gitblit v1.9.3