将页面保存为图片 图片是透明没有内容(手机上为黑色)
页面如何保存为图片啊(我写的好像不行)?????
保存后是这样 没有内容 而且手机上是黑色的
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>