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

_野草

于 2020-11-26 18:12:00 发布

阅读量624

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/dl1456074580/article/details/110199345

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

_野草

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
微信公众号合并二维码图片并生成分享海报demo

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

扫一扫

专栏目录