canvas生成的图片不能覆盖整个屏幕,这是怎么回事?
canvas生成的图片不能覆盖整个屏幕,这是怎么回事?
canvas生成的图片不能覆盖整个屏幕,这是怎么回事?
<view wx:if=“{{show==true}}” >
<canvas style=“width:100%;height:{{windowHeight}}px;” canvas-id=“myCanvas”></canvas>
</view>
save: function () {
let that = this;
wx.showLoading({
title: ‘正在生成’,
mask: ‘true’
})
that.setData({
show: true
})
that.drawimage(that.data.windowWidth, that.data.windowHeight)
setTimeout(() => {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: that.data.windowWidth,
height: that.data.windowHeight,
canvasId: ‘myCanvas’,
success: function (res) {
wx.hideLoading()
console.log(res.tempFilePath)
that.setData({
show:false
})
wx.previewImage({
urls: [res.tempFilePath],
})
}
})
},3000)
},
drawimage: function (width,height){
const ctx = wx.createCanvasContext(‘myCanvas’)
ctx.drawImage(‘…/…/static/images/2.jpg’, 0, 0, width, height)
ctx.draw()
}
有一段黑
windowHeight 就是获取手机屏幕的高度,然后设置canvas的高度为屏幕的高度,然后导出图也是canvas的高度,导出的图片的长度高度都是canvas的宽高,但在预览的时候下面就如上图有一段黑