uni-app实现分享⽣成图⽚
<template>
<view>
<view class="personal_li"
@click="shareClick">
<image src="../../static/address.png"
mode="widthFix"
class="iconImage"></image>
<text class="font14">分享⽣成图⽚</text>
<image src="../../static/jt.png"
mode="widthFix"
class="jtIcon"></image>
</view>
<view class="canvasContent" v-if="canvasShow">
<canvas canvas-id="shareCanvas" class="canvasName"></canvas>
<view class="canvasText">图⽚已保存到相册，可分享给好友</view>
<image src="../../static/error.png" class="errorImage" @click="canvasShow = false"></image>
</view>
</view>
</template>
<script>
export default {
data() {
return {
canvasShow: false
}
},
methods: {
//这是⼀个封装好的⽅法
promisify: api => {
return (options, ...params) => {
return new Promise((resolve, reject) => {
const extras = {
success: resolve,
fail: reject
}
api({ ...options, ...extras }, ...params)
})
}
},
shareClick() {
const wxGetImageInfo = this.ImageInfo)
Promise.all([
// 图⽚⽬前只随机了⼏张图⽚，后期可⾃⾏替换
wxGetImageInfo({
src: 'pics.ksudi/pic/2019/soms/companycard/jd2.png'  // 背景图⽚
}),
wxGetImageInfo({
src: 'pics.ksudi/pic/2019/soms/companycard/st2.png'  // ⼆维码图⽚，⼆维码图⽚如需要携带参数，可根据接⼝将需要扫码进⼊页⾯的路径+参数传⼊后端，后端可根据⽣产⼩程序⼆维码路径，将路径放⼊这⾥就ok了,    })
]).then(res => {
console.log(3454)
const ctx = wx.createCanvasContext('shareCanvas')
console.log(ctx)
// 底图
ctx.drawImage(res[0].path, 0, 0, 600, 700)
// 作者名称
ctx.setTextAlign('center')    // ⽂字居中
ctx.setFillStyle('#000000')  // ⽂字颜⾊：⿊⾊
ctx.setFontSize(22)        // ⽂字字号：22px
ctx.fillText('作者：张杰', 300 / 2, 100)
// ⼩程序码
const qrImgSize = 150
ctx.drawImage(res[1].path, (340 - qrImgSize) / 2, 230, qrImgSize, qrImgSize)
ctx.stroke()
// 绘图⽣成临时图⽚
console.log('res', res)
ctx.draw(false,() => {
})
this.canvasShow = true
})
张杰图片大全},
tempFileImage() {
let that = this
uni.canvasToTempFilePath({
canvasId: 'shareCanvas',
success: (res) => {
uni.hideLoading()
that.pFilePath)
},
fail:function () {
//TODO
}
})
},
//保存
savePic (filePath) {
console.log('filePath', filePath)
uni.showLoading({
title: '正在保存'
});
uni.saveImageToPhotosAlbum({
filePath: filePath,
success: function () {
uni.showToast({
title: '图⽚保存成功～'
});
},
fail: function (e) {
//TODO
},
complete: function (){
uni.hideLoading()
}
});
}
}
}
</script>
<style lang="scss" scoped> .canvasContent{
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: 0;
background: rgba(0,0,0,0.5);  display: flex;
align-items: center;
flex-direction: column;
padding-top: 50upx;
.canvasName{
width: 80%;
height: calc(100vh - 300upx);  }
.canvasText{
margin: 30upx 0 20upx;
color: #FFFFFF;
}
.errorImage{
width: 80upx;
height: 80upx;
}
}
</style>