jquery生成二维码怎么添加图片（两种方法）

github项目地址： https://github.com/fengliting/erweima

注意：这里实现的是第一个方法

自动生成二维码里面添加图片，有两种方法，一种是使用jquery原生的二维码插件，一种是别人有改动过的二维码插件，生成二维码的图片的时候有那么一些写的差别

第一种：使用的是原生的qrcode.js生成二维码加上图片

页面

</div>

this.$http.post('/customer/ajax',{method:'getqrcode'},{emulateJSON:true}).then(function(response){

var wechartUlr = response.data.data;

// console.log(wechartUlr)

$('#wechartauto').qrcode({

render: "canvas", // 渲染方式有table方式（IE兼容）和canvas方式

width: 155, //宽度

height: 155, //高度

text: wechartUlr, //内容

typeNumber: -1,//计算模式

correctLevel: 2,//二维码纠错级别

background: "#ffffff",//背景颜色

foreground: "#000000" //二维码颜色

});

//设置图片的大小

$("#qrCodeIco").css("width","50px")

$("#qrCodeIco").css("height","50px")

$("#qrCodeIco").attr("src","/images/newdashboard/wechat.png")

var margin = ($("#wechartauto").height() - $("#qrCodeIco").height()) / 2; //控制Logo图标的位置

$("#qrCodeIco").css("margin", margin);

})

css

canvas{

padding:10px;border:1px solid #f5f5f5;box-shadow:0px 1px 1px #e5e5e5;

}

成果

第二种方法，就是使用有改动过的qrcode.js插件

<!--此处需要引入三个JS文件

一、jquery-1.8.2.js

二、excanvas.js

三、qrcode.js

顺序要注意，不能乱了顺序；

-->

$(function() {

$("#bt").bind("click",

function() {

$("#qrcode_div").empty();

var text = $("#text").val();

$('#qrcode_div').qrcode({

render: 'canvas',

text: utf16to8(text),

height: 200,

width: 200,

typeNumber: -1, //计算模式

correctLevel: QRErrorCorrectLevel.M,//纠错等级

background: "#ffffff", //背景颜色

foreground: "#000000", //前景颜色

//logo图片地址

src: 'logo.png'

});

//console.info("wwww");

}

);

});

function utf16to8(str) { //转码

var out, i, len, c;

out = "";

len = str.length;

for (i = 0; i < len; i++) {

c = str.charCodeAt(i);

if ((c >= 0x0001) && (c <= 0x007F)) {

out += str.charAt(i);

} else if (c > 0x07FF) {

out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));

out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));

out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));

} else {

out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));

out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));

}

return out;

}

此方法得出的效果是一样的

后续补上实现的代码，会放在github上面

github项目地址： https://github.com/fengliting/erweima

注意：这里实现的是第一个方法

jquery生成二维码怎么添加图片（两种方法）相关推荐

java 生成二维码 QRCode、zxing 两种方式
版权声明:本文为 testcs_dn(微wx笑) 原创文章,非商用自由转载-保持署名-注明出处,谢谢. https://blog.csdn.net/testcs_dn/article/details/ ...
jquery 生成二维码并嵌入图片
用到的js 库 jquery-3.3.1.min.js jquery.qrcode.min.js html2canvas.js (百度云链接:https://pan.baidu.com/s ...
使用jquery生成二维码并添加logo图标
使用插件js文件在前端生成二维码图片还使用到了一个添加logo图标的js文件 utf.js 直接贴上代码 jquery版本应该是都可以的吧我的是我项目使用的版本js <!--HTML的标准文 ...
java生成二维码（在图片上生成二维码（二维码带logo）并且在图片上添加文字标签）
1pom.xml  <dependency><groupId>cn.hutool</groupId><artifactId ...
js生成二维码以及插入图片
js生成二维码以及插入图片先根据qrcode官网demo,不同属性值的变化,二维码的变化效果:https://larsjung.de/jquery-qrcode/latest/demo/ 进入dem ...
在二维码上添加图片主题（支持链接跳转）
(1) MatrixToImageWriter二维码创建核心类 package com.yx.yzh.utils; import java.awt.Color; import java.awt.Fon ...
生成二维码并以图片格式下载-qrcodejs2
最近在做项目,碰到票据完成后的生成二维码以及提供下载功能,这里谈谈个人实战经验: 先上代码: 引入: html: js: 说明: 网上文章里提到的插件很多,但是好像并不是都有用(有点坑),实践之后发现 ...
jquery生成二维码图片
1.插件介绍 jquery.qrcode.min.js插件是jq系列的基于jq,在引入该插件之前要先引入jq.能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生 ...
laravel8实现生成二维码，二维码中间添加图片
第一步:安装composer composer require simplesoftwareio/simple-qrcode 1.3.* 第二步:在 config/app.php 注册服务提供者: S ...

jquery生成二维码怎么添加图片（两种方法）

jquery生成二维码怎么添加图片（两种方法）相关推荐

最新文章

热门文章