canvas 微信公众号，生成分享海报

<template>
	<view class="pc-container">
		<topFixBack />
		
		<image :src="imgurl" mode="aspectFill" @tap="saveImage"></image>
		<canvas canvas-id="mycanvas" style="width: 590rpx;height: 998rpx;" v-show="canvasShow"></canvas>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
                imgurl:'',
                canvasShow:true,
				rec_detail:{}
            }
        },
        onHide() {
            uni.removeStorageSync('person-card');
        },
        mounted() {
			//如果本地有图片了，直接取，解决一些页面切换canvas没有重画
            if(uni.getStorageSync('person-card')){
                this.canvasShow = false;
                this.imgurl = uni.getStorageSync('person-card');
            }else{
				uni.showLoading({
				    title:'加载中',
				    mask:true
				})
				setTimeout(()=>{
					this.canvasImage();
				},1000)
            }
        },
		onLoad(options){
			let id = options.id;
			if(!id){
				this.$toast.showMsg('缺少参数');
				setTimeout(()=>{
					uni.navigateBack({
					})
				},1000)
			}
			this.id = id;
			this.$initNoPage(this,'Pro/rec_detail',{id},'rec_detail');
		},
        methods: {
            canvasImage(){
                uni.showLoading({
                    title:'加载中',
                    mask:true
                })
                let myCanvas = uni.createCanvasContext('mycanvas', this); 
                // 画布尺寸
                // 坐标(0,0) 表示从此处开始绘制，相当于偏移。
                // 头像
                myCanvas.drawImage(this.rec_detail.titleimg,10,10,290,160);
                //参数：图片，左偏移，上偏移，宽，高
				
                let fontSize = 10;
                let fontSizea = 14;
				myCanvas.fillStyle = '#ff0000';
				myCanvas.font = `16px Arial`;//绘制文字
                myCanvas.fillText('¥' + this.rec_detail.price/100,20,195);
				myCanvas.font = `${fontSizea}px Arial`;//绘制文字
                myCanvas.fillStyle = '#101010';
                myCanvas.fillText(this.rec_detail.title,80,195);
				
				fontSizea = 12;
				myCanvas.font = `${fontSizea}px Arial`;//绘制文字
                myCanvas.fillText(this.rec_detail.sectitle,20,215);
				
                //二维码
                myCanvas.drawImage(this.rec_detail.erweima,66,260,180,180);
                 
                myCanvas.fillText('长按识别二维码查看产品',90,450);
                myCanvas.fillText('长按保存图片',123,480);
                
                //开始绘画，必须调用这一步，才会把之前的一些操作实施
                myCanvas.draw(true,()=>{
                    uni.canvasToTempFilePath({
                        canvasId: 'mycanvas',
                        success: (res) => {
							console.log(res);
                            // 在H5平台下，tempFilePath 为 base64
                            this.imgurl = res.tempFilePath;
                            this.canvasShow = false;
                            uni.hideLoading();
                            uni.setStorageSync('person-card',this.imgurl);
                          },
                        fail: () => {
                            uni.showToast({
                                title: '名片加载失败',
                                duration: 2000 
                            });
                        }
                    });
                });
            },
            saveImage(){
                uni.showActionSheet({
                    itemList: ['保存图片'], //,'取消'
                    success: (res) => {
                        if(res.tapIndex == 0){
                            uni.saveImageToPhotosAlbum({
                                filePath: this.imgurl,//图片文件路径，可以是临时文件路径也可以是永久文件路径，不支持网络图片路径
                                success: () => {
                                    uni.showToast({
                                        title: '保存成功',
                                        duration: 2000
                                    });
                                },
                                fail: () => {
                                    uni.showToast({
                                        title: '保存失败',
                                        duration: 2000 
                                    });
                                }
                            });
                        }
                    },
                    fail: function (res) {
						uni.showToast({
						    title:res.errMsg,
						    duration: 2000 
						});
                        console.log(res.errMsg);
                    }
                });
            }
        }
	}
</script>

<style lang="scss">
image{
    width: 99%;
    min-height: 990rpx;
    border: 1rpx solid #BBBBBB;
	display: block;
}
.pc-container{
    width: 590rpx;
    height: 1060rpx;
    margin: 0 auto;
    padding-top: 46rpx;
    overflow: hidden;
}
</style>

• saveImageToPhotosAlbum 如果报错，用手机打开 微信访问，可以正常下载的，应该是外界的环境参数问题，授权问题
• 参考：https://www.cnblogs.com/xinyouhunran/p/12469454.html

标签：canvas,rec,title,微信,海报,detail,myCanvas,res,uni
来源： https://www.cnblogs.com/pansidong/p/16412140.html