ttml:
<view class="container"> <view class="body canvas-space"> <canvas canvas-id="canvas" style="{{375 * rpx}}px;height:{{600 * rpx}}px" class="canvas"></canvas> </view> <view catchtap='save' class="saveImg">保存优惠券</view> </view>
ttjs:
onLoad: function (option) { this.ctx = tt.createCanvasContext('canvas'); let res = tt.getSystemInfoSync() this.setData({ rpx: res.windowWidth / 375 }) this.setData({ rpx: res.windowWidth / 375 }) } drawBackground() { var that = this let ctx = this.ctx; let res = tt.getSystemInfoSync() let rpx = res.windowWidth / 375 console.log('res.windowWidth',res) that.setData({ rpx: res.windowWidth / 375 }) //我是大背景 ctx.setFillStyle('#602671'); //为创建的canvans上下文添充颜色 如果没有设置 fillStyle,默认颜色为 black。 ctx.fillRect(0, 0, 375 * rpx, 600 * rpx) //我是白色背景 ctx.setFillStyle('white'); //为创建的canvans上下文添充颜色 如果没有设置 fillStyle,默认颜色为 black。 ctx.fillRect(27.5 * rpx, 58 * rpx, 320 * rpx, 495 * rpx) ctx.save(); ctx.beginPath(); //开始绘制 // 先画个圆 // ctx.arc(190 * rpx, 60 * rpx, 30 * rpx, 0 * rpx, Math.PI * 2, false); //false代表顺时针 图片的位置加半径 // ctx.setStrokeStyle('white') ctx.clip();//画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内 ctx.drawImage('/image/logo2.png', 158 * rpx, 30 * rpx, 60 * rpx, 60 * rpx); // 推进去图片 ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下文即状态 可以继续绘制 ctx.drawImage('/image/top.png', 27.5 * rpx, 50 * rpx, 320 * rpx, 10 * rpx); ctx.drawImage('/image/logo2.png', 160 * rpx, 31 * rpx, 60 * rpx, 47 * rpx); ctx.drawImage('/image/tit.png', 110 * rpx, 100 * rpx, 150 * rpx, 60 * rpx); ctx.setFillStyle("#602671"); ctx.setFontSize(30 * rpx); //字大小 ctx.setTextAlign('left'); //是否居中显示,参考点画布中线 ctx.fillText(this.data.coupon.order_price, 143 * rpx, 157 * rpx); ctx.setFillStyle("#602671"); ctx.setFontSize(30 * rpx); //字大小 ctx.setTextAlign('left'); //是否居中显示,参考点画布中线 ctx.fillText(this.data.coupon.price, 230 * rpx, 157 * rpx); ctx.drawImage('/image/border.png', 73 * rpx, 175 * rpx, 230 * rpx, 230 * rpx); ctx.drawImage(this.data.code, 78 * rpx, 180 * rpx, 220 * rpx, 220 * rpx); ctx.drawImage('/image/line.png', 15 * rpx, 420 * rpx, 344 * rpx, 24 * rpx); ctx.drawImage('/image/text.png', 50 * rpx, 465 * rpx, 280 * rpx, 70 * rpx); ctx.drawImage('/image/bottom.png', 27 * rpx, 550 * rpx, 320 * rpx, 10 * rpx); ctx.draw(); }, draw() { var that = this let ctx = this.ctx; ctx.clearRect(0, 0, 300, 300); //每一次都要将canvas清空一下,不然秒针就会一直显示在canvas上面 this.drawBackground(); ctx.draw(); // that.saveImg() // var t = setTimeout(function () { // that.saveImg() // clearTimeout(t) // }, 2000) }, save() { var that = this tt.authorize({ scope: "scope.album", success:function(res) { console.log('success',res); // 用户同意授权用户信息 that.saveImg() }, fail:function(res) { console.log('fail',res); tt.showToast({ title: '保存失败', icon: 'error' }) } }); }, saveImg() { let that = this; console.log(111111111) // var rpx = 1 let rpx = that.data.rpx console.log('rpx',rpx) try { tt.canvasToTempFilePath({ x: 0, y: 0, 375 * rpx, //画布宽高 height: 600 * rpx, destWidth: 1125 * rpx, //画布宽高*dpr 以iphone6为准 destHeight: 1800 * rpx, //放大2倍以上,解决保存的图片模糊的问题 canvasId: 'canvas', success: function (res) { console.log('success--------', res) //生成的临时图片路径 tt.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: function (res) { // console.log(res); tt.showToast({ title: '保存成功', }) tt.redirectTo({ url: "/pages/index/index", success:function(redirectTo_res11) { console.log(redirectTo_res11); }, fail:function(redirectTores) { console.log(`redirectTo 调用失败`); }, }); }, fail: function () { console.log('a') } }) }, complete: function (res) { console.log('complete---------', res) }, fail: function (res) { console.log('error---------', res) } }) } catch (e) { console.log('e-----', e) } // console.log(3333) }