js生成带log的二维码(qrcodejs)

最新推荐文章于 2022-06-16 15:56:04 发布

weixin_30505485

最新推荐文章于 2022-06-16 15:56:04 发布

阅读量6.2w

点赞数

文章标签： 5g

原文链接：http://www.cnblogs.com/fanlinqiang/p/11228080.html

版权

本文介绍了如何使用qrcodejs库在JavaScript中生成带log的二维码。通过CodePen示例展示了生成过程。同时，讨论了在Canvas画图时遇到的远程图片跨域问题，解释了canvas被污染的原因——防止个人信息泄露。为解决这个问题，提出了两种方案：开启服务器跨域设置或确保图片与服务在同一域名下。

摘要由CSDN通过智能技术生成

github: qrcodejs

cdn: http://static.runoob.com/assets/qrcode/qrcode.min.js

#qrcode

#qrcode
    margin: 20px

// 生成二维码图片
let tmp = document.createElement('div');
let qrcode = new QRCode(tmp, {
   text: "https://cn.vuejs.org/v2/guide/",
   width: 128,
   height: 128,
   colorDark : "#000000",
   colorLight : "#ffffff",
   useCanvas: true,
   correctLevel : QRCode.CorrectLevel.H
});
// 加载logo
let logo = new Image();
//logo.crossOrigin = 'Anonymous';
//logl.src = 'https://cn.vuejs.org/images/logo.png';
logo.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAACLlBMVEVMaXFBuINBuIM8enI/nnxBuINBuINBuIM8enJBuIM8enJBuINBuINBuIM8enJBuIM8enJBuINBuIM7eXFBuINBuIM8eXFBuINBuIM8eHFBuIM8eXFBuIM8eHBBuIM8eHBBuIM8d3BBuINBuIM8d3BBuINBuINBuIM8dnBBuINBuIM8dnBBuINBuIM7dXBBuINBuIM8dG9BuINBuIM8dG9BuIM8dG9BuINBuIM8c29BuINBuIM7cm5BuINBuIM7cW5BuIM7cW9BuINBuINBuIM7cW5BuINBuINBuIM7b21BuINBuIM6b21BuIM7bm1BuINBuIM7bW1BuINBuIM6bGxBuINBuIM6a2xBuIM6a2xBuINBuIM6amxBuIM6aWtBuINBuIM6aGpBuINBuIM6ZmpBuINBuIM5ZGlBuIM5Y2lBuINBuIM5YWhBuINBuIM5YGdBuIM4XmdBuINBuIM4XGZBuINBuIM4WmVBuIM3WGRBuIM3V2RBuINBuIM3VGNBuIM2UmI