js 根据内容 生成二维码_html怎么生成二维码

js 根据内容 生成二维码_html怎么生成二维码js生成二维码以及插入图片先根据qrcode官网demo,不同属性值的变化,二维码的变化效果:https://larsjung.de/jquery-qrcode/latest/demo/进入demo中,审查元素查看里面引用的js文件,你会发现jquery-qrcode-0.14.0.js,这个版本支持二维码中插入图片。下面是我写的一个列子:引用js:<scripttype="text/ja…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

js生成二维码以及插入图片

先根据qrcode官网demo,不同属性值的变化,二维码的变化效果:https://larsjung.de/jquery-qrcode/latest/demo/

进入demo中,审查元素查看里面引用的js文件,你会发现jquery-qrcode-0.14.0.js,这个版本支持二维码中插入图片。

下面是我写的一个列子:

引用js:

<script type=”text/javascript” src=”jquery-1.11.2.min.js”></script>
<script type=”text/javascript” src=”jquery-qrcode-0.14.0.js”></script>

index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<title>生成二维码</title>
<script type=”text/javascript” src=”jquery-1.11.2.min.js”></script>
<script type=”text/javascript” src=”jquery-qrcode-0.14.0.js”></script>
    <script type=”text/javascript” src=” xyqrcode.js”></script>
<script type=”text/javascript”>

$(document).ready(function(){

    var options={};
    options.url=”http://www.baidu.com”; //二维码的链接
    options.dom=”#code”;//二维码生成的位置
    options.image=$(‘#img-buffer’)[0];//图片id
    options.render=”canvas”;//设置生成的二维码是canvas格式,也有image、div格式
    xyqrcode(options);
});
</script>
</head>

<body>
<div id=”code”></div>
<img id=”img-buffer” src=”gy.jpg”>
</body>
</html>

 

xyqrcode.js(给qrcode传生成的二维码属性)

function xyqrcode(options) {

    var settings = {

        dom:”,
        render: ‘canvas’,   //生成二维码的格式还有image、div
        ecLevel:”H”,
        text:””,
        background:”#ffffff”, 
        fill:”#333333″, //二维码纹路的颜色
        fontcolor:”#ff9818″,
        fontname:”Ubuntu”,
        image:{},
        label:””,
        mPosX:0.5,   //图片在X轴的位置
        mPosY:0.5,    //图片在X轴的位置
        mSize:0.27,   //图片大小
        minVersion:10,
        mode:4,
        quiet:1,
        radius:1,
        size:400   
    };
        if (options) {

            $.extend(settings, options);//options对象跟settings比较,相同的就替换,没有的就添加

        }
        if(settings.dom.length==0){

            window.console.log(“Error: dom empty!”);
            return;
        }
        if(settings.url.length==0){

            window.console.log(“Error: url empty!”);
            return;
        }
    settings.text=settings.url; //在qrcode生成二维码的地址是text。这里就把url赋值给text
        $(settings.dom).qrcode(settings);
      
}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/180811.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • linux ftp命令大全,linux ftp命令详解[通俗易懂]

    linux ftp命令大全,linux ftp命令详解[通俗易懂]1.连接ftp服务器格式:ftp[hostname|ip-address]a)在linux命令行下输入:ftp192.168.1.1b)服务器询问你用户名和密码,分别输入用户名和相应密码,待认证通过即可。c)也可以先输入ftpftp>d)然后在输入要连接的IPftp>open192.168.1.12.下载文件下载文件通常用get和mget这两条命令。a)get格式:get…

  • Sql实现Split

    Sql实现Split

  • web3j教程:java使用web3j开发以太坊智能合约交易

    web3j教程:java使用web3j开发以太坊智能合约交易

  • 再看PetStore

    再看PetStore

  • 申请并部署阿里云SSL免费证书详细流程[通俗易懂]

    申请并部署阿里云SSL免费证书详细流程[通俗易懂]1、申请阿里云SSL免费证书,依次如下图操作。注意:此处一直验证失败是因为用了CDN(很多找不到原因的问题都是因为使用了CDN),在百度云加速中再次解析一次即可。2、部署:阿里云服务器可直接部署,其他第三方服务器下载安装。(1)阿里云服务器部署。(2)第三方服务器下载安装,安装方法查看“下载”键左侧的“帮助”,本文中用的是PHPstudy8.0自带的安装方法。注意事项:一、服务器windows防火墙允许443端口;二、云服务器需要单独在控制面板设置允许443端

  • PL/SQL语句_sql语句declare用法

    PL/SQL语句_sql语句declare用法因为SQL只能访问、操作数据库,却不能进行程序设计,而OraclePL/SQL是一种高级数据库程序设计语言,该语言专门用于对ORACLE数据库进行访问,并且可以进行过程处理。*注:在PL/SQL中只能用SQL语句中的DML部分,不能用DDL部分,如果要在PL/SQL中使用DDL(如CREATEtable等)的话,只能以动态的方式来使用。**1.DML(datamanipulationlanguage)数据操纵语言:比如SELECT、UPDATE、INSERT、DELETE

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号