微信小程序合成照片 应用canvas把他们绘制到一张图上保存到本地相册然后点击分享
自定义一个组件
components/canvas.js里
// components/canvas/canvas.js
const app = getApp()
Component({
/**
* 组件的属性列表
*/
properties: {
scene: {
type: String,
value: ''
}
},
/**
* 组件的初始数据
*/
data: {
pixelRatio: 2,
programCode: '',
count: 0,
spinning: false,
loadingFlag: false, // 是否重新加载图片
image:''
},
// 在组件完全初始化完毕、进入页面节点树后
attached () {
wx.nextTick(() => {
this.getFile() // 获取小程序码和头像的临时文件
})
},
/**
* 组件的方法列表
*/
methods: {
getFile () {
// 请求接口 获取头像和小程序码的临时文件
if (!this.data.loadingFlag) {
this.initData()
}
},
writeCanvas () {
let that = this
const ctx = wx.createCanvasContext('myCanvas', that)
let canvasW = that.data.canvasW
let canvasH = that.data.canvasH
let bgImgPath = that.data.image //背景图片(在这里换图片)
let programCode = that.data.erweima // 小程序码(在这里换图片)
// 画大背景 单位是 px 不是 rpx
ctx.drawImage(bgImgPath, 0, 0, canvasW, canvasH)
// 保存上下文
ctx.save()
// 恢复画布
ctx.restore()
// 画小程序码
ctx.drawImage(programCode, that.computedPercent(85), that.computedPercent(165), that.computedPercent(117), that.computedPercent(117))
ctx.draw(true, () => {
that.setData({
spinning: false
})
})
},
// 初始化数据
initData () {
let that =