微信公众号合并二维码图片并生成分享海报demo

最新推荐文章于 2022-07-01 16:44:11 发布

原创最新推荐文章于 2022-07-01 16:44:11 发布 · 693 阅读

1 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及JavaScript技术实现的微信公众号分享海报的生成方法。该方法通过合并背景图片与二维码，最终生成一张可用于分享的海报。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信公众号合并二维码图片并生成分享海报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>