wx.canvasToTempFilePath
首先把海报的布局使用canvas画出来,前端
ctx.setFillStyle('#ffffff'); ctx.rect(0, 0, phoneW, phoneH); ctx.fill(); ctx.drawImage("图片", 0, 0, phoneW, phoneH * 0.65) ctx.setFillStyle('#000000'); ctx.setFontSize(16); ctx.fillText('快来助我一臂之力吧', phoneW * 0.3, phoneH * 0.7); ctx.draw(true, function () { //保存临时图片 wx.canvasToTempFilePath({ canvasId: 'poster', success: function (res) { that.setData({ path: res.tempFilePath //这个就是生成的canvas图片 }) }, fail: function (res) { console.log(res) } }) })
后台的图片数据是不能展现在canvas上的,在虚拟机能够展现,真机上不显示图片,
这个也是官方公布的bug,
我使用的解决方法也是上网找了一番才找到的,web
使用wx.getImageInfoAPI把后台传的图片转换为本地图片,而后再放到canvas里边,这样就能够在真机上展现了。
长按海报出现操做列表,这里的操做列表我是自定义的,使用系统自带的不知道什么状况,可是吧...目前小程序中的canvasAPI权重最高,自定义的列表根本覆盖不了canvas... 定位什么的也无论用,并且canvas的固定定位不起做用和绝对定位同样,总之bug不少...摸索一番才解决了这个严重的问题canvas
在海报显示以前把canvas替换为image,路径就是canvas生成的图片,而且隐藏canvas,这样页面上用户看到的东西并无发生改变,也解决了bug
page({ data:{ dayMillisecond:2592000 //倒计时30天的毫秒数 }, onLoad:function(){ // 倒计时调用 setTimeout(function () { that.timer(); }, 10) }, // 渲染倒计时 timer: function () { let promise = new Promise((resolve, reject) => { let setTimer = setInterval( () => { this.setData({ dayClock: app.dateformat1(this.data.dayMillisecond1--), //把dayClock加到页面中便可 }) }, 1000) }) promise.then((setTimer) => { clearInterval(setTimer) }) }, }) //app.dateformat1 dateformat1:function(second) { var day=Math.floor(second/3600/24), hr = Math.floor(second/3600%24), min = Math.floor(second/60%60), sec = (second%60); return day; //根据实际开发需求返回相应的值 },
::-webkit-scrollbar { width: 0; height: 0; color: transparent; }