完整的page文件
// pages/canvas/canvas.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad:
function (options) {
//先创建一个画布
const ctx = wx.createCanvasContext(
"nihao")
//填充背景色
ctx.fillStyle =
'#fff';
ctx.fillRect(
0,
0,
250,
150)
//将图片转化为画布
ctx.drawImage(
"titleFont.png",
0,
0,
250,
90)
ctx.drawImage(
"zhuye1.png",
0,
0,
200,
150)
ctx.drawImage(
"mozhu.png",
0,
0,
250,
150)
//成功执行，draw方法中进行回调
ctx.draw(
true,
function(){
console.log(
"draw callback success")
//保存临时图片
wx.canvasToTempFilePath({
x:
0,
y:
0,
width:
250,
height:
150,
destWidth:
250,
destHeight:
150,
canvasId:
'nihao',
success:
function (res) {
console.log(
"get tempfilepath(success) is:",res.tempFilePath)
//将图片保存在系统相册中(应先获取权限，)
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
console.log(
"save photo is success")
},
fail:
function () {
console.log(
"save photo is fail")
}
})
},
fail:
function () {
console.log(
'get tempfilepath is fail')
}
})
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady:
function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow:
function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide:
function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload:
function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:
function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom:
function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage:
function () {
}
})