MutationObserver监测qrcodejs2二维码生成失败

qrcodejs2官方文档中没有给出回调或者通知用户什么时候二维码生成完毕，调研之后，此次用到了MutationObserver。

MutationObserver

MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品，该功能是DOM3 Events规范的一部分。

构造函数

MutationObserver()

创建并返回一个新的 MutationObserver ，它会在指定的DOM发生变化时被调用。

方法

disconnect()

阻止 MutationObserver 实例继续接收的通知，直到再次调用其observe()方法，该观察者对象包含的回调函数都不会再被调用。

observe()

配置MutationObserver在DOM更改匹配给定选项时，通过其回调函数开始接收通知。

takeRecords()

从MutationObserver的通知队列中删除所有待处理的通知，并将它们返回到MutationRecord对象的新Array中。

代码示例：

const qrcodeImg = document.querySelector('#' + id + ' canvas+img');
const observeConfig = { attributes: true };
const observeCb = function(mutationsList, observer) {mutationsList.forEach(function(mutation) {if (mutation.type.toLowerCase() === 'attributes' &&mutation.attributeName.toLowerCase() === 'src') {// console.log('qrcodeImg src done!', mutation.target.src)observer.disconnect()} else {const bmLoginUser = window.userInfo && window.userInfo.bmLoginUser || {};window.Owl && window.Owl.addError({name: '聚合配送-配送点管理-分餐箱管理：二维码生成出错',msg: `错误信息：qrcodejs2中new QRCode出错`}, {level: 'warn',tags: {...bmLoginUser}});}})
};if (typeof MutationObserver !== 'undefined') {const observer = new MutationObserver(observeCb);observer.observe(qrcodeImg, observeConfig);
}

MutationObserver监测qrcodejs2二维码生成失败相关推荐

qrcodejs2二维码生成js
<div class="qrcode" ref="qrCodeUrl"></div> <div class="rxpir ...
二维码生成 base64格式 Java
第一步, 加入pom. <dependency><groupId>com.google.zxing</groupId><a ...
java实现二维码生成及调用打印机打印
在开发二维码打印的过程中走过几次弯路,所以在这里特意将其记录下来留作备忘.一开始参考其他博主写的文章,有介绍通过编写JAVA后台代码来获取本地默认打印机的驱动实现打印.BUT!这样就导致在本地开发测试 ...
java 二维码生成和解析
2019独角兽企业重金招聘Python工程师标准>>> <dependency><groupId>com.google.z ...
支付宝支付第五集：二维码生成工具
支付宝支付第五集:二维码生成工具一.代码目录结构 BufferedImageLuminanceSource.java package com.dzy.alipay.qrcode;import c ...
vue二维码生成插件 - npm安装篇
vue二维码生成插件 - npm安装篇具体使用: 1. 安装: npm install vue-qr --save 2. 引入和声明 //在需要生成二维码的文件中引入比如qrCode.vue imp ...
图片下载_二维码生成
图片下载 /*** 图片类型* @param path 图片地址* @param id uuid* @param isAspose* @return* @throws IOException*/pri ...
iOS 花式二维码生成和二维码识别
iOS 原生的二维码识别非常之棒,反正比 ZXing 和 ZBar 效果都好些,所以以后打算尽量用原生的二维码识别,然后最近把原生的二维码生成也顺便做了一遍,并且在原有基础上加了一些样式参数,封了一个 ...
java二维码生成使用SSM框架搭建属于自己的APP二维码合成、解析、下载
java二维码生成使用SSM框架搭建属于自己的APP二维码合成.解析.下载自己用java搭建一个属于自己APP二维码合成网站.我的思路是这样的: 1.用户在前台表单提交APP的IOS和Andro ...