收藏
回答

Canvas

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug wx.createCanvasContext 微信iOS客户端 6.6.6 1.9.94

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

页面如何保存为图片啊(我写的好像不行)?????


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




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>





回答关注问题邀请回答
收藏
登录 后发表内容