Page({ data: { // movable-view左上角相对于movable-area的坐标x,y， // 由于movable-area左上角位于屏幕原点，因此x，y也是movable-view相对于屏幕的坐标 x: 0, y: 0, scale: 1, // 用来控制moveable-view的缩放比例，回撤重置时需要 src: { // 图片的源文件数据 path: '', orientation: 'up', // width和height在最初时和屏幕尺寸做比较，做一个合适的缩放 // 在截图的时候，计算方框在源图片的位置也需要用到width和height width: 0, height: 0, ratio: 1, // 图片的长宽比，最开始需要根据ratio判断图片的形状是长图还是宽图，进行合适的居中放置 }, image: { // 最初图片在屏幕上显示的宽度和高度 // 经过缩放后也是基于这两个尺寸计算新的尺寸 initialWidth: 0, initialHeight: 0, // 控制最初图片在屏幕中的位置 initialX: 0, initialY: 0, // 经过缩放移动后图片在屏幕中的位置 // 截图时找方框在源图片中的位置，是基于屏幕坐标系，所以需要图片的当前位置 curX: 0, curY: 0, // 图片当前的缩放比例，用于计算图片当前显示的尺寸大小 curScale: 1 }, // 屏幕尺寸windowWidth和windowHeight windowWidth: 0, windowHeight: 0, cropBorder: { // 截图的方框相对于屏幕中的位置 x: 0, y: 0, // 截图方框的尺寸 size: 0 }, }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { this.takePhoto() }, setImgInfo(options){ let that = this; let _src = JSON.parse(options); _src.ratio = _src.height / _src.width; let systemInfo = wx.getSystemInfoSync(); // 屏幕内框范围（这里定义左右边界30，上下边际50) // 但是因为movable-view能超出movable-area的范围太小，为了尽量放大图片的活动范围，这里取消了这个边界 // let borderWidth = systemInfo.windowWidth - 2 * 30 // let borderHeight = systemInfo.windowHeight - 2 * 50 let _image = that.data.image if (_src.width > systemInfo.windowWidth && _src.height > systemInfo.windowHeight) { // 如果图片尺寸大于屏幕尺寸，需要缩放 if (_src.ratio > 1) { // 如果是长图，按照宽度进行缩放 _image.initialWidth = systemInfo.windowWidth // >> 0用来取整 _image.initialHeight = (_src.ratio * systemInfo.windowWidth) >> 0 } else { // 如果是宽图，按照高度进行缩放 _image.initialWidth = systemInfo.windowHeight, _image.initialHeight = (systemInfo.windowHeight / _src.ratio) >> 0 } } else { _image.initialWidth = _src.width _image.initialHeight = _src.height } // 控制图片在屏幕居中 _image.initialX = 0//(systemInfo.windowWidth - _image.initialWidth) >> 1 _image.initialY = 0//(systemInfo.windowHeight - _image.initialHeight) >> 1 console.log(JSON.stringify(_image)) // 定义方框的位置和尺寸 let _cropBorder = {} _cropBorder.size = systemInfo.windowWidth * 0.8 _cropBorder.x = (systemInfo.windowWidth - _cropBorder.size) >> 1 _cropBorder.y = (systemInfo.windowHeight - _cropBorder.size) >> 1 that.setData({ src: _src, image: _image, cropBorder: _cropBorder, windowWidth: systemInfo.windowWidth, windowHeight: systemInfo.windowHeight }) setTimeout(()=>{ that.drawFrame() },500) }, /** * 移动movable-view的回调 */ onChange(e) { console.log(e.detail) let that = this; that.setData({ 'image.curX': e.detail.x, 'image.curY': e.detail.y }) }, /** * 缩放moveable-view的回调 */ onScale(e) { console.log(e.detail) let that = this; that.setData({ 'image.curX': e.detail.x, 'image.curY': e.detail.y, 'image.curScale': e.detail.scale }) }, // 拍照 takePhoto() { var that=this, width = that.data.screenW, height = that.data.screenW; wx.chooseImage({ count:1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success:function(res){ const tempFilePaths = res.tempFilePaths[0]; wx.getImageInfo({ src: tempFilePaths, success: function(msg) { let data = JSON.stringify(msg) that.setImgInfo(data) } }) }, fail:function(error){ console.error("调用本地相册文件时出错") console.warn(error) }, // // 确定提交图片 // complete:function(back){ // console.log(back) // } }) }, // 绘制方框 drawFrame(){ let that = this; let cropBorder = that.data.cropBorder console.log(cropBorder,"cropBorder") this.context = wx.createCanvasContext('myCanvas') // 设置背景黑色透明度0.5，不要使用opacity，会导致后期截出来的图片也是半透明 this.context.setFillStyle('rgba(0,0,0,0.5)') this.context.fillRect(0, 0, that.data.windowWidth, that.data.windowHeight) // 挖出来一个方框，这个方框区域就是全透明了 this.context.clearRect(cropBorder.x, cropBorder.y, cropBorder.size, cropBorder.size * (4/3)) // 画方框的外框 this.context.setStrokeStyle('white') // 往外画大一圈，这样在canvas上填充图片的时候框线就不会变细啦 this.context.strokeRect(cropBorder.x - 1, cropBorder.y - 1, cropBorder.size + 2, (cropBorder.size * (4/3)) + 2) this.context.draw() }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function() { // let that = this; // let cropBorder = that.data.cropBorder // this.context = wx.createCanvasContext('myCanvas') // // 设置背景黑色透明度0.5，不要使用opacity，会导致后期截出来的图片也是半透明 // this.context.setFillStyle('rgba(0,0,0,0.5)') // this.context.fillRect(0, 0, that.data.windowWidth, that.data.windowHeight) // // 挖出来一个方框，这个方框区域就是全透明了 // this.context.clearRect(cropBorder.x, cropBorder.y, cropBorder.size, cropBorder.size) // // 画方框的外框 // this.context.setStrokeStyle('white') // // 往外画大一圈，这样在canvas上填充图片的时候框线就不会变细啦 // this.context.strokeRect(cropBorder.x - 1, cropBorder.y - 1, cropBorder.size + 2, cropBorder.size + 2) // this.context.draw() }, /** * 取消截图 */ cancel(event) { wx.navigateBack() }, /** * 回撤，这地方有个问题： * 本来是想图片一次性移动和缩放回到最初的位置和大小，但是发现点击第一次只能实现图片移动到初始点 * 点击第二次才是缩放到初始大小 * 后来发现小程序移动有一个过程，会不停地回调onChange()， * 如果一定要实现，只能是当onChange中x，y归0之后再控制缩放， * 但是x和y是浮点数，零判断不精确而且影响性能，所以放弃了。 */ reset(event) { let that = this; that.setData({ scale: 1, x: 0, y: 0, }) }, /** * 点击完成的回调 * 完成截图，回传图片到上一页 */ complete(event) { let that = this let src = that.data.src console.log(src) let cropBorder = this.data.cropBorder let image = that.data.image // 当前图片显示的大小 let curImageWidth = image.initialWidth * image.curScale let curImageHeight = image.initialHeight * image.curScale // 将方框位置换算到源图片中的位置srcX,srcY let srcX = (cropBorder.x - image.curX) / curImageWidth * src.width // canvas的height是100%，而bottom是120rpx，因此canvas的位置不是在原点，需要减去这个120rpx // 置于这里为什么要有个120，因为底部栏也是透明的，但字是亮的，我想呈现底部栏在上方不被遮罩挡住的效果 let srcY = (cropBorder.y - image.curY - 120 / 750 * that.data.windowWidth) / curImageHeight * src.height // 方框区域映射到源图片中的尺寸 let srcWidth = cropBorder.size / curImageWidth * src.width let srcHeight = (cropBorder.size * (4/3)) / curImageHeight * src.height console.log('srcX = ' + srcX + ', srcY = ' + srcY + ', srcWidth = ' + srcWidth + ', srcHeight = ' + srcHeight + ', cropX = ' + cropBorder.x + ', cropY = ' + cropBorder.y + ', cropSize = ' + cropBorder.size) // 绘制图片不要透明啦，不然会看到重影 this.context.setFillStyle('rgba(0,0,0,1)') // 鉴于尺寸的精确度，方框内图片的覆盖在y方向会有微微的偏移， // 但是一旦截图就返回上一页了，强迫症患者没有后悔的余地。 this.context.drawImage(src.path, srcX, srcY, srcWidth, srcHeight, cropBorder.x, cropBorder.y, cropBorder.size, cropBorder.size) // 这里绘图一定要有回调，不然图片还没绘制完成就截图那就GG了 this.context.draw(true, function(res) { wx.canvasToTempFilePath({ canvasId: 'myCanvas', x: cropBorder.x, y: cropBorder.y, width: cropBorder.size, height: cropBorder.size, destWidth: cropBorder.size, destHeight: cropBorder.size, fileType: 'jpg', success: function(data) { console.log(data) // 将图片回传到上一页 var pages = getCurrentPages(); if (pages.length > 1) { var prePage = pages[pages.length - 2]; var facepicture = wx.getFileSystemManager().readFileSync(data.tempFilePath, "base64") prePage.setData({ avatarPath: data.tempFilePath, chooseface: true, facepic: `${facepicture}` }) } wx.navigateBack() }, fail: function(err) { console.log(err) } }) }) }, /** * 生命周期函数--监听页面显示 */ onShow: function() { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function() { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function() { }, /** * 用户点击右上角分享 */ onShareAppMessage: function() { } })