微信公众号合并二维码图片并生成分享海报demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>微信公众号合并二维码图片并生成分享海报</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="https://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
<style>
body {-webkit-touch-callout: none;}
</style>
</head>
<body>
<div id="qrcode"></div>
<div>
<!-- 背景图片宽高 1080 x 1920 -->
<img id="avatar" src="bj.jpg" width="100%" height="100%" />
</div>
<script>
var customUserAgent = 'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Mobile Safari/537.36';
//修改后的userAgent
Object.defineProperty(navigator, 'userAgent', {
value: customUserAgent,
writable: false
});
drawAndShareImage()
var qrcode = new QRCode(document.getElementById("qrcode"), {
width : 200,
height : 200
});
qrcode.makeCode(window.location.href);
function drawAndShareImage(){
var canvas = document.createElement("canvas");
canvas.width = 1080;
canvas.height = 1920;
var context = canvas.getContext("2d");
context.rect(0 , 0 , canvas.width , canvas.height);
context.fillStyle = "#fff";
context.fill();
var myImage = new Image();
myImage.src = $("#avatar").attr("src"); //背景图片 你自己本地的图片或者在线图片
myImage.crossOrigin = 'Anonymous';
myImage.onload = function(){
context.drawImage(myImage , 0 , 0 , 1080 , 1920);
context.font = "30px Courier New";
context.fillText("扫码识别图上二维码,即刻参与活动!",75,1765);
var myImage2 = new Image();
myImage2.src = $("#qrcode img").attr("src"); //你自己本地的图片或者在线图片
myImage2.crossOrigin = 'Anonymous';
myImage2.onload = function(){
context.drawImage(myImage2 , 125 , 1505 , 200 , 200);
var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
var img = document.getElementById('avatar');
// document.getElementById('avatar').src = base64;
img.setAttribute('src' , base64);
}
}
}
</script>
</body>
</html>