问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

qrcode生成的二维码加背景图

头像
realwds
    11562153

    代码如下，第一次加载不能加载出来，有时候二维码不能绘制在图片上。

    微信截图_20191018142522.png

    <!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div id="qrcode" style="display:none"></div>
<canvas id="myCanvas" ></canvas>    
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
<script type="text/javascript">

new QRCode(document.getElementById("qrcode"), {
    text: "http://www.baidu.com",
    width: 246,
    height: 246,
    typeNumber:4,    
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
    
});  // 设置要生成二维码的链接
var qrcodeImg = document.getElementById("qrcode").lastChild;
var bgImg = new Image();
bgImg.src="bg.png";

var canvas = document.getElementById("myCanvas");
canvas.width = bgImg.width;
canvas.height = bgImg.height;
var ctx = canvas.getContext("2d");

bgImg.crossOrigin = "*";
setTimeout(()=>{
    bgImg.onload = function(){
    ctx.drawImage(bgImg,0,0,bgImg.width,bgImg.height);
    ctx.drawImage(qrcodeImg,65,180,qrcodeImg.width,qrcodeImg.height);
}

},10)

</script>
</body>
</html>
    javascript
    阅读 7.5k
    1 个回答
    得票最新
    头像
    realwds
      11562153
      ✓ 已被采纳

      换了一个插件完美解决

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的推广</title>
</head>
<body>
    <input id="code-url" type="hidden" value="http://www.baidu.com"/><br />
    <div id="mid-qrcode"></div>
    <div id="divOne"></div>

<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script type="text/javascript">
    $(function(){
        var qrcode= $('#divOne').qrcode({
            text: $("#code-url").val(),
            width: 150,
            height: 150,
        }).hide();
        var canvas=qrcode.find('canvas').get(0);
        var data_codeImg = canvas.toDataURL('image/jpg');//图片base64位字符串
        data = [
            'bg.png', //背景海报图
            data_codeImg
        ], base64 = [];
        function draw(fn) {
            var c = document.createElement('canvas'),  // 获取canvas对象( 通过选择器选择canvas元素 )
                ctx = c.getContext('2d'),  // 通过canvas获取他的上下文绘制环境( context )
                len = data.length;
            c.width = 1125;  // 画布宽   canvas的默认宽度与高度:宽度:300,高度:150 注：canvas的宽度与高度，只能通过行间属性或者js动态修改，不要通过样式去修改，否则获取到的宽度与高度不准
            c.height = 536;  // 画布高
            ctx.rect(0, 0, c.width, c.height);  // 创建矩形 参数：绘制起点x坐标，绘制起点y坐标，矩形宽（像素），矩形高（像素）
            ctx.fillStyle = '#fff';
            ctx.fill();
            function drawing(n) {
                if (n < len) {
                    var img = new Image;
                    img.src = data[n];
                    img.onload = function () {
                        if (n === 1) {
                            // 画图 参数：图片对象，相对画布的起点x坐标，
                            // 相对画布的起点y坐标，绘制的图片宽度（二维码，px），绘制的图片高度（二维码，px）
                            ctx.drawImage(img, 60, 160, 250, 250);
                        }
                        else if(n === 0){
                            ctx.drawImage(img, 0, 0, c.width,  c.height);
                        }
                        drawing(n + 1);//递归
                    }
                } else {
                    //保存生成作品图片
                    base64.push(c.toDataURL("image/jpeg", 0.8));
                    fn();
                }
            }
            drawing(0);
        }
        // 调用
        function hecheng() {
            draw(function () {
                document.getElementById("mid-qrcode").innerHTML = '<img src="'+base64[0]+'">';
            });
        }
        hecheng()
    });
</script>
</body>
</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题