html5微信切换效果微信内置阅读器动态生成二维码并长按辨认

现如今环绕微信生态干系开拓已经非常常见，本期带来如何通过 qrcode.js 实现微信内置浏览器动态天生二维码并能够长按识别以及通过 html2canvas 天生图片并长按保存

说几个知识点

微信长按弹出识别选项的事理

微信客户端检测到用户长按img标签微信主动进行截屏并识别图片，二维码识别采取的是截屏而不是通过img标签微信识别成功后实行干系操作

Base64

html5微信切换效果微信内置阅读器动态生成二维码并长按辨认 JavaScript

Base64是网络上最常见的用于传输8Bit字节码的编码办法之一，Base64便是一种基于64个可打印字符来表示二进制数据的方法

Blob

HTML5中的Blob工具与MySQL中的BLOB工具有差异，HTML5中的Blob工具除了存放二进制数据外还可以设置这个数据的MINE类型，这相称于对文件的存储，其它很多二进制工具也是从这个工具继续的

canvas.toDataURL([type, encoderOptions])

type : 指定图片类型，默认值 image/pngencoderOptions : 为 image/jpeg 或 image/webp 类型的图片设置图片质量，取值0-1，超出则以默认值0.92替代浸染: 通过canvas进行转化图片准备事情

结合微信规范明确需求

微信img标签通过src属性可实现长按弹出选项(保存至手机，图片为二维码的情形下会涌现识别二维码)二维码图片若为本地图片或做事器图片(即不须要进行动态天生)只须要正常编写代码即可实现微信针对内置浏览器内的页面图片有着自己的一套适应逻辑与规范，canvas的图片和base64编码格式的图片在安卓与ios手机上会涌现不同的问题

确定实现方案

本例采取第三方js库实现天生二维码针对天生的base64编码的图片微信无法长按识别须要在前端进行格式和image工具重新转换天生的图片弹窗展示，避免涌现其他元素影响微信识别率开拓环境

开拓平台

MacOS

开拓环境

Vue + node

客户端环境

Google ChromeWechat Webview技能实现

本例的技能实现方案均在Vue项目环境下实现的

引入第三方js库

供应两种引入办法，两种办法是不同的js库，方便大家选择和利用

// 第一种办法// qrcode.js官方GitHub文档: https://github.com/davidshimjs/qrcodejs<script src="static/js/qrcode.js"></script>// 第二种办法npm install qrcodejs2import qrCode from 'qrcodejs2'组件中调用

HTML

<div class="qrcode-panel" id="qrcode"></div>

// 大略调用new QRCode(document.getElementById('qrcode'), 'your content');// new QRCode(element, option)// element 显示二维码的元素或该元素的 ID// option 参数配置// 标准调用var qrcode = new QRCode(document.getElementById("qrcode"), {text: "https://www.xxx.com?did=123456&id=123&userid=456",width: 160, //图像宽度height: 160, // 图像高度render: 'canvas', // 天生格式(table 和 canvas)colorDark : "#000000", //前景色colorLight : "#ffffff", //背景色correctLevel : QRCode.CorrectLevel.H // 容错级别});// 容错级别，可设置为：QRCode.CorrectLevel.L（最大 7% 的缺点能够被纠正）QRCode.CorrectLevel.M（最大 15% 的缺点能够被纠正）QRCode.CorrectLevel.Q（最大 25% 的缺点能够被纠正）QRCode.CorrectLevel.H（最大 30% 的缺点能够被纠正）// 其他公共方法QRCode.makeCode(text) // 设置二维码内容QRCode.clear() // 打消二维码重置 Image 工具

重置的缘故原由是原JS天生的 image 和 canvas 工具无法在微信端长按识别

var canvas = document.getElementsByTagName('canvas')[0];var img = this.convertCanvasToImage(canvas);document.getElementById("qrcode").append(img);convertCanvasToImage(canvas) {//新建Image工具var image = new Image();// canvas.toDataURL 返回的是一串Base64编码的URLimage.src = canvas.toDataURL("image/png");image.id = 'qrcodeImg';return image;}后续细节处理

至此，一个能够知足长按识别的动态二维码已经天生，不连续处理的话会有两张二维码，长按比拟就能看出，qrcode.js 天生的二维码长按无法识别，而经由重置之后的工具是可以实现此功能的。

我的处理办法是两个二维码都保留，将二维码图片进行重新定位，将重置的二维码图片置于不能识别二维码上层，不去频繁操作DOM节点的显示隐蔽。

天生的二维码通过 append 的办法插入到dom节点中，在关闭操作时须要将之前天生的 canvas 和 image 去除

微信内置浏览器天生canvas图片保存

上述教程可以实现动态天生二维码进行保存和长按识别，但是如果须要将HTML内容天生canvas保存就存在问题了。

针对保存须要把稳的几个问题：

canvas禁止跨域安卓微信长按不能保存base64图片微信限定Blob类型图片的保存利用 canvas.toDataURL 绘制时的类型利用 image/jpeg 进行保存技能选型

利用第三方JS库 html2canvas 进行处理

识别和天生事理：

脚本直接在用户浏览器上截取网页或部分网页的"屏幕截图""屏幕截图"基于DOM，因此它可能不是真实表示的100％准确，由于它没有制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图

存在的问题：

正是由于 html2canvas 不是基于真正的屏幕截图去识别处理，以是分开了文档流，或者文档流非常的元素会无法被截取下来html2canvas 只会截取到目标元素宽高范围内的内容对部分css样式支持不好，兼容性差的属性列表请后台留言获取

一些可能须要的参数

useCORS : 是否考试测验利用CORS从做事器加载图像async : 是否异步解析和呈现元素scale : 用于渲染的比例。
默认为浏览器设备像素比率window.devicePixelRatioallowTaint : 是否许可画布被污染，被污染的canvas是没法利用toDataURL()转base64流的，部分细节请后台留言获取更多 html2canvas 参数请后台留言获取引入第三方JS库

利用 html2canvas

import html2canvas from 'html2canvas'组件中调用

HTML

<div class="html2canvas-conetent" ref="canvasContent"><img src="/static/images/canvas.jpg"><span>测试Title</span></div><button @click="showCanvas()">天生canvas图片</button>

利用 html2canvas 推举的promise方法

showCanvas() {let self = this;html2canvas(self.$refs.canvasContent).then(function(canvas) { self.imgUrl = canvas.toDataURL(); self.showCanvasImg = true;});}// 异步解析调用和呈现元素showCanvas() {let self = this;html2canvas(self.$refs.canvasContent {async: true}).then(canvas => {self.imgUrl = canvas.toDataURL();self.showCanvasImg = true;});}实现效果

源码地址Github地址(请点击原文链接查看)