"use strict"; const common_vendor = require("../../../common/vendor.js"); const config = require("../../../config.js"); const store_index = require("../../../store/index.js"); const api_system_user = require("../../../api/system/user.js"); require("../../../store/modules/user.js"); require("../../../utils/storage.js"); require("../../../utils/constant.js"); require("../../../api/login.js"); require("../../../utils/request.js"); require("../../../utils/auth.js"); require("../../../utils/errorCode.js"); require("../../../utils/common.js"); require("../../../store/getters.js"); require("../../../utils/upload.js"); const baseUrl = config.config.baseUrl; let sysInfo = common_vendor.index.getSystemInfoSync(); let SCREEN_WIDTH = sysInfo.screenWidth; let PAGE_X, PAGE_Y; sysInfo.pixelRatio; let T_PAGE_X, T_PAGE_Y, CUT_L, CUT_T, CUT_R, CUT_B, IMG_RATIO, IMG_REAL_W, IMG_REAL_H, DRAFG_MOVE_RATIO = 1, INIT_DRAG_POSITION = 100, DRAW_IMAGE_W = sysInfo.screenWidth; const _sfc_main = { /** * 页面的初始数据 */ data() { return { imageSrc: store_index.store.getters.avatar, isShowImg: false, // 初始化的宽高 cropperInitW: SCREEN_WIDTH, cropperInitH: SCREEN_WIDTH, // 动态的宽高 cropperW: SCREEN_WIDTH, cropperH: SCREEN_WIDTH, // 动态的left top值 cropperL: 0, cropperT: 0, transL: 0, transT: 0, // 图片缩放值 scaleP: 0, imageW: 0, imageH: 0, // 裁剪框 宽高 cutL: 0, cutT: 0, cutB: SCREEN_WIDTH, cutR: "100%", qualityWidth: DRAW_IMAGE_W, innerAspectRadio: DRAFG_MOVE_RATIO }; }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function() { this.loadImage(); }, methods: { setData: function(obj) { let that = this; Object.keys(obj).forEach(function(key) { that.$set(that.$data, key, obj[key]); }); }, getImage: function() { var _this = this; common_vendor.index.chooseImage({ success: function(res) { _this.setData({ imageSrc: res.tempFilePaths[0] }); _this.loadImage(); } }); }, loadImage: function() { var _this = this; common_vendor.index.getImageInfo({ src: _this.imageSrc, success: function success(res) { IMG_RATIO = 1 / 1; if (IMG_RATIO >= 1) { IMG_REAL_W = SCREEN_WIDTH; IMG_REAL_H = SCREEN_WIDTH / IMG_RATIO; } else { IMG_REAL_W = SCREEN_WIDTH * IMG_RATIO; IMG_REAL_H = SCREEN_WIDTH; } let minRange = IMG_REAL_W > IMG_REAL_H ? IMG_REAL_W : IMG_REAL_H; INIT_DRAG_POSITION = minRange > INIT_DRAG_POSITION ? INIT_DRAG_POSITION : minRange; if (IMG_RATIO >= 1) { let cutT = Math.ceil((SCREEN_WIDTH / IMG_RATIO - (SCREEN_WIDTH / IMG_RATIO - INIT_DRAG_POSITION)) / 2); let cutB = cutT; let cutL = Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH + INIT_DRAG_POSITION) / 2); let cutR = cutL; _this.setData({ cropperW: SCREEN_WIDTH, cropperH: SCREEN_WIDTH / IMG_RATIO, // 初始化left right cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2), cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO) / 2), cutL, cutT, cutR, cutB, // 图片缩放值 imageW: IMG_REAL_W, imageH: IMG_REAL_H, scaleP: IMG_REAL_W / SCREEN_WIDTH, qualityWidth: DRAW_IMAGE_W, innerAspectRadio: IMG_RATIO }); } else { let cutL = Math.ceil((SCREEN_WIDTH * IMG_RATIO - SCREEN_WIDTH * IMG_RATIO) / 2); let cutR = cutL; let cutT = Math.ceil((SCREEN_WIDTH - INIT_DRAG_POSITION) / 2); let cutB = cutT; _this.setData({ cropperW: SCREEN_WIDTH * IMG_RATIO, cropperH: SCREEN_WIDTH, // 初始化left right cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO) / 2), cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2), cutL, cutT, cutR, cutB, // 图片缩放值 imageW: IMG_REAL_W, imageH: IMG_REAL_H, scaleP: IMG_REAL_W / SCREEN_WIDTH, qualityWidth: DRAW_IMAGE_W, innerAspectRadio: IMG_RATIO }); } _this.setData({ isShowImg: true }); common_vendor.index.hideLoading(); } }); }, // 拖动时候触发的touchStart事件 contentStartMove(e) { PAGE_X = e.touches[0].pageX; PAGE_Y = e.touches[0].pageY; }, // 拖动时候触发的touchMove事件 contentMoveing(e) { var dragLengthX = (PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO; var dragLengthY = (PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO; if (dragLengthX > 0) { if (this.cutL - dragLengthX < 0) dragLengthX = this.cutL; } else { if (this.cutR + dragLengthX < 0) dragLengthX = -this.cutR; } if (dragLengthY > 0) { if (this.cutT - dragLengthY < 0) dragLengthY = this.cutT; } else { if (this.cutB + dragLengthY < 0) dragLengthY = -this.cutB; } this.setData({ cutL: this.cutL - dragLengthX, cutT: this.cutT - dragLengthY, cutR: this.cutR + dragLengthX, cutB: this.cutB + dragLengthY }); PAGE_X = e.touches[0].pageX; PAGE_Y = e.touches[0].pageY; }, contentTouchEnd() { }, // 获取图片 getImageInfo() { var _this = this; common_vendor.index.showLoading({ title: "图片生成中..." }); const ctx = common_vendor.index.createCanvasContext("myCanvas"); ctx.drawImage(_this.imageSrc, 0, 0, IMG_REAL_W, IMG_REAL_H); ctx.draw(true, () => { var canvasW = (_this.cropperW - _this.cutL - _this.cutR) / _this.cropperW * IMG_REAL_W; var canvasH = (_this.cropperH - _this.cutT - _this.cutB) / _this.cropperH * IMG_REAL_H; var canvasL = _this.cutL / _this.cropperW * IMG_REAL_W; var canvasT = _this.cutT / _this.cropperH * IMG_REAL_H; common_vendor.index.canvasToTempFilePath({ x: canvasL, y: canvasT, width: canvasW, height: canvasH, destWidth: canvasW, destHeight: canvasH, quality: 0.5, canvasId: "myCanvas", success: function(res) { common_vendor.index.hideLoading(); let data = { name: "avatarfile", filePath: res.tempFilePath }; api_system_user.uploadAvatar(data).then((response) => { store_index.store.commit("SET_AVATAR", baseUrl + response.imgUrl); common_vendor.index.showToast({ title: "修改成功", icon: "success" }); common_vendor.index.$emit("refresh"); common_vendor.index.navigateBack(); }); } }); }); }, // 设置大小的时候触发的touchStart事件 dragStart(e) { T_PAGE_X = e.touches[0].pageX; T_PAGE_Y = e.touches[0].pageY; CUT_L = this.cutL; CUT_R = this.cutR; CUT_B = this.cutB; CUT_T = this.cutT; }, // 设置大小的时候触发的touchMove事件 dragMove(e) { var dragType = e.target.dataset.drag; switch (dragType) { case "right": var dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO; if (CUT_R + dragLength < 0) dragLength = -CUT_R; this.setData({ cutR: CUT_R + dragLength }); break; case "left": var dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO; if (CUT_L - dragLength < 0) dragLength = CUT_L; if (CUT_L - dragLength > this.cropperW - this.cutR) dragLength = CUT_L - (this.cropperW - this.cutR); this.setData({ cutL: CUT_L - dragLength }); break; case "top": var dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO; if (CUT_T - dragLength < 0) dragLength = CUT_T; if (CUT_T - dragLength > this.cropperH - this.cutB) dragLength = CUT_T - (this.cropperH - this.cutB); this.setData({ cutT: CUT_T - dragLength }); break; case "bottom": var dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO; if (CUT_B + dragLength < 0) dragLength = -CUT_B; this.setData({ cutB: CUT_B + dragLength }); break; case "rightBottom": var dragLengthX = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO; var dragLengthY = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO; if (CUT_B + dragLengthY < 0) dragLengthY = -CUT_B; if (CUT_R + dragLengthX < 0) dragLengthX = -CUT_R; let cutB = CUT_B + dragLengthY; let cutR = CUT_R + dragLengthX; this.setData({ cutB, cutR }); break; } } } }; function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { return common_vendor.e({ a: $data.isShowImg }, $data.isShowImg ? { b: $data.imageSrc, c: common_vendor.s("width:" + $data.cropperW + "px;height:" + $data.cropperH + "px"), d: common_vendor.o((...args) => $options.dragStart && $options.dragStart(...args)), e: common_vendor.o((...args) => $options.dragMove && $options.dragMove(...args)), f: common_vendor.o((...args) => $options.dragStart && $options.dragStart(...args)), g: common_vendor.o((...args) => $options.dragMove && $options.dragMove(...args)), h: common_vendor.o((...args) => $options.dragStart && $options.dragStart(...args)), i: common_vendor.o((...args) => $options.dragMove && $options.dragMove(...args)), j: common_vendor.o((...args) => $options.dragStart && $options.dragStart(...args)), k: common_vendor.o((...args) => $options.dragMove && $options.dragMove(...args)), l: common_vendor.o((...args) => $options.dragStart && $options.dragStart(...args)), m: common_vendor.o((...args) => $options.dragMove && $options.dragMove(...args)), n: common_vendor.o((...args) => $options.dragStart && $options.dragStart(...args)), o: common_vendor.o((...args) => $options.dragMove && $options.dragMove(...args)), p: common_vendor.o((...args) => $options.dragStart && $options.dragStart(...args)), q: common_vendor.o((...args) => $options.dragMove && $options.dragMove(...args)), r: common_vendor.o((...args) => $options.dragStart && $options.dragStart(...args)), s: common_vendor.o((...args) => $options.dragMove && $options.dragMove(...args)), t: common_vendor.o((...args) => _ctx.dragEnd && _ctx.dragEnd(...args)), v: common_vendor.o((...args) => $options.dragStart && $options.dragStart(...args)), w: common_vendor.o((...args) => $options.dragMove && $options.dragMove(...args)), x: common_vendor.o((...args) => $options.contentStartMove && $options.contentStartMove(...args)), y: common_vendor.o((...args) => $options.contentMoveing && $options.contentMoveing(...args)), z: common_vendor.o((...args) => $options.contentTouchEnd && $options.contentTouchEnd(...args)), A: common_vendor.s("left:" + $data.cutL + "px;top:" + $data.cutT + "px;right:" + $data.cutR + "px;bottom:" + $data.cutB + "px"), B: common_vendor.s("width:" + $data.cropperW + "px;height:" + $data.cropperH + "px;left:" + $data.cropperL + "px;top:" + $data.cropperT + "px"), C: common_vendor.s("width:" + $data.cropperInitW + "px;height:" + $data.cropperInitH + "px;background:#000") } : {}, { D: common_vendor.o((...args) => $options.getImage && $options.getImage(...args)), E: common_vendor.o((...args) => $options.getImageInfo && $options.getImageInfo(...args)), F: common_vendor.s("position:absolute;border: 1px solid red; width:" + $data.imageW + "px;height:" + $data.imageH + "px;top:-9999px;left:-9999px;") }); } const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "C:/Users/Administrator/Desktop/srcaaa/pages_mine/pages/avatar/index.vue"]]); wx.createPage(MiniProgramPage);