• 
  

https://segmentfault.com/a/1190000021286617

参考案例的地址。

index.wxml

<view class=“container”>

  <canvas style=“margin: 0 15rpx;width: 720rpx;height: 720rpx;border: 1px #333 solid;background-color: #fff;” canvas-id=“firstCanvas” id=‘firstCanvas’ bindtouchstart=“bindtouchstart” bindtouchmove=“bindtouchmove”></canvas>

  <view class=“btn”>

    <view bindtap=‘clear’ class=“clear”>

      清除

    </view>

    <view bindtap=‘export’ class=“submit”>

      提交

    </view>

  </view>

  <image style=“width:360rpx;height:360rpx;margin: 10rpx 0;” mode=“aspectFill” src="{{imgUrl}}"></image>

</view>

---

index.js

Page({

  data: {

    context: null,

    imgUrl: “”

  },

  /**记录开始点 */

  bindtouchstart: function(e) {

    this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)

  },

  /**记录移动点，刷新绘制 */

  bindtouchmove: function(e) {

    this.data.context.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);

    this.data.context.stroke();

    this.data.context.draw(true);

    this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y);

  },

  /**清空画布 */

  clear: function() {

    this.data.context.draw();

  },

  /**导出图片 */

  export: function() {

    const that = this;

    this.data.context.draw(false, wx.canvasToTempFilePath({

      x: 0,

      y: 0,

      fileType: ‘jpg’,

      canvasId: ‘firstCanvas’,

      success(res) {

        const {

          tempFilePath

        } = res;

        that.setData({

          imgUrl: tempFilePath,

        })

      },

      fail() {

        wx.showToast({

          title: ‘导出失败’,

          icon: ‘none’,

          duration: 2000

        })

      }

    }))

  },

  onShow: function() {

    const context = wx.createCanvasContext(‘firstCanvas’)

    this.setData({

      context: context

    })

    context.draw()

  },

})

---

以上代码我直接复制到小程序里面在电脑的编辑工具显示生成的图片是正常的，但是在手机小程序预览的时候生成的图片是黑色的。

一直没找到原因 麻烦帮看看谢谢