先看下创建出的最终效果
1、在wxml 创建画布
<canvas canvas-id="shareCanvas" style="width:250px;height:400px;background:#fff;margin:auto">
</canvas>
2、在js文件中向画布添加内容
createPhoto: function() {
var that = this;
const ctx = wx.createCanvasContext('shareCanvas') //获取画布
// wx.getImageInfo 获取图片
wx.getImageInfo({
src: 'image_path', //图片路径
success: function (res) {
ctx.setFillStyle('white') //设置画布底色为白色
ctx.fillRect(0, 0, 250, 400) //画布大小,四个参数为,左上角的横坐标、左上角的纵坐标、宽度、高度
// 将获取的图片写入画布
ctx.drawImage(res.path, 0, 0, 250,270)//五个参数为,获取图片的返回路径、左上角的横坐标、左上角的纵坐标、宽度、高度
// 向画布中加入文字
ctx.setTextAlign('left') // 文字居中
ctx.setFillStyle('#000') // 文字颜色:黑色
ctx.setFontSize(14) // 文字字号:22px
ctx.fillText('此处添加文字描述', 10, 290)//三个参数为,文本内容、左上角的横坐标、左上角的纵坐标
ctx.fillText('此处添加文字内容', 10, 380)
//获取小程序码图片
wx.getImageInfo({
src: 'code_path',//图片路径
success: function (res) {
// 小程序码大小
const qrImgSize = 80
ctx.drawImage(res.path, 160, 280, qrImgSize, qrImgSize)
ctx.draw()
}
})
}})
},
3、创建完成之后保存到相册
savePhoto: function () {
wx.canvasToTempFilePath({
canvasId: 'shareCanvas', //画布ID
fileType: 'jpg', //保存格式
success(res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath, //返回的保存路径
success(e) {
wx.showToast({
title: '已保存到相册'
})
}
})
}})
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。