首页 > 其他分享 >qrcode加背景图

qrcode加背景图

时间:2024-08-14 15:49:23浏览次数:8  
标签:function canvas img ctx var qrcode 背景图

代码如下(图片放到服务器上,否则会有跨域问题):

<!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>

标签:function,canvas,img,ctx,var,qrcode,背景图
From: https://www.cnblogs.com/henuyuxiang/p/18359131

相关文章

  • weapp.qrcode.esm.js
    /***weapp.qrcode.jsv1.1.5*/varhasOwn=Object.prototype.hasOwnProperty,toStr=Object.prototype.toString,defineProperty=Object.defineProperty,gOPD=Object.getOwnPropertyDescriptor,isArray=function(t){return"function"==typeofArray.isArray?Ar......
  • CSS背景图片小调整
    添加背景图片,但是背景图片太小了(图片只是测试图片,实际工作中是不知道什么颜色的背景有很多logo的图片)background-image:url('../assets/images/test.jpg');background-repeat:no-repeat;background-size:contain;background-position:center;背景图片如下由......
  • vue echarts图表添加背景图
    实现效果: 代码实现:varcolor=newecharts.graphic.LinearGradient(0,0,1,0,//这四个参数分别表示渐变的起点(x1,y1)与终点(x2,y2)的位置[{offset:0,color:'green'},//0%处的颜色{offset:0.5,color:'blue'},//50%处......
  • 我无法插入背景图像、进入全屏模式并关闭以前的窗口
    我正在编写一个根据该算法工作的程序(也就是说,当您单击某些按钮时,会出现另一个窗口或带有结果的最终窗口,并且当您单击按钮时应该从Toplevel(opennewwindow(1))出现另一个窗口)我编写了这个程序的基本代码,但我未能在所有窗口上插入背景图像,以及为所有窗口设置全屏模式并关闭以前的......
  • 易优CMS模板标签uibackground背景图片在模板文件index.htm中调用uibackground标签,实现
    【基础用法】标签:uibackground描述:背景图片上传标签,使用时结合html一起才能完成可视化布局,只针对具有可视化功能的模板。用法:<divclass="eyou-edit"e-id="文件模板里唯一的数字ID"e-page='文件模板名'e-type="background"style="background-image:url({eyou:uibackgrounde......
  • Cesium加载带有背景图(包含多个背景图,图标和文字并排)的billboard
    思路:如果是简单的背景加文字,背景图会把文字挡住,又或者是背景图要有图标加文字,这时需要用canvas将背景图,图标和文字合并成一张图片,加载billboard的时候直接加载合成之后的图片即可。letcanvas=document.createElement("canvas");canvas.width=100;canvas.height=30;let......
  • 五分钟学会 调整 Gradio 运行界面 WEB UI 的背景图 和 添加 Html 标签
    场景我在调整gradio运行界面的组件的CSS样式时,我又再想,能不能给这个运行界面添个背景图或者其他HTML元素上去呢?如果可以那就真的太棒了吧~问题如何给gradio运行界面添加其他HTML元素和背景图?解决✨通过Markdown()方法:添加HTML标签通过g......
  • 易优CMS模板标签uibackground背景图片在模板文件index.htm中调用uibackground标签,实现
    【基础用法】标签:uibackground描述:背景图片上传标签,使用时结合html一起才能完成可视化布局,只针对具有可视化功能的模板。用法:<divclass="eyou-edit"e-id="文件模板里唯一的数字ID"e-page='文件模板名'e-type="background"style="background-image:url({eyou:uibackgrounde......
  • Java生成二维码的方法,QRCode、JQuery、Zxing
    QRcode国标简单示例相关资源下载zxing实现生成 /***生成二维码**@paramwidth*@paramheight*@paramname*@paramformat*@paramcontent*/publicstaticStringgenerateQRCodeByZxing(intwidth,i......
  • Vue3 - 微信公众号H5网站使用微信扫一扫(微信扫码),苹果报错 {“errMsg“:“scanQRCode
    前言关于此问题网上的教程都无法解决,如果您的报错信息与我相似,即可解决。在vue3|nuxt3微信公众号网页开发中,微信移动端h5网页使用JS-SDK中的“微信扫码(微信扫一扫)”wx.scanQRCode接口,苹果ios系统真机测试时出现报错:“errMsg”:“scanQRCode:thepermissi......