微信小程序画布绘制并保存图片

微信小程序画布绘制

生成上下文

ctx = wx.createCanvasContext('canvasID');

对应的节点信息

<canvas canvas-id="canvasID" 
	class="canvas-one"
	style="width:{
      {
      width}}px;height:{
      {
      height}}px">
 </canvas>

获取对应的手机屏幕的大小

wx.getSystemInfo({
   
    success: res => {
   
        rpx = res.windowWidth/375; // 像素比/iPhone6大小
        this.setData({
   
          width: res.windowWidth,
          height: res.windowHeight
        })
    }
})

canvas 是在一个二维的网格当中,左上角的坐标为(0, 0)

网络图片在画布中不显示的，所以要这样操作，转换成临时图片

wx.getImageInfo({
   
    src: img,
    success: res => {
   
        this