vue 微信公衆号 canvas 生成圖檔 長按分享朋友

效果圖

vue頁面

<template>
	<div class="page-share">
		<div class="content">
			<div id="qrcode"></div>
			<img class="poster" id="bg" src="../../assets/images/income/sharebg.png" alt="">
			<img class="head-img" src="../../assets/images/income/gril.png" alt="" id="head-img">
			<canvas id="myCanvas" class="poster"></canvas>
			<img :src="src" alt="" class="poster poster1" crossOrigin="anonymous">
			<div class="tips">
				長按上方圖檔 發送給朋友
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue'
	import { ToastPlugin } from 'vux'
	import 	QRcode from "qrcodejs2"
	export default {
	    data() {
	        return{
				src:'',
	        }
	    },
	    created () {
			document.title = "領取分享紅包";
	    },
		mounted() {
			this.creatQRcode();
		},
		updated(){
		},
	    methods: {
			// 生成二維碼
			creatQRcode(){
				new QRcode('qrcode', {
					text: "http://www.runoob.com",
					width: 200,
					height: 200,
					colorDark : "#000000",
					colorLight : "#ffffff",
				})
				var img =document.getElementById('qrcode').getElementsByTagName('img')[0];
				if(img){
					let that = this;
					setTimeout(function(){
						that.creatPoster();
					},1000)
				}
			},
			// 生成海報
			creatPoster(){
				var img0 = document.getElementById('qrcode').getElementsByTagName('img')[0];
				var img2 = document.getElementById('head-img');
				var img1 = document.getElementById('bg');
				var can = document.getElementById('myCanvas');
				let ctx = can.getContext("2d");
				// polyfill 提供了這個方法用來擷取裝置的 pixel ratio
				var getPixelRatio = function(context) {
					var backingStore = context.backingStorePixelRatio ||
						context.webkitBackingStorePixelRatio ||
						context.mozBackingStorePixelRatio ||
						context.msBackingStorePixelRatio ||
						context.oBackingStorePixelRatio ||
						context.backingStorePixelRatio || 1;
				
					return (window.devicePixelRatio || 1) / backingStore;
				};
				var ratio = getPixelRatio(ctx);
				can.width = 580*ratio;
				can.height = 800*ratio;
				// 背景圖檔
				ctx.drawImage(img1,0,0,580*ratio,800*ratio);
				// 頭像
				ctx.drawImage(img2,35*ratio,637*ratio,53*ratio,53*ratio);
				// 二維碼
				ctx.drawImage(img0,430*ratio,630*ratio,120*ratio,120*ratio);
				//畫文字
				ctx.font= 30*ratio+''+"px PingFangSC-Regular";
				ctx.fillStyle = "#1D1D1D";
				ctx.fillText("Jay Wu",105*ratio,677*ratio,333*ratio);
				this.src = can.toDataURL("image/png");
			},
	    }
	}
</script>

<style  scoped>
	body,html{
		height:100%;
	}
	.page-share{
		position:fixed;
		top:0;
		left:0;
		right:0;
		bottom:0;
		height:auto;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items:center;
		font-family:PingFangSC-Regular;
		font-weight:400;
		.content{
			width:100%;
			height:100%;
			overflow-y: auto;
			background:url(../../assets/images/income/sharebg1.jpg) no-repeat center center;
			background-size:100% 100%;
			position:relative;
			#qrcode{
				display: none;
			}
			#head-img{
				display: none;
			}
			.poster{
				position: absolute;
				width:7.87rem;
				height:10.67rem;
				top:50%;
				left:50%;
				margin-left:-3.93rem;
				margin-top:-5.33rem;
				background:#fff;/*  */
				border-radius:0.13rem;
				overflow:hidden;
				display: none;
			}
			img{
				border:0;
			}
			#bg{
				display: none;
			}
			canvas{
				display: none;
			}
			.poster1{
				display: block;
			}
			.img{
				width:.71rem;
				height:.71rem;
				border-radius:50%;
				margin-right:.2rem;
				display: none;
			}
			.tips{
				width:100%;
				height:1.33rem;
				line-height:1.33rem;
				font-size:.33rem;
				color:#6E6E6E;
				background:#fff;
				text-align:center;
				position:fixed;
				bottom:0;
				left:0;
				z-index:2;
			}
		}
	}
</style>