标签：canvas rec title 微信 海报 detail myCanvas res uni

<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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。