小哥,那个问题后来是怎么解决的啊?
canvas生成图片时部分机型真机调试图片显示黑色- 当前 Bug 的表现(可附上截图) 此机型为OPPOR7 [图片] - 预期表现 开发工具中和其他机型: [图片] - 复现路径 - 提供一个最简复现 Demo js: // pages/supervise/superviseAgreement/superviseAgreement.js let ctx = null; let isButtonDown = false; const arrx = []; const arry = []; const arrz = []; let canvasw = 0; let canvash = 0; Page({ /** * 页面的初始数据 */ data: { src: '', }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { // 使用wx.createContext获取绘图上下文context ctx = wx.createCanvasContext('canvas'); ctx.beginPath(); ctx.setStrokeStyle('#000000'); ctx.setLineWidth(4); ctx.setLineCap('round'); ctx.setLineJoin('round'); ctx.draw(); }, canvasStart(e){ console.log(e) isButtonDown = true; arrz.push(0); arrx.push(e.changedTouches[0].clientX - e.currentTarget.offsetLeft); arry.push(e.changedTouches[0].clientY - e.currentTarget.offsetTop); }, canvasMove(e){ console.log(e) if(isButtonDown){ arrz.push(1); arrx.push(e.changedTouches[0].clientX - e.currentTarget.offsetLeft); arry.push(e.changedTouches[0].clientY - e.currentTarget.offsetTop); } for(let i = 0; i < arrx.length; i++){ if(arrz[i] === 0){ ctx.moveTo(arrx[i], arry[i]) }else{ ctx.lineTo(arrx[i],arry[i]); } } // ctx.clearRect(0, 0, canvasw, canvash); ctx.setStrokeStyle('#000000'); ctx.setLineWidth(4); ctx.setLineCap('round'); ctx.setLineJoin('round'); ctx.stroke(); ctx.draw(false); }, canvasEnd(e){ console.log(e) isButtonDown = false; }, canvasError(e){ console.log(e.detail.errMsg); }, canvasSave(){ wx.canvasToTempFilePath({ canvasId: 'canvas', fileType: 'jpg', quality: 1, x: 0, y: 0, width: 300, height: 200, destWidth: 300, destHeight: 200, success: res => { console.log(res); this.setData({ src: res.tempFilePath }); } }); }, canvasClear(){ arrx.length = 0; arry.length = 0; arrz.length = 0; ctx.draw(false); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } }) wxml: <view class='superviseAgreementContainer'> <view class='header'> <canvas disable-scroll canvas-id='canvas' class='canvas' bind:touchstart='canvasStart' bind:touchmove='canvasMove' bind:touchend='canvasEnd' bind:touchcancel='canvasEnd' bind:error='canvasError' > </canvas> </view> <view class='body'> <button bind:tap='canvasSave'>生成图片显示</button> <button bind:tap='canvasClear'>清除</button> </view> <view class='footer'> <image src='{{src}}'></image> </view> </view> wxss: .superviseAgreementContainer{ height: 100%; background-color: #ffffff; display: flex; flex-direction: column; align-items: center; } .canvas { width: 100%; height: 100%; background-color: #ddd; margin: 0 auto; } .header{ width: 600rpx; height: 400rpx; } .body{ display: flex; justify-content: start; } .footer image{ border: 1rpx dashed #ddd; width: 600rpx; height: 400rpx; }
2020-09-21