浅谈如何使用canvas生成二维码

适用于新手不知道怎么生产二维码，按照步骤一步一步来，自己也可以生成二维码

1.引入需要得js库

引入jquery

 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

引入qrcode 文件

    <script src="./qrcode.min.js"></script>

2.给他个容器，也是画布，存放二维码

<div id="qrCode" style="margin:auto; position:relative;"></div>

3.初始化，new qrcode实例

 //实例化，生成二维码create_qr: function(url,picName){//#qrcode是要显示二维码的容器，实例化之后，就在改元素里面生成二维码了$('#qrCode').qrcode({width:100,height:100,render:"canvas",typeNumber: -1,correctLevel: 0,background: "#ffffff",foreground : "#000000",text: url});

4.废话不多说，上demo

<html>
<head><script src="./jquery-1.10.2.js"></script><script src="./qrcode.min.js"></script>
</head><body><h1>输入URL以生成二维码</h1><div><label for="qr_link">URL:</label><input id="qr_link" type="text" value="hello er wei ma !!" /><input type="button" id="qr_creat" value="生成"><div>生成的二维码可以通过手机任意扫描工具，查看其二维码信息</div><br /><!-- <input type="text"> --></div><br><p id="qr_container" style="margin:auto; position:relative;"></p>
</body><script type="text/javascript">//点击生成按钮以后document.getElementById("qr_creat").onclick = function () {debuggervar qrcode = new QRCode(  //实例化生成二维码document.getElementById("qr_container"), {//二维码存放的divwidth: 160, //设置宽高height: 160,typeNumber: -1,correctLevel: 0,background: "#ffffff",foreground: "#000000",render: 'canvas'});//根据input框的值生成二维码qrcode.makeCode($('#qr_link').val());// $("#qr_container").append("<span>11111111<span>"); //换行debugger$('#qr_container img').hide();//隐藏img标签$('#qr_container canvas').css({ 'display': 'block', 'padding-bottom': '10px' })//生产的二维码自动下载到本地let canvas = $('body').find('canvas')[0];debuggerconst a = document.createElement('a');// var imgData = canvas.toDataURL('image/png').split('base64,')[1];var imgData = canvas.toDataURL('image/png');a.href = imgData;console.log(imgData);a.download = '001' + '.png';a.click()}
</script>
</html>

5.给画布的二维码添加编号

        //获取#qrcode元素中canvas元素的个数var len = $('#qrCode').find("canvas").length;//把图片名称赋予对应的canvas元素$($('#qrCode').find("canvas") [len-1]).data().picname = picName;var picName_val = picName.split('.png')[0];var canvas_ele = $('#qrCode').find('canvas')[len-1];var ctx = canvas_ele.getContext('2d');//绘制一个填充区域ctx.fillStyle= '#FFF';//填充区域颜色//四个参数分别代表 x轴 y轴 绘制区域宽 高 ctx.fillRect(30,186,140,14);//添加文字的样式 参数的意义分别为：字体粗细 大小 和类型ctx.font = 'normal 14px serif';//添加文字的颜色ctx.fillStyle= 'black';//三个参数分别代表 文字内容 x轴坐标 y轴坐标ctx.fillText(picName_val, 45 , 200);

项目说明：基于jquery框架的项目，可以用于批量下载二维码时批量添加编号，贴在设备商便于识别，老的企业项目很实用！

浅谈如何使用canvas生成二维码相关推荐

canvas生成二维码（2）
不同的插件实现相同的效果,用起来更简洁一些,引用插件qrcode.js 创建一个新的QRCode对象,利用动漫节点和data数据进行复制,实现生成图片img的二维码: 详细见下方代码: <!DO ...
canvas生成二维码海报-可配置
简介可通过选择图片.配置图片间距.是否展示合伙人等,使用canvas来生成海报,下面为选择4和2张图片的海报截图: 开发过程中学到的东西 1.自动闭合及非零环绕原则在绘制气泡和海报的时候需要绘制圆 ...
js生成二维码以及插入图片
js生成二维码以及插入图片先根据qrcode官网demo,不同属性值的变化,二维码的变化效果:https://larsjung.de/jquery-qrcode/latest/demo/ 进入dem ...
微信小程序使用canvas绘制二维码实现跳转小程序
开始接到这个需求的时候,我查阅文档获取小程序码 | 微信开放文档发现两种途径需要后端在服务器上调用接口拿到二维码,因为调用的 https://api.weixin.qq.com这个域名是不允许上白 ...
vue3 使用QrCode生成二维码
官网地址:QrCode官网第一步:安装 npm install --save qrcode.vue 第二步:引入并注册 import QrcodeVue from 'qrcode.vue' expo ...
JQuery qrcode插件生成二维码，并转换为image图片可识别
前言插件是基于jquery的,必须先引入jquery再引入qrcode插件 1.引入jquery 和 jQuery qrcode插件引入jq <script src="https: ...
【Vue 实战】生成二维码
文章目录一.前言二.实战步骤 1. 安装依赖 2. 引入到需要使用的页面三.插件参数 1. value (二维码的值内容) 2. size (二维码元素的大小) 3. render-as 4. ...
React生成二维码并将canvas转换成img格式
1. 导入包生成二维码 npm install qrcode.react npm包链接: https://www.npmjs.com/package/qrcode.react 1.1 生成二维码: i ...
qrcode生成二维码，canvas转化为图片
可以用jquery.qrcode.min.,js将一个页面生成二维码,该插件支持canvas和table,默认为canvas 核心代码: $('#qrcodeCanvas').qrcode({ ...

浅谈如何使用canvas生成二维码

浅谈如何使用canvas生成二维码相关推荐

最新文章

热门文章