From c3ef53d33617672d265ccd3b9d59e89c805e3be8 Mon Sep 17 00:00:00 2001 From: haomingming Date: Thu, 11 May 2023 11:13:50 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=B4=E5=83=8F=E4=B8=8A=E4=BC=A0=E8=A3=81?= =?UTF-8?q?=E5=89=AA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Pages/yishi/case/index.js | 21 +- Pages/yishi/case/index.wxml | 9 +- Pages/yishi/kuaisusetup/index.js | 3 + Pages/yishi/onlinesetup/index.js | 3 + Pages/yishi/onlinesetupprice/index.js | 3 + Pages/yishi/practicing/index.js | 24 +- Pages/yishi/practicing/index.json | 3 +- Pages/yishi/practicing/index.wxml | 21 +- Pages/yishi/yizhensetup/index.js | 7 +- Pages/yishi/yizhensetupprice/index.js | 6 + .../TUIChat/components/MessageList/index.js | 19 +- commpents/image-cropper/image-cropper.js | 1142 +++++++++++++++++ commpents/image-cropper/image-cropper.json | 3 + commpents/image-cropper/image-cropper.wxml | 32 + commpents/image-cropper/image-cropper.wxss | 144 +++ commpents/myprofile/index.js | 42 +- commpents/myprofile/index.json | 3 +- commpents/myprofile/index.wxml | 4 +- 18 files changed, 1429 insertions(+), 60 deletions(-) create mode 100644 commpents/image-cropper/image-cropper.js create mode 100644 commpents/image-cropper/image-cropper.json create mode 100644 commpents/image-cropper/image-cropper.wxml create mode 100644 commpents/image-cropper/image-cropper.wxss diff --git a/Pages/yishi/case/index.js b/Pages/yishi/case/index.js index da1e13b..6ba2470 100644 --- a/Pages/yishi/case/index.js +++ b/Pages/yishi/case/index.js @@ -13,18 +13,11 @@ Page({ imglist: [] }, onLoad(options){ + console.log("onLoad", options) this.setData({ order_inquiry_id: options.order_inquiry_id }) - //获取患者问诊病例 - api.getDoctorInquiryCase({order_inquiry_id: this.data.order_inquiry_id}).then(response => { - console.log(response); - this.setData({ - case_detail: response.data - }) - }).then(res => { - this.formatImgList(); - }).catch(errors => {console.error(errors);}) + }, formatImgList(){ let diagnose_images = this.data.case_detail.diagnose_images; @@ -40,7 +33,15 @@ Page({ }) }, onShow(){ - + //获取患者问诊病例 + api.getDoctorInquiryCase({order_inquiry_id: this.data.order_inquiry_id}).then(response => { + console.log(response); + this.setData({ + case_detail: response.data + }) + }).then(res => { + this.formatImgList(); + }).catch(errors => {console.error(errors);}) }, }) \ No newline at end of file diff --git a/Pages/yishi/case/index.wxml b/Pages/yishi/case/index.wxml index 32c5296..b6baa97 100644 --- a/Pages/yishi/case/index.wxml +++ b/Pages/yishi/case/index.wxml @@ -8,7 +8,7 @@ {{case_detail.sex==1?'男':case_detail.sex==2?'女':'未知'}}｜{{case_detail.age}}岁 - 身高：{{case_detail.height==null?'未知':case_detail.height}}cm + 身高：{{case_detail.height==null?'未知':case_detail.height}}CM 体重：{{case_detail.weight==null?'未知':case_detail.weight}}KG 民族：{{case_detail.nation_name==''?'未知':case_detail.nation_name}} 职业：{{case_detail.job_name==''?'未知':case_detail.job_name}} @@ -58,8 +58,9 @@ - 其他信息 - + + 其他信息 + 过敏史： @@ -89,7 +90,7 @@ 接触化学物： {{case_detail.chemical_compound_status==1?'从不':case_detail.chemical_compound_status==2?'偶尔':case_detail.chemical_compound_status==3?'经常':case_detail.chemical_compound_status==4?'每天':'其他'}} - + 详细描述:{{case_detail.chemical_compound_describe}} diff --git a/Pages/yishi/kuaisusetup/index.js b/Pages/yishi/kuaisusetup/index.js index 787faa7..9a99ec9 100644 --- a/Pages/yishi/kuaisusetup/index.js +++ b/Pages/yishi/kuaisusetup/index.js @@ -66,6 +66,9 @@ Page({ console.log("onChange: ", detail); if(detail){ this.setData({ note: this.data.open_note }); + wx.vibrateShort({ + "type": "heavy" + }) }else{ this.setData({ note: this.data.close_note }); } diff --git a/Pages/yishi/onlinesetup/index.js b/Pages/yishi/onlinesetup/index.js index d8a1200..e499860 100644 --- a/Pages/yishi/onlinesetup/index.js +++ b/Pages/yishi/onlinesetup/index.js @@ -61,6 +61,9 @@ Page({ let check = this.checkPrice(inquiry_price); if(!check) return; this.setData({ note: this.data.open_note }); + wx.vibrateShort({ + "type": "heavy" + }) }else{ this.setData({ note: this.data.close_note }); } diff --git a/Pages/yishi/onlinesetupprice/index.js b/Pages/yishi/onlinesetupprice/index.js index 8ac15d0..5918caa 100644 --- a/Pages/yishi/onlinesetupprice/index.js +++ b/Pages/yishi/onlinesetupprice/index.js @@ -47,6 +47,9 @@ Page({ }, onStepperChange(event) { console.log(event.detail); + wx.vibrateShort({ + "type": "heavy" + }) this.setData({ "info.work_num_day": event.detail }); diff --git a/Pages/yishi/practicing/index.js b/Pages/yishi/practicing/index.js index 7604a9a..14b694c 100644 --- a/Pages/yishi/practicing/index.js +++ b/Pages/yishi/practicing/index.js @@ -12,7 +12,6 @@ Page({ license_cert: [], qualification_cert: [], work_cert: [], - license_cert_visible: false }, onLoad(){ api.getDoctorCret().then(response => { @@ -24,20 +23,13 @@ Page({ }) }).catch(errors => {console.error(errors);}) }, - show_license_cert(){ - console.log("show_license_cert") - this.setData({ - license_cert_visible: true + previewImage(e){ + let name = e.currentTarget.dataset.name; + let name_date = this.data[name] + + wx.previewImage({ + current: name_date[0], // 当前显示图片的http链接 + urls: name_date // 需要预览的图片http链接列表 }) - }, - close_license_cert(e) { - const { - detail: { trigger }, - } = e; - console.log("trigger: ", trigger); - console.log("close_license_cert") - this.setData({ - license_cert_visible: false, - }); - }, + } }) \ No newline at end of file diff --git a/Pages/yishi/practicing/index.json b/Pages/yishi/practicing/index.json index 8eeb365..ee34b87 100644 --- a/Pages/yishi/practicing/index.json +++ b/Pages/yishi/practicing/index.json @@ -2,7 +2,6 @@ "component": true, "usingComponents": { "te-nav-bar": "/commpents/te_navbar", - "t-image": "tdesign-miniprogram/image/image", - "t-image-viewer": "tdesign-miniprogram/image-viewer/image-viewer" + "t-image": "tdesign-miniprogram/image/image" } } \ No newline at end of file diff --git a/Pages/yishi/practicing/index.wxml b/Pages/yishi/practicing/index.wxml index 0babe0c..cb612c2 100644 --- a/Pages/yishi/practicing/index.wxml +++ b/Pages/yishi/practicing/index.wxml @@ -12,7 +12,8 @@ style="margin: 0 50rpx 0 20rpx;" width="220rpx" height="220rpx" aria-label="img" wx:for="{{license_cert}}" - bindtap="show_license_cert" /> + data-name="license_cert" + bindtap="previewImage" /> @@ -25,7 +26,9 @@ mode="heightFix" style="margin: 0 50rpx 0 20rpx;" width="220rpx" height="220rpx" - aria-label="img" wx:for="{{qualification_cert}}" /> + aria-label="img" wx:for="{{qualification_cert}}" + data-name="qualification_cert" + bindtap="previewImage"/> @@ -37,18 +40,10 @@ mode="heightFix" style="margin: 0 50rpx 20rpx 20rpx;" width="220rpx" height="220rpx" - aria-label="img" wx:for="{{work_cert}}" /> + aria-label="img" wx:for="{{work_cert}}" + data-name="work_cert" + bindtap="previewImage"/> - - - \ No newline at end of file diff --git a/Pages/yishi/yizhensetup/index.js b/Pages/yishi/yizhensetup/index.js index 900c5dd..bdbd30b 100644 --- a/Pages/yishi/yizhensetup/index.js +++ b/Pages/yishi/yizhensetup/index.js @@ -88,7 +88,11 @@ Page({ onChange({ detail }) { console.log("onChange: ", detail); - + if(detail){ + wx.vibrateShort({ + "type": "heavy" + }) + } //修改开关 let params = {}; params.inquiry_type = this.data.inquiry_type;//接诊类型（1:专家问诊 2:快速问诊 3:公益问诊 4:问诊购药） @@ -98,7 +102,6 @@ Page({ console.log(response); }).then(()=>{ if(detail){ - let tmplIds = ['G1RIs0RYqsTQ2CuPQWalIMyb6_deuEEbJfajfhGvNzc'] let sub_promise = requestSubscribeMessage(tmplIds) sub_promise.then(res => { diff --git a/Pages/yishi/yizhensetupprice/index.js b/Pages/yishi/yizhensetupprice/index.js index d928480..4af69e5 100644 --- a/Pages/yishi/yizhensetupprice/index.js +++ b/Pages/yishi/yizhensetupprice/index.js @@ -150,6 +150,9 @@ Page({ }, onStepperChange(event) { console.log(event.detail); + wx.vibrateShort({ + "type": "heavy" + }) this.setData({ "info.work_num_day": event.detail }); @@ -160,6 +163,9 @@ Page({ }, onColumnChange(e) { + wx.vibrateShort({ + "type": "heavy" + }) console.log('picker pick:', e); }, diff --git a/TUIKit/components/TUIChat/components/MessageList/index.js b/TUIKit/components/TUIChat/components/MessageList/index.js index a37c222..ab737e8 100644 --- a/TUIKit/components/TUIChat/components/MessageList/index.js +++ b/TUIKit/components/TUIChat/components/MessageList/index.js @@ -525,23 +525,26 @@ Component({ }, // 获取消息ID handleLongPress(e) { - for (let index = 0; index < this.data.messageList.length; index++) { + // for (let index = 0; index < this.data.messageList.length; index++) { - if (this.data.messageList[index].status === 'success') { + // if (this.data.messageList[index].status === 'success') { const { index } = e.currentTarget.dataset; - let message = this.data.messageList[index]; + // let message = this.data.messageList[index]; // console.log(message) - if(message.type === 'TIMCustomElem'){ - return - } + // if(message.type === 'TIMCustomElem'){ + // return + // } this.setData({ messageID: e.currentTarget.id, selectedMessage: this.data.messageList[index], Show: true, }); - } - } + wx.vibrateShort({ + "type": "heavy" + }) + // } + // } }, // 更新 messagelist updateMessageByID(deleteMessageID) { diff --git a/commpents/image-cropper/image-cropper.js b/commpents/image-cropper/image-cropper.js new file mode 100644 index 0000000..50a2f62 --- /dev/null +++ b/commpents/image-cropper/image-cropper.js @@ -0,0 +1,1142 @@ +Component({ + properties: { + /** + * 图片路径 + */ + 'imgSrc': { + type: String + }, + /** + * 裁剪框高度 + */ + 'height': { + type: Number, + value: 200 + }, + /** + * 裁剪框宽度 + */ + 'width': { + type: Number, + value: 200 + }, + /** + * 裁剪框最小尺寸 + */ + 'min_width': { + type: Number, + value: 100 + }, + 'min_height': { + type: Number, + value: 100 + }, + /** + * 裁剪框最大尺寸 + */ + 'max_width': { + type: Number, + value: 300 + }, + 'max_height': { + type: Number, + value: 300 + }, + /** + * 裁剪框禁止拖动 + */ + 'disable_width': { + type: Boolean, + value: false + }, + 'disable_height': { + type: Boolean, + value: false + }, + /** + * 锁定裁剪框比例 + */ + 'disable_ratio':{ + type: Boolean, + value: false + }, + /** + * 生成的图片尺寸相对剪裁框的比例 + */ + 'export_scale': { + type: Number, + value: 3 + }, + /** + * 生成的图片质量0-1 + */ + 'quality': { + type: Number, + value: 1 + }, + 'cut_top': { + type: Number, + value: null + }, + 'cut_left': { + type: Number, + value: null + }, + /** + * canvas上边距（不设置默认不显示） + */ + 'canvas_top': { + type: Number, + value: null + }, + /** + * canvas左边距（不设置默认不显示） + */ + 'canvas_left': { + type: Number, + value: null + }, + /** + * 图片宽度 + */ + 'img_width': { + type: null, + value: null + }, + /** + * 图片高度 + */ + 'img_height': { + type: null, + value: null + }, + /** + * 图片缩放比 + */ + 'scale': { + type: Number, + value: 1 + }, + /** + * 图片旋转角度 + */ + 'angle': { + type: Number, + value: 0 + }, + /** + * 最小缩放比 + */ + 'min_scale': { + type: Number, + value: 0.5 + }, + /** + * 最大缩放比 + */ + 'max_scale': { + type: Number, + value: 2 + }, + /** + * 是否禁用旋转 + */ + 'disable_rotate': { + type: Boolean, + value: false + }, + /** + * 是否限制移动范围(剪裁框只能在图片内) + */ + 'limit_move':{ + type: Boolean, + value: false + }, + show_cropper: { + type: Boolean, + value: false, + observer(newVal) { + this.setData({ + show_cropper: newVal + }) + }, + } + }, + data: { + el: 'image-cropper', //暂时无用 + show_cropper: false, + info: wx.getSystemInfoSync(), + MOVE_THROTTLE:null,//触摸移动节流settimeout + MOVE_THROTTLE_FLAG: true,//节流标识 + INIT_IMGWIDTH: 0, //图片设置尺寸,此值不变（记录最初设定的尺寸） + INIT_IMGHEIGHT: 0, //图片设置尺寸,此值不变（记录最初设定的尺寸） + TIME_BG: null,//背景变暗延时函数 + TIME_CUT_CENTER:null, + _touch_img_relative: [{ + x: 0, + y: 0 + }], //鼠标和图片中心的相对位置 + _flag_cut_touch:false,//是否是拖动裁剪框 + _hypotenuse_length: 0, //双指触摸时斜边长度 + _flag_img_endtouch: false, //是否结束触摸 + _flag_bright: true, //背景是否亮 + _canvas_overflow:true,//canvas缩略图是否在屏幕外面 + _canvas_width:200, + _canvas_height:200, + origin_x: 0.5, //图片旋转中心 + origin_y: 0.5, //图片旋转中心 + _cut_animation: false,//是否开启图片和裁剪框过渡 + _img_top: wx.getSystemInfoSync().windowHeight / 2, //图片上边距 + _img_left: wx.getSystemInfoSync().windowWidth / 2, //图片左边距 + watch: { + //监听截取框宽高变化 + width(value, that) { + if (value < that.data.min_width){ + that.setData({ + width: that.data.min_width + }); + } + that._computeCutSize(); + }, + height(value, that) { + if (value < that.data.min_height) { + that.setData({ + height: that.data.min_height + }); + } + that._computeCutSize(); + }, + angle(value, that){ + //停止居中裁剪框，继续修改图片位置 + that._moveStop(); + if(that.data.limit_move){ + if (that.data.angle % 90) { + that.setData({ + angle: Math.round(that.data.angle / 90) * 90 + }); + return; + } + } + }, + _cut_animation(value, that){ + //开启过渡300毫秒之后自动关闭 + clearTimeout(that.data._cut_animation_time); + if (value){ + that.data._cut_animation_time = setTimeout(()=>{ + that.setData({ + _cut_animation:false + }); + },300) + } + }, + limit_move(value, that){ + if (value) { + if (that.data.angle%90){ + that.setData({ + angle: Math.round(that.data.angle / 90)*90 + }); + } + that._imgMarginDetectionScale(); + !that.data._canvas_overflow && that._draw(); + } + }, + canvas_top(value, that){ + that._canvasDetectionPosition(); + }, + canvas_left(value, that){ + that._canvasDetectionPosition(); + }, + imgSrc(value, that){ + that.pushImg(); + }, + cut_top(value, that) { + that._cutDetectionPosition(); + if (that.data.limit_move) { + !that.data._canvas_overflow && that._draw(); + } + }, + cut_left(value, that) { + that._cutDetectionPosition(); + if (that.data.limit_move) { + !that.data._canvas_overflow && that._draw(); + } + } + } + }, + options: { + styleIsolation: 'isolated' + }, + attached() { + this.data.info = wx.getSystemInfoSync(); + //启用数据监听 + this._watcher(); + this.data.INIT_IMGWIDTH = this.data.img_width; + this.data.INIT_IMGHEIGHT = this.data.img_height; + this.setData({ + _canvas_height: this.data.height, + _canvas_width: this.data.width, + }); + this._initCanvas(); + this.data.imgSrc && (this.data.imgSrc = this.data.imgSrc); + //根据开发者设置的图片目标尺寸计算实际尺寸 + this._initImageSize(); + //设置裁剪框大小>设置图片尺寸>绘制canvas + this._computeCutSize(); + //检查裁剪框是否在范围内 + this._cutDetectionPosition(); + //检查canvas是否在范围内 + this._canvasDetectionPosition(); + //初始化完成 + this.triggerEvent('load', { + cropper: this + }); + }, + methods: { + /** + * 上传图片 + */ + upload() { + let that = this; + wx.chooseImage({ + count: 1, + sizeType: ['original', 'compressed'], + sourceType: ['album', 'camera'], + success(res) { + const tempFilePaths = res.tempFilePaths[0]; + that.pushImg(tempFilePaths); + wx.showLoading({ + title: '加载中...' + }) + } + }) + }, + /** + * 返回图片信息 + */ + getImg(getCallback) { + this._draw(()=>{ + wx.canvasToTempFilePath({ + width: this.data.width * this.data.export_scale, + height: Math.round(this.data.height * this.data.export_scale), + destWidth: this.data.width * this.data.export_scale, + destHeight: Math.round(this.data.height) * this.data.export_scale, + fileType: 'png', + quality: this.data.quality, + canvasId: this.data.el, + success: (res) => { + getCallback({ + url: res.tempFilePath, + width: this.data.width * this.data.export_scale, + height: this.data.height * this.data.export_scale + }); + } + }, this) + }); + }, + /** + * 设置图片动画 + * { + * x:10,//图片在原有基础上向下移动10px + * y:10,//图片在原有基础上向右移动10px + * angle:10,//图片在原有基础上旋转10deg + * scale:0.5,//图片在原有基础上增加0.5倍 + * } + */ + setTransform(transform) { + if (!transform) return; + if (!this.data.disable_rotate){ + this.setData({ + angle: transform.angle ? this.data.angle + transform.angle : this.data.angle + }); + } + var scale = this.data.scale; + if (transform.scale) { + scale = this.data.scale + transform.scale; + scale = scale <= this.data.min_scale ? this.data.min_scale : scale; + scale = scale >= this.data.max_scale ? this.data.max_scale : scale; + } + this.data.scale = scale; + let cutX = this.data.cut_left; + let cutY = this.data.cut_top; + if (transform.cutX){ + this.setData({ + cut_left: cutX + transform.cutX + }); + this.data.watch.cut_left(null, this); + } + if (transform.cutY){ + this.setData({ + cut_top: cutY + transform.cutY + }); + this.data.watch.cut_top(null, this); + } + this.data._img_top = transform.y ? this.data._img_top + transform.y : this.data._img_top; + this.data._img_left = transform.x ? this.data._img_left + transform.x : this.data._img_left; + //图像边缘检测,防止截取到空白 + this._imgMarginDetectionScale(); + //停止居中裁剪框，继续修改图片位置 + this._moveDuring(); + this.setData({ + scale: this.data.scale, + _img_top: this.data._img_top, + _img_left: this.data._img_left + }); + !this.data._canvas_overflow && this._draw(); + //可以居中裁剪框了 + this._moveStop();//结束操作 + }, + /** + * 设置剪裁框位置 + */ + setCutXY(x,y){ + this.setData({ + cut_top: y, + cut_left:x + }); + }, + /** + * 设置剪裁框尺寸 + */ + setCutSize(w,h){ + this.setData({ + width: w, + height:h + }); + this._computeCutSize(); + }, + /** + * 设置剪裁框和图片居中 + */ + setCutCenter() { + let cut_top = (this.data.info.windowHeight - this.data.height) * 0.5; + let cut_left = (this.data.info.windowWidth - this.data.width) * 0.5; + console.log(cut_top, "-" ,cut_left ) + //顺序不能变 + this.setData({ + _img_top: this.data._img_top - this.data.cut_top + cut_top, + cut_top: cut_top, //截取的框上边距 + _img_left: this.data._img_left - this.data.cut_left + cut_left, + cut_left: cut_left, //截取的框左边距 + }); + }, + _setCutCenter(){ + let cut_top = (this.data.info.windowHeight - this.data.height) * 0.5; + let cut_left = (this.data.info.windowWidth - this.data.width) * 0.5; + console.log(cut_top, "-" ,cut_left ) + this.setData({ + cut_top: cut_top, //截取的框上边距 + cut_left: cut_left, //截取的框左边距 + }); + }, + /** + * 设置剪裁框宽度-即将废弃 + */ + setWidth(width) { + this.setData({ + width: width + }); + this._computeCutSize(); + }, + /** + * 设置剪裁框高度-即将废弃 + */ + setHeight(height) { + this.setData({ + height: height + }); + this._computeCutSize(); + }, + /** + * 是否锁定旋转 + */ + setDisableRotate(value){ + this.data.disable_rotate = value; + }, + /** + * 是否限制移动 + */ + setLimitMove(value){ + this.setData({ + _cut_animation: true, + limit_move: !!value + }); + }, + /** + * 初始化图片，包括位置、大小、旋转角度 + */ + imgReset() { + this.setData({ + scale: 1, + angle: 0, + _img_top: wx.getSystemInfoSync().windowHeight / 2, + _img_left: wx.getSystemInfoSync().windowWidth / 2, + }) + // console.log(wx.getSystemInfoSync().windowHeight / 2, "-", wx.getSystemInfoSync().windowWidth / 2,) + }, + /** + * 加载（更换）图片 + */ + pushImg(src) { + if (src) { + this.setData({ + imgSrc: src + }); + //发现是手动赋值直接返回，交给watch处理 + return; + } + + // getImageInfo接口传入 src: '' 会导致内存泄漏 + + if (!this.data.imgSrc) return; + wx.getImageInfo({ + src: this.data.imgSrc, + success: (res) => { + this.data.imageObject = res; + //图片非本地路径需要换成本地路径 + if (this.data.imgSrc.search(/tmp/) == -1){ + this.setData({ + imgSrc: res.path + }); + } + //计算最后图片尺寸 + this._imgComputeSize(); + if (this.data.limit_move) { + //限制移动，不留空白处理 + this._imgMarginDetectionScale(); + } + this._draw(); + }, + fail: (err) => { + this.setData({ + imgSrc: '' + }); + } + }); + }, + imageLoad(e){ + setTimeout(()=>{ + this.triggerEvent('imageload', this.data.imageObject); + + },1000) + }, + /** + * 设置图片放大缩小 + */ + setScale(scale) { + if (!scale) return; + this.setData({ + scale: scale + }); + !this.data._canvas_overflow && this._draw(); + }, + /** + * 设置图片旋转角度 + */ + setAngle(angle) { + if (!angle) return; + this.setData({ + _cut_animation: true, + angle: angle + }); + this._imgMarginDetectionScale(); + !this.data._canvas_overflow && this._draw(); + }, + _initCanvas() { + //初始化canvas + if (!this.data.ctx){ + this.data.ctx = wx.createCanvasContext("image-cropper", this); + } + }, + /** + * 根据开发者设置的图片目标尺寸计算实际尺寸 + */ + _initImageSize(){ + //处理宽高特殊单位 %>px + if (this.data.INIT_IMGWIDTH && typeof this.data.INIT_IMGWIDTH == "string" && this.data.INIT_IMGWIDTH.indexOf("%") != -1) { + let width = this.data.INIT_IMGWIDTH.replace("%", ""); + this.data.INIT_IMGWIDTH = this.data.img_width = this.data.info.windowWidth / 100 * width; + } + if (this.data.INIT_IMGHEIGHT && typeof this.data.INIT_IMGHEIGHT == "string" && this.data.INIT_IMGHEIGHT.indexOf("%") != -1) { + let height = this.data.img_height.replace("%", ""); + this.data.INIT_IMGHEIGHT = this.data.img_height = this.data.info.windowHeight / 100 * height; + } + }, + /** + * 检测剪裁框位置是否在允许的范围内(屏幕内) + */ + _cutDetectionPosition(){ + let _cutDetectionPositionTop = () => { + //检测上边距是否在范围内 + if (this.data.cut_top < 0) { + this.setData({ + cut_top: 0 + }); + } + if (this.data.cut_top > this.data.info.windowHeight - this.data.height) { + this.setData({ + cut_top: this.data.info.windowHeight - this.data.height + }); + } + }, _cutDetectionPositionLeft = () => { + //检测左边距是否在范围内 + if (this.data.cut_left < 0) { + this.setData({ + cut_left: 0 + }); + } + if (this.data.cut_left > this.data.info.windowWidth - this.data.width) { + this.setData({ + cut_left: this.data.info.windowWidth - this.data.width + }); + } + }; + //裁剪框坐标处理（如果只写一个参数则另一个默认为0，都不写默认居中） + if (this.data.cut_top == null && this.data.cut_left == null) { + this._setCutCenter(); + } else if (this.data.cut_top != null && this.data.cut_left != null){ + _cutDetectionPositionTop(); + _cutDetectionPositionLeft(); + } else if (this.data.cut_top != null && this.data.cut_left == null) { + _cutDetectionPositionTop(); + this.setData({ + cut_left: (this.data.info.windowWidth - this.data.width) / 2 + }); + } else if (this.data.cut_top == null && this.data.cut_left != null) { + _cutDetectionPositionLeft(); + this.setData({ + cut_top: (this.data.info.windowHeight - this.data.height) / 2 + }); + } + }, + /** + * 检测canvas位置是否在允许的范围内(屏幕内)如果在屏幕外则不开启实时渲染 + * 如果只写一个参数则另一个默认为0，都不写默认超出屏幕外 + */ + _canvasDetectionPosition(){ + if(this.data.canvas_top == null && this.data.canvas_left == null) { + this.data._canvas_overflow = false; + this.setData({ + canvas_top: -5000, + canvas_left: -5000 + }); + }else if(this.data.canvas_top != null && this.data.canvas_left != null) { + if (this.data.canvas_top < - this.data.height || this.data.canvas_top > this.data.info.windowHeight) { + this.data._canvas_overflow = true; + } else { + this.data._canvas_overflow = false; + } + }else if(this.data.canvas_top != null && this.data.canvas_left == null) { + this.setData({ + canvas_left: 0 + }); + } else if (this.data.canvas_top == null && this.data.canvas_left != null) { + this.setData({ + canvas_top: 0 + }); + if (this.data.canvas_left < -this.data.width || this.data.canvas_left > this.data.info.windowWidth) { + this.data._canvas_overflow = true; + } else { + this.data._canvas_overflow = false; + } + } + }, + /** + * 图片边缘检测-位置 + */ + _imgMarginDetectionPosition(scale) { + if (!this.data.limit_move) return; + let left = this.data._img_left; + let top = this.data._img_top; + var scale = scale || this.data.scale; + let img_width = this.data.img_width; + let img_height = this.data.img_height; + if (this.data.angle / 90 % 2) { + img_width = this.data.img_height; + img_height = this.data.img_width; + } + left = this.data.cut_left + img_width * scale / 2 >= left ? left : this.data.cut_left + img_width * scale / 2; + left = this.data.cut_left + this.data.width - img_width * scale / 2 <= left ? left : this.data.cut_left + this.data.width - img_width * scale / 2; + top = this.data.cut_top + img_height * scale / 2 >= top ? top : this.data.cut_top + img_height * scale / 2; + top = this.data.cut_top + this.data.height - img_height * scale / 2 <= top ? top : this.data.cut_top + this.data.height - img_height * scale / 2; + this.setData({ + _img_left: left, + _img_top: top, + scale: scale + }) + }, + /** + * 图片边缘检测-缩放 + */ + _imgMarginDetectionScale(){ + if (!this.data.limit_move)return; + let scale = this.data.scale; + let img_width = this.data.img_width; + let img_height = this.data.img_height; + if (this.data.angle / 90 % 2) { + img_width = this.data.img_height; + img_height = this.data.img_width; + } + if (img_width * scale < this.data.width){ + scale = this.data.width / img_width; + } + if (img_height * scale < this.data.height) { + scale = Math.max(scale,this.data.height / img_height); + } + this._imgMarginDetectionPosition(scale); + }, + _setData(obj) { + let data = {}; + for (var key in obj) { + if (this.data[key] != obj[key]){ + data[key] = obj[key]; + } + } + this.setData(data); + return data; + }, + /** + * 计算图片尺寸 + */ + _imgComputeSize() { + let img_width = this.data.img_width, + img_height = this.data.img_height; + if (!this.data.INIT_IMGHEIGHT && !this.data.INIT_IMGWIDTH) { + //默认按图片最小边 = 对应裁剪框尺寸 + img_width = this.data.imageObject.width; + img_height = this.data.imageObject.height; + if (img_width / img_height > this.data.width / this.data.height){ + img_height = this.data.height; + img_width = this.data.imageObject.width / this.data.imageObject.height * img_height; + }else{ + img_width = this.data.width; + img_height = this.data.imageObject.height / this.data.imageObject.width * img_width; + } + } else if (this.data.INIT_IMGHEIGHT && !this.data.INIT_IMGWIDTH) { + img_width = this.data.imageObject.width / this.data.imageObject.height * this.data.INIT_IMGHEIGHT; + } else if (!this.data.INIT_IMGHEIGHT && this.data.INIT_IMGWIDTH) { + img_height = this.data.imageObject.height / this.data.imageObject.width * this.data.INIT_IMGWIDTH; + } + this.setData({ + img_width: img_width, + img_height: img_height + }); + }, + //改变截取框大小 + _computeCutSize() { + if (this.data.width > this.data.info.windowWidth) { + this.setData({ + width: this.data.info.windowWidth, + }); + } else if (this.data.width + this.data.cut_left > this.data.info.windowWidth){ + this.setData({ + cut_left: this.data.info.windowWidth - this.data.cut_left, + }); + }; + if (this.data.height > this.data.info.windowHeight) { + this.setData({ + height: this.data.info.windowHeight, + }); + } else if (this.data.height + this.data.cut_top > this.data.info.windowHeight){ + this.setData({ + cut_top: this.data.info.windowHeight - this.data.cut_top, + }); + } + !this.data._canvas_overflow && this._draw(); + }, + //开始触摸 + _start(event) { + this.data._flag_img_endtouch = false; + if (event.touches.length == 1) { + //单指拖动 + this.data._touch_img_relative[0] = { + x: (event.touches[0].clientX - this.data._img_left), + y: (event.touches[0].clientY - this.data._img_top) + } + } else { + //双指放大 + let width = Math.abs(event.touches[0].clientX - event.touches[1].clientX); + let height = Math.abs(event.touches[0].clientY - event.touches[1].clientY); + this.data._touch_img_relative = [{ + x: (event.touches[0].clientX - this.data._img_left), + y: (event.touches[0].clientY - this.data._img_top) + }, { + x: (event.touches[1].clientX - this.data._img_left), + y: (event.touches[1].clientY - this.data._img_top) + }]; + this.data._hypotenuse_length = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)); + } + !this.data._canvas_overflow && this._draw(); + }, + _move_throttle(){ + //安卓需要节流 + if (this.data.info.platform =='android'){ + clearTimeout(this.data.MOVE_THROTTLE); + this.data.MOVE_THROTTLE = setTimeout(() => { + this.data.MOVE_THROTTLE_FLAG = true; + }, 1000 / 40) + return this.data.MOVE_THROTTLE_FLAG; + }else{ + this.data.MOVE_THROTTLE_FLAG = true; + } + }, + _move(event) { + if (this.data._flag_img_endtouch || !this.data.MOVE_THROTTLE_FLAG) return; + this.data.MOVE_THROTTLE_FLAG = false; + this._move_throttle(); + this._moveDuring(); + if (event.touches.length == 1) { + //单指拖动 + let left = (event.touches[0].clientX - this.data._touch_img_relative[0].x), + top = (event.touches[0].clientY - this.data._touch_img_relative[0].y); + //图像边缘检测,防止截取到空白 + this.data._img_left = left; + this.data._img_top = top; + this._imgMarginDetectionPosition(); + this.setData({ + _img_left: this.data._img_left, + _img_top: this.data._img_top + }); + } else { + //双指放大 + let width = (Math.abs(event.touches[0].clientX - event.touches[1].clientX)), + height = (Math.abs(event.touches[0].clientY - event.touches[1].clientY)), + hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)), + scale = this.data.scale * (hypotenuse / this.data._hypotenuse_length), + current_deg = 0; + scale = scale <= this.data.min_scale ? this.data.min_scale : scale; + scale = scale >= this.data.max_scale ? this.data.max_scale : scale; + //图像边缘检测,防止截取到空白 + this.data.scale = scale; + this._imgMarginDetectionScale(); + //双指旋转(如果没禁用旋转) + let _touch_img_relative = [{ + x: (event.touches[0].clientX - this.data._img_left), + y: (event.touches[0].clientY - this.data._img_top) + }, { + x: (event.touches[1].clientX - this.data._img_left), + y: (event.touches[1].clientY - this.data._img_top) + }]; + if (!this.data.disable_rotate){ + let first_atan = 180 / Math.PI * Math.atan2(_touch_img_relative[0].y, _touch_img_relative[0].x); + let first_atan_old = 180 / Math.PI * Math.atan2(this.data._touch_img_relative[0].y, this.data._touch_img_relative[0].x); + let second_atan = 180 / Math.PI * Math.atan2(_touch_img_relative[1].y, _touch_img_relative[1].x); + let second_atan_old = 180 / Math.PI * Math.atan2(this.data._touch_img_relative[1].y, this.data._touch_img_relative[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.data._touch_img_relative = _touch_img_relative; + this.data._hypotenuse_length = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)); + //更新视图 + this.setData({ + angle: this.data.angle + current_deg, + scale: this.data.scale + }); + } + !this.data._canvas_overflow && this._draw(); + }, + //结束操作 + _end(event) { + this.data._flag_img_endtouch = true; + this._moveStop(); + }, + //点击中间剪裁框处理 + _click(event) { + if (!this.data.imgSrc) { + //调起上传 + this.upload(); + return; + } + this._draw(()=>{ + let x = event.detail ? event.detail.x : event.touches[0].clientX; + let y = event.detail ? event.detail.y : event.touches[0].clientY; + // if ((x >= this.data.cut_left && x <= (this.data.cut_left + this.data.width)) && (y >= this.data.cut_top && y <= (this.data.cut_top + this.data.height))) { + //生成图片并回调 + wx.canvasToTempFilePath({ + width: this.data.width * this.data.export_scale, + height: Math.round(this.data.height * this.data.export_scale), + destWidth: this.data.width * this.data.export_scale, + destHeight: Math.round(this.data.height) * this.data.export_scale, + fileType: 'png', + quality: this.data.quality, + canvasId: this.data.el, + success: (res) => { + this.triggerEvent('tapcut', { + url: res.tempFilePath, + width: this.data.width * this.data.export_scale, + height: this.data.height * this.data.export_scale + }); + } + }, this) + // } + }); + }, + //渲染 + _draw(callback) { + console.log("_draw") + if (!this.data.imgSrc) return; + let draw = () => { + //图片实际大小 + let img_width = this.data.img_width * this.data.scale * this.data.export_scale; + let img_height = this.data.img_height * this.data.scale * this.data.export_scale; + //canvas和图片的相对距离 + var xpos = this.data._img_left - this.data.cut_left; + var ypos = this.data._img_top - this.data.cut_top; + //旋转画布 + this.data.ctx.translate(xpos * this.data.export_scale, ypos * this.data.export_scale); + this.data.ctx.rotate(this.data.angle * Math.PI / 180); + this.data.ctx.drawImage(this.data.imgSrc, -img_width / 2, -img_height / 2, img_width, img_height); + this.data.ctx.draw(false, () => { + callback && callback(); + }); + } + if (this.data.ctx.width != this.data.width || this.data.ctx.height != this.data.height){ + //优化拖动裁剪框，所以必须把宽高设置放在离用户触发渲染最近的地方 + this.setData({ + _canvas_height: this.data.height, + _canvas_width: this.data.width, + },()=>{ + //延迟40毫秒防止点击过快出现拉伸或裁剪过多 + setTimeout(() => { + draw(); + }, 40); + }); + }else{ + draw(); + } + }, + //裁剪框处理 + _cutTouchMove(e) { + if (this.data._flag_cut_touch && this.data.MOVE_THROTTLE_FLAG) { + if (this.data.disable_ratio && (this.data.disable_width || this.data.disable_height)) return; + //节流 + this.data.MOVE_THROTTLE_FLAG = false; + this._move_throttle(); + let width = this.data.width, + height = this.data.height, + cut_top = this.data.cut_top, + cut_left = this.data.cut_left, + size_correct = () => { + width = width <= this.data.max_width ? width >= this.data.min_width ? width : this.data.min_width : this.data.max_width; + height = height <= this.data.max_height ? height >= this.data.min_height ? height : this.data.min_height : this.data.max_height; + }, + size_inspect = () => { + if ((width > this.data.max_width || width < this.data.min_width || height > this.data.max_height || height < this.data.min_height) && this.data.disable_ratio) { + size_correct(); + return false; + } else { + size_correct(); + return true; + } + }; + height = this.data.CUT_START.height + ((this.data.CUT_START.corner > 1 && this.data.CUT_START.corner < 4 ? 1 : -1) * (this.data.CUT_START.y - e.touches[0].clientY)); + switch (this.data.CUT_START.corner) { + case 1: + width = this.data.CUT_START.width + this.data.CUT_START.x - e.touches[0].clientX; + if (this.data.disable_ratio) { + height = width / (this.data.width / this.data.height) + } + if (!size_inspect()) return; + cut_left = this.data.CUT_START.cut_left - (width - this.data.CUT_START.width); + break + case 2: + width = this.data.CUT_START.width + this.data.CUT_START.x - e.touches[0].clientX; + if (this.data.disable_ratio) { + height = width / (this.data.width / this.data.height) + } + if (!size_inspect()) return; + cut_top = this.data.CUT_START.cut_top - (height - this.data.CUT_START.height) + cut_left = this.data.CUT_START.cut_left - (width - this.data.CUT_START.width) + break + case 3: + width = this.data.CUT_START.width - this.data.CUT_START.x + e.touches[0].clientX; + if (this.data.disable_ratio) { + height = width / (this.data.width / this.data.height) + } + if (!size_inspect()) return; + cut_top = this.data.CUT_START.cut_top - (height - this.data.CUT_START.height); + break + case 4: + width = this.data.CUT_START.width - this.data.CUT_START.x + e.touches[0].clientX; + if (this.data.disable_ratio) { + height = width / (this.data.width / this.data.height) + } + if (!size_inspect()) return; + break + } + if (!this.data.disable_width && !this.data.disable_height) { + this.setData({ + width: width, + cut_left: cut_left, + height: height, + cut_top: cut_top, + }) + } else if (!this.data.disable_width) { + this.setData({ + width: width, + cut_left: cut_left + }) + } else if (!this.data.disable_height) { + this.setData({ + height: height, + cut_top: cut_top + }) + } + this._imgMarginDetectionScale(); + } + }, + _cutTouchStart(e) { + let currentX = e.touches[0].clientX; + let currentY = e.touches[0].clientY; + let cutbox_top4 = this.data.cut_top + this.data.height - 30; + let cutbox_bottom4 = this.data.cut_top + this.data.height + 20; + let cutbox_left4 = this.data.cut_left + this.data.width - 30; + let cutbox_right4 = this.data.cut_left + this.data.width + 30; + + let cutbox_top3 = this.data.cut_top - 30; + let cutbox_bottom3 = this.data.cut_top + 30; + let cutbox_left3 = this.data.cut_left + this.data.width - 30; + let cutbox_right3 = this.data.cut_left + this.data.width + 30; + + let cutbox_top2 = this.data.cut_top - 30; + let cutbox_bottom2 = this.data.cut_top + 30; + let cutbox_left2 = this.data.cut_left - 30; + let cutbox_right2 = this.data.cut_left + 30; + + let cutbox_top1 = this.data.cut_top + this.data.height - 30; + let cutbox_bottom1 = this.data.cut_top + this.data.height + 30; + let cutbox_left1 = this.data.cut_left - 30; + let cutbox_right1 = this.data.cut_left + 30; + if (currentX > cutbox_left4 && currentX < cutbox_right4 && currentY > cutbox_top4 && currentY < cutbox_bottom4) { + this._moveDuring(); + this.data._flag_cut_touch = true; + this.data._flag_img_endtouch = true; + this.data.CUT_START = { + width: this.data.width, + height: this.data.height, + x: currentX, + y: currentY, + corner: 4 + } + } else if (currentX > cutbox_left3 && currentX < cutbox_right3 && currentY > cutbox_top3 && currentY < cutbox_bottom3) { + this._moveDuring(); + this.data._flag_cut_touch = true; + this.data._flag_img_endtouch = true; + this.data.CUT_START = { + width: this.data.width, + height: this.data.height, + x: currentX, + y: currentY, + cut_top: this.data.cut_top, + cut_left: this.data.cut_left, + corner: 3 + } + } else if (currentX > cutbox_left2 && currentX < cutbox_right2 && currentY > cutbox_top2 && currentY < cutbox_bottom2) { + this._moveDuring(); + this.data._flag_cut_touch = true; + this.data._flag_img_endtouch = true; + this.data.CUT_START = { + width: this.data.width, + height: this.data.height, + cut_top: this.data.cut_top, + cut_left: this.data.cut_left, + x: currentX, + y: currentY, + corner: 2 + } + } else if (currentX > cutbox_left1 && currentX < cutbox_right1 && currentY > cutbox_top1 && currentY < cutbox_bottom1) { + this._moveDuring(); + this.data._flag_cut_touch = true; + this.data._flag_img_endtouch = true; + this.data.CUT_START = { + width: this.data.width, + height: this.data.height, + cut_top: this.data.cut_top, + cut_left: this.data.cut_left, + x: currentX, + y: currentY, + corner: 1 + } + } + }, + _cutTouchEnd(e) { + this._moveStop(); + this.data._flag_cut_touch = false; + }, + //停止移动时需要做的操作 + _moveStop() { + //清空之前的自动居中延迟函数并添加最新的 + clearTimeout(this.data.TIME_CUT_CENTER); + this.data.TIME_CUT_CENTER = setTimeout(() => { + //动画启动 + if (!this.data._cut_animation) { + this.setData({ + _cut_animation: true + }); + } + this.setCutCenter(); + }, 1000) + //清空之前的背景变化延迟函数并添加最新的 + clearTimeout(this.data.TIME_BG); + this.data.TIME_BG = setTimeout(() => { + if (this.data._flag_bright) { + this.setData({ + _flag_bright: false + }); + } + }, 2000) + }, + //移动中 + _moveDuring() { + //清空之前的自动居中延迟函数 + clearTimeout(this.data.TIME_CUT_CENTER); + //清空之前的背景变化延迟函数 + clearTimeout(this.data.TIME_BG); + //高亮背景 + if (!this.data._flag_bright) { + this.setData({ + _flag_bright: true + }); + } + }, + //监听器 + _watcher() { + Object.keys(this.data).forEach(v => { + this._observe(this.data, v, this.data.watch[v]); + }) + }, + _observe(obj, key, watchFun) { + var val = obj[key]; + Object.defineProperty(obj, key, { + configurable: true, + enumerable: true, + set:(value) => { + val = value; + watchFun && watchFun(val, this); + }, + get() { + if (val && '_img_top|img_left||width|height|min_width|max_width|min_height|max_height|export_scale|cut_top|cut_left|canvas_top|canvas_left|img_width|img_height|scale|angle|min_scale|max_scale'.indexOf(key)!=-1){ + let ret = parseFloat(parseFloat(val).toFixed(3)); + if (typeof val == "string" && val.indexOf("%") != -1){ + ret+='%'; + } + return ret; + } + return val; + } + }) + }, + _preventTouchMove() { + }, + cnacle(){ + this.setData({ + show_cropper: false + }) + } + } +}) diff --git a/commpents/image-cropper/image-cropper.json b/commpents/image-cropper/image-cropper.json new file mode 100644 index 0000000..32640e0 --- /dev/null +++ b/commpents/image-cropper/image-cropper.json @@ -0,0 +1,3 @@ +{ + "component": true +} \ No newline at end of file diff --git a/commpents/image-cropper/image-cropper.wxml b/commpents/image-cropper/image-cropper.wxml new file mode 100644 index 0000000..a773e40 --- /dev/null +++ b/commpents/image-cropper/image-cropper.wxml @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/commpents/image-cropper/image-cropper.wxss b/commpents/image-cropper/image-cropper.wxss new file mode 100644 index 0000000..5364fb3 --- /dev/null +++ b/commpents/image-cropper/image-cropper.wxss @@ -0,0 +1,144 @@ +.image-cropper{ + background:rgba(14, 13, 13,.8); + position: fixed; + top:0; + left:0; + width:100vw; + height:100vh; + z-index: 2; +} +.image-cropper .main{ + position: absolute; + width:100vw; + height:100vh; + overflow: hidden; +} +.image-cropper .content{ + z-index: 9; + position: absolute; + width:100vw; + height:100vh; + display: flex; + flex-direction:column; + pointer-events:none; +} +.image-cropper .bg_black{ + background: rgba(0, 0, 0, 0.8)!important; +} +.image-cropper .bg_gray{ + background: rgba(0, 0, 0, 0.45); + transition-duration: .35s; +} +.image-cropper .content>.content_top{ + pointer-events:none; +} +.image-cropper .content>.content_middle{ + display: flex; + height: 200px; + width:100%; +} +.image-cropper .content_middle_middle{ + width:200px; + box-sizing:border-box; + position: relative; + transition-duration: .3s; +} +.image-cropper .content_middle_right{ + flex: auto; +} +.image-cropper .content>.content_bottom{ + flex: auto; +} +.image-cropper .img{ + z-index: 2; + top:0; + left:0; + position: absolute; + border:none; + width:100%; + backface-visibility: hidden; + transform-origin:center; +} +.image-cropper .image-cropper-canvas{ + position: fixed; + background: white; + width:150px; + height:150px; + z-index: 10; + top:-200%; + pointer-events:none; +} +.image-cropper .border{ + background: white; + pointer-events:auto; + position:absolute; +} +.image-cropper .border-top-left{ + left:-2.5px; + top:-2.5px; + height:2.5px; + width:33rpx; +} +.image-cropper .border-top-right{ + right:-2.5px; + top:-2.5px; + height:2.5px; + width:33rpx; +} +.image-cropper .border-right-top{ + top:-1px; + width:2.5px; + height:30rpx; + right:-2.5px; +} +.image-cropper .border-right-bottom{ + width:2.5px; + height:30rpx; + right:-2.5px; + bottom:-1px; +} +.image-cropper .border-bottom-left{ + height:2.5px; + width:33rpx; + bottom:-2.5px; + left:-2.5px; +} +.image-cropper .border-bottom-right{ + height:2.5px; + width:33rpx; + bottom:-2.5px; + right:-2.5px; +} +.image-cropper .border-left-top{ + top:-1px; + width:2.5px; + height:30rpx; + left:-2.5px; +} +.image-cropper .border-left-bottom{ + width:2.5px; + height:30rpx; + left:-2.5px; + bottom:-1px; +} +.btn_box{ + z-index: 9; + position: absolute; + display: flex; + bottom: 0rpx; + justify-content: center; + width: 100vw; +} +.btn{ + font-weight: 600; + text-align: center; + margin: 60rpx 20rpx; + flex: 1; +} +.btn_cancle{ + /* width: 100rpx; */ +} +.btn_confirm{ + background-color: #3CC7C0; + color: #fff; +} diff --git a/commpents/myprofile/index.js b/commpents/myprofile/index.js index 4d788f7..9c7bd62 100644 --- a/commpents/myprofile/index.js +++ b/commpents/myprofile/index.js @@ -85,8 +85,11 @@ Component({ zhuanchang_note: '请选择专长', jianjie_show: false, shanchang_show: false, + show_cropper: false, + img_cropper_src: '', + img_cropper_width: 250, //宽度 + img_cropper_height: 250, //高度 }, - options: { addGlobalClass: true, styleIsolation: 'apply-shared' @@ -901,6 +904,16 @@ Component({ }) }, doUploadPhoto(event) { + const { file } = event.detail; + this.setData({ + photoEvent: event, + img_cropper_src: file.url, + show_cropper: true + }) + this.loadimage() + }, + OSSUpload(fileurl){ + let event = this.data.photoEvent console.log("index douploadFIle: ", event); const scene = event.currentTarget.dataset.scene; const field_name = event.currentTarget.dataset.field_name; @@ -919,7 +932,7 @@ Component({ const ossAccessKeyId = response.data.accessid; const policy = response.data.policy; const key = response.data.dir+filename; - const filePath = file.url; // 待上传文件的文件路径。 + const filePath = fileurl; // 待上传文件的文件路径。 wx.uploadFile({ url: host, // 开发者服务器的URL。 filePath: filePath, @@ -982,6 +995,29 @@ Component({ }, moveZhuanChang(){ - } + }, + cropperload(e) { + console.log("cropper初始化完成"); + }, + loadimage(e) { + this.cropper = this.selectComponent("#image-cropper"); + //重置图片角度、缩放、位置 + this.cropper.imgReset(); + this.triggerEvent('showPageMeta'); + }, + clickcut(e) { + console.log(e); + // //点击裁剪框阅览图片 + // wx.previewImage({ + // current: e.detail.url, // 当前显示图片的http链接 + // urls: [e.detail.url] // 需要预览的图片http链接列表 + // }) + + this.OSSUpload(e.detail.url) + this.setData({ + show_cropper: false + }) + this.triggerEvent('hidePageMeta'); + }, } }) diff --git a/commpents/myprofile/index.json b/commpents/myprofile/index.json index bda9cf1..5a43e33 100644 --- a/commpents/myprofile/index.json +++ b/commpents/myprofile/index.json @@ -21,6 +21,7 @@ "van-icon": "@vant/weapp/icon/index", "van-search": "@vant/weapp/search/index", "van-empty": "@vant/weapp/empty/index", - "van-image": "@vant/weapp/image/index" + "van-image": "@vant/weapp/image/index", + "image-cropper": "/commpents/image-cropper/image-cropper" } } diff --git a/commpents/myprofile/index.wxml b/commpents/myprofile/index.wxml index a329081..caf5e1c 100644 --- a/commpents/myprofile/index.wxml +++ b/commpents/myprofile/index.wxml @@ -365,4 +365,6 @@ - \ No newline at end of file + + + \ No newline at end of file