uni-app分享海报合成（H5、App、微信小程序）

在移动端中，海报图片分享功能非常常见，特别是在商品推广、人员分销、产品拉新、统计分享、快捷支付等应用场景中屡见不鲜。先看如下效果：

一、分解海报图片合成部位

1.海报背景图片（绿色）；

2.二维码（红色）；

3.用户头像（蓝色）；

4.用户名称（黄色）。

二、代码功能点解析

1.海报合成用canvas。

2.涉及到的图片如果是网络图片需要使用uni.downloadFile下载图片资源到本地（本地临时路径）。

3.H5端需要注意图片跨域问题。

4.微信小程序端使用uni.downloadFile需要到小程序后台开发管理中配置downloadFile合法域名。如果是体验版可以打开调试模式即可测试。

三、完整代码

1.html

<!-- 招募商户 -->
<canvas class="canvas-box" canvas-id="inviteCanvas"></canvas>
<u-mask :show="inviteShow">
    <view class="product-code-warp">
        <view @tap.stop>
            <image :show-menu-by-longpress="true" :src="inviteCodeImg" mode="widthFix"></image>
        </view>
        <static-image @click="inviteShow=false" src="/static/img/common/icon-close.png" width="64" height="64" margin-top="48"></static-image>
    </view>
</u-mask>

2.js

// 页面中调用海报函数
this.userPosterCanvas(654,912,this.inviteBackgroundImg, res.data.qrUrl, this.userInfo.avatar, this.userInfo.nickName, (tempFilePath) => {
    this.inviteCodeImg = tempFilePath
    this.inviteShow = true
});

// 图片转符合安全域名路径
downloadFilestoreImage(url) {
    return new Promise((resolve, reject) => {
        let that = this;
        uni.downloadFile({
            url: url,
            success: function(res) {
                resolve(res.tempFilePath);
            },
			fail: function(err) {
				reject(err)
            }
        });
    })
}

// 海报生成函数
async userPosterCanvas(width, height,bgImg, codeImg, avatar, nickName, successFn) {
    // 背景图片下载
	bgImg = await this.downloadFilestoreImage(bgImg)
    // 二维码图片下载
	codeImg = await this.downloadFilestoreImage(codeImg)
    // 头像处理
	avatar = avatar ? await this.downloadFilestoreImage(avatar) : '/static/img/common/avatar.png'
    // 创建canvas
	const ctx = uni.createCanvasContext('inviteCanvas');
	ctx.clearRect(0, 0, 0, 0);
	ctx.fillStyle = '#fff';
	ctx.drawImage(bgImg, 0, 0, uni.upx2px(width), uni.upx2px(height));
	ctx.drawImage(codeImg, uni.upx2px(width) - uni.upx2px(186), uni.upx2px(height) - uni.upx2px(186), uni.upx2px(166), uni.upx2px(166));
	ctx.setTextAlign('left')
	ctx.setFontSize(uni.upx2px(32));
	ctx.setFillStyle('#1F1F1F');
	ctx.fillText(nickName.length>10?(nickName.substring(0,9)+'...'):nickName, uni.upx2px(96), uni.upx2px(770));
	ctx.save();
    // 生成圆形头像 
	ctx.beginPath();
	ctx.arc(uni.upx2px(32)+uni.upx2px(52)/2,uni.upx2px(732)+uni.upx2px(52)/2, uni.upx2px(52) / 2, 0, Math.PI * 2,false);
	ctx.clip()
	ctx.drawImage(avatar, uni.upx2px(32), uni.upx2px(732), uni.upx2px(52), uni.upx2px(52));
	ctx.save();
    // 生成图片，加500毫秒延时
	ctx.draw(false,setTimeout(()=>{
		uni.canvasToTempFilePath({
			canvasId: 'inviteCanvas',
			fileType: 'png',
			// quality: 1,
			destWidth: width,
			destHeight: height,
			success: function(res) {
				uni.hideLoading();
				successFn && successFn(res.tempFilePath);
			},
			fail: function(err) {
				uni.hideLoading();
			}
		})
	},500))
},

3.css

.canvas-box{
    width: 654rpx;
    height: 912rpx;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateX(-100%);
}

四、扩展

1.海报图片的尺寸可以通过获取海报背景图片的宽高来。方法：uni.getImageInfo；

2.长按保存到相册。

（1）H5端使用浏览器自带的长按保存；

（2）App端使用@longtap="longtapImg()"触发长按事件；

（3）微信小程序端需要开启长按功能：:show-menu-by-longpress="true"；

// 保存到相册（App端&微信小程序端）
uni.saveImageToPhotosAlbum({
    filePath: this.inviteCodeImg, 
    success: () => {
        this.$u.toast('已保存到相册~')
    },
    fail: () => {
        this.$u.toast('保存失败，请重试')
    }
});