小程序利用canvas画图, 使用开发者工具可以实现编辑,但是传到线上不行,为什么?

小程序利用canvas画图, 使用开发者工具可以实现编辑,但是传到线上不行,为什么?
`// canvas 全局配置
var context = null;// 使用 wx.createContext 获取绘图上下文 context
var isButtonDown = false;
var arrx = [];
var arry = [];
var arrz = [];
var canvasw = 0;
var canvash = 0;
var tmpFilePath = null;
//获取系统信息
wx.getSystemInfo({
success: function (res) {

canvasw = res.windowWidth;//设备宽度  
canvash = res.windowHeight;

}
});
//注册页面
Page({

canvasIdErrorCallback: function (e) {

console.error(e.detail.errMsg)

},
canvasStart: function (event) {

isButtonDown = true;
arrz.push(0);
arrx.push(event.changedTouches[0].x);
arry.push(event.changedTouches[0].y);

},
canvasMove: function (event) {

if (isButtonDown) {
  arrz.push(1);
  arrx.push(event.changedTouches[0].x);
  arry.push(event.changedTouches[0].y);
};
for (var i = 0; i < arrx.length; i++) {
  if (arrz[i] == 0) {
    context.moveTo(arrx[i], arry[i])
  } else {
    context.lineTo(arrx[i], arry[i])
  };
};
context.clearRect(0, 0, canvasw, canvash);
context.drawImage(tmpFilePath, 0, 0, canvasw, canvash)
context.stroke();
context.draw(true);

},
canvasEnd: function (event) {

isButtonDown = false;

},
cleardraw: function () {

//清除画布  
arrx = [];
arry = [];
arrz = [];
context.clearRect(0, 0, canvasw, canvash);
context.draw(true);

},
getimg: function () {

if (arrx.length == 0) {
  wx.showModal({
    title: '提示',
    content: '签名内容不能为空!',
    showCancel: false
  });
  return false;
};
//生成图片  
wx.canvasToTempFilePath({
  canvasId: 'canvas',
  success: function (res) {
    console.log(res.tempFilePath);
    //存入服务器  
    wx.uploadFile({
      url: 'a.php', //接口地址  
      filePath: res.tempFilePath,
      name: 'file',
      formData: { //HTTP 请求中其他额外的 form data   
        'user': 'test'
      },
      success: function (res) {
        console.log(res);
      },
      fail: function (res) {
        console.log(res);
      },
      complete: function (res) {
      }
    });
  }
})

},
/**

  • 页面的初始数据

*/
data: {

src: ""

},

/**

  • 生命周期函数--监听页面加载

*/
onLoad: function (options) {

// 使用 wx.createContext 获取绘图上下文 context  
context = wx.createCanvasContext('canvas');
context.beginPath()
context.setStrokeStyle('#ffff00');
context.setLineWidth(10);
context.setLineCap('round');
context.setLineJoin('round');

//开始导入图片
wx.downloadFile({
  url: 'http://xxx.png',
  success: function(res) {
    console.log(333)
    if (res.statusCode == 200) {
      context.drawImage(res.tempFilePath, 0, 0, canvasw, canvash)
      context.draw(true)
      tmpFilePath = res.tempFilePath
    }
    console.log(444)
  }
})

},

})`

阅读 2.3k
1 个回答

解决了吗?老哥。我也遇到了这样的问题 在本地或者体验版都可以画,但是线上版本就不能画了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题