因为我是bug体质,所以才来写博客。
小程序生成带有小程序码的图片,分享到朋友圈,扫描进入分享页。
- 绘制画布,导出生成图片。
- 点击分享按钮,弹出 图片和保存按钮。
- 点击保存按钮, 保存到相册。
WXML 代码
<button bindtap='alertPic'>分享</button>
<canvas canvas-id="myCanvas" class='canvas'></canvas>
<view hidden='{{change}}' class='canvas-img'>
<view class='bg-c'>
<image src='{{canvasImg}}'></image>
<button bindtap='saveImg' type='warn' size='mini'>保存到相册</button>
</view>
</view>
WXSS代码
//因为我也只是写着玩,所以具体的样式我就没写。
.canvas{
height:750rpx;
width:550rpx;
position: fixed;
left: 0;
top:9999rpx;
background-color:#fff;
}
js 代码
//大概就是这些,其他的data里面的数据就不贴了
onReady: function () {
//绘制画布
var that = this;
const ctx = wx.createCanvasContext('myCanvas');
const x = "../../../images/banner.png";
ctx.drawImage(x, 10, 10, 330, 190);
ctx.draw()
ctx.setTextAlign('left');
ctx.setFillStyle('#666');
ctx.setFontSize(16);
ctx.fillText("一分钟了解什么是资产", 10, 240);
ctx.draw(true)
ctx.setFillStyle('#F46464');
ctx.fillText("¥980", 10, 260);
ctx.draw(true)
const xcx = "../../../images/111.jpg";
ctx.drawImage(xcx, 10, 300, 100, 100);
ctx.draw(true)
ctx.setFillStyle('#666');
ctx.setFontSize(14);
ctx.fillText("长按识别小程序码", 120, 390);
ctx.draw(true)
ctx.draw(true,
// 生成图片
setTimeout(function () {
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
fileType: 'jpg',
success: function (res) {
console.log(res.tempFilePath)
that.setData({
canvasImg: res.tempFilePath
})
},
})
}, 1000)
);
},
// 点击保存按钮 存到本地
saveImg: function () {
var that = this;
wx.getImageInfo({
src: this.data.canvasImg,
success: function (res) {
wx.saveImageToPhotosAlbum({
filePath: res.path,
success(res) {
wx.showToast({
title: '图片保存成功',
icon: 'success',
duration: 2000
});
that.setData({
change: 'true'
})
},
})
}
})
需要注意的几点: 具体原因,我要不要写呢?
- canvas不要用hidden,用position定位到看不见的地方。
- 绘制画布不要放在onload中,放在onready里面,最开始看着文档来的,最后导出图片失败。
- wx.canvasToTempFilePath导出图片时,一直不能显示canvas绘制的图片,加了一个setTimeout搞定。
- 点击保存到相册时wx.saveImageToPhotosAlbum不能直接使用网络地址,从 wx.getImageInfo里面取。