将页面保存为图片 图片是透明没有内容（手机上为黑色）

页面如何保存为图片啊（我写的好像不行）？？？？？

保存后是这样 没有内容 而且手机上是黑色的

js:

Page({

/**

  * 页面的初始数据

  */

data: {

},

/**

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

  */

onLoad: function (options) {

var that = this;

var withs = 0;

var heights = 0;

//获取屏幕 宽高

wx.getSystemInfo({

success: function (res) {

withs = res.screenWidth;

heights = res.screenHeight -100;

that.setData({withs:withs,heights:heights})

}

})

//画布

const ctx = wx.createCanvasContext('share')

ctx.rect(0, 0, withs, heights-10)

ctx.stroke()

ctx.draw(false, function(){//回调

wx.canvasToTempFilePath({

canvasId: 'share',

success: (res) => {

that.setData({

shareTempFilePath: res.tempFilePath

})

}

})

})

},

//保存至相册

saveImage: function () {

var t = this.data.shareTempFilePath

if (!this.data.shareTempFilePath) {

wx.showModal({

title: '提示',

content: '图片绘制中，请稍后重试',

showCancel: false

})

}

wx.saveImageToPhotosAlbum({

filePath: this.data.shareTempFilePath,

success: (res) => {

console.log(res)

},

fail: (err) => {

console.log(err)

}

})

}

})

wxml:

<view class="container">

<canvas canvas-id='share' style='width:100vw;height:{{heights}}px;'><view>4534</view></canvas>

</view>

<view class='tips' bindtap='saveImage'>点击保存图片</view>