需求：将网页生成图片，用户自行长按图片进行保存图片，再分享朋友圈。其中，都可识别图中的二维码。（二维码过小会识别不出）
首先，先来科普一下微信网页识别二维码原理：截屏识别，当客户端发现用户在网页的img标签内进行长按操作时，会立刻截屏并且启动二维码识别算法。https://www.cnblogs.com/daipi...
发现官网中的html2canvas.js插件存在一些bug：
1.截图不全，不完整 ???解决方案： ???//修改源码，添加自定设置高度宽度 ???var width = options.width != null ? options.width : node.ownerDocument.defaultView.innerWidth;
var height = options.height != null ? options.height : node.ownerDocument.defaultView.innerHeight;return renderDocument(node.ownerDocument, options, width, height, index).then(function (canvas) {** ???if (typeof(options.onrendered) === "function") { ???????log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas"); ???????options.onrendered(canvas); ???} ???return canvas;}); 2.图片像素模糊： 解决方案：添加dpi参数 ?function CanvasRenderer(width, height) { ???????????????Renderer.apply(this, arguments); ???????????????this.canvas = this.options.canvas || this.document.createElement("canvas"); ???????????????if (!this.options.canvas) { ???????????????????if (this.options.dpi) { ???????????????????????this.options.scale = this.options.dpi / 96 ???????????????????} ???????????????????this.canvas.width = width; ???????????????????this.canvas.height = height ???????????????} ???????????????this.ctx = this.canvas.getContext("2d"); ???????????????this.taintCtx = this.document.createElement("canvas").getContext("2d"); ???????????????this.ctx.textBaseline = "bottom"; ???????????????this.variables = {}; ???????????????log("Initialized CanvasRenderer with size", width, "x", height) ?} ?最后写写html2canvas的使用方法：
var height = $('.teacher_page').scrollTop() + $('.teacher_page').outerHeight(true); ????html2canvas($(".teacher_page"),{ ?????????height:height, ???????// window.devicePixelRatio是设备像素比 ????????dpi: 192,//放大像素(2倍)，以免图片模糊 ????}).then(function(canvas) { ????????var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); ?????????$('.popBody').html('<img alt="二维码" src="'+imgUri+'" id="canvas"/>'); ???});官网：http://html2canvas.hertzen.com/
下载地址：https://www.bootcdn.cn/html2c...
原文地址：https://segmentfault.com/a/1190000016876592
html2canvas.js网页截图功能
原文地址：https://www.cnblogs.com/lalalagq/p/9901446.html