收藏
回答

canvas生成图片时部分机型真机调试图片显示黑色

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 客户端 7.0.4 1.02.1904090

- 当前 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;

}



回答关注问题邀请回答
收藏

2 个回答

  • ShinBlueCat
    ShinBlueCat
    2019-05-24

    这里有个bug是安卓下存图默认透明部分会变成黑底,正在修复了


    目前可以先在背景手动填充一个灰色矩形来规避

    2019-05-24
    赞同
    回复 1
    • 灰太狼
      灰太狼
      2019-05-25

      好的,多谢

      2019-05-25
      回复
  • 社区技术运营专员-娇华
    社区技术运营专员-娇华
    2019-05-24

    你好,麻烦提供能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)

    2019-05-24
    赞同
    回复 1
登录 后发表内容