需求:將網頁生成圖片,用戶自行長按圖片進行保存圖片,再分享朋友圈。其中,均可識別圖中的二維碼。(二維碼太小會識別不出)html
首先,先來科普一下微信網頁識別二維碼原理:截屏識別,當客戶端發現用戶在網頁的img標籤內進行長按操做時,會馬上截屏而且啓動二維碼識別算法。https://www.cnblogs.com/daipi...node
發現官網中的html2canvas.js插件存在一些bug:算法
1.截圖不全,不完整 解決方案: //修改源碼,添加自定設置高度寬度
var width = options.width != null ? options.width : node.ownerDocument.defaultView.innerWidth;canvas
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; // 1 CSS inch = 96px. } if (this.options.scale) { this.canvas.style.width = width + 'px'; this.canvas.style.height = height + 'px'; this.canvas.width = Math.floor(width * this.options.scale); this.canvas.height = Math.floor(height * this.options.scale); this.ctx.scale(this.options.scale, this.options.scale); } else { 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) } return parser.ready.then(function() { log("Finished rendering"); var canvas; if (options.type === "view") { canvas = crop(renderer.canvas, {width: renderer.canvas.width, height: renderer.canvas.height, top: 0, left: 0, x: 0, y: 0}); } else if (node === clonedWindow.document.body || node === clonedWindow.document.documentElement || options.canvas != null) { canvas = renderer.canvas; } else if (options.scale) { var origBounds = {width: options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: 0, y: 0}; var cropBounds = {}; for (var key in origBounds) { if (origBounds.hasOwnProperty(key)) { cropBounds[key] = origBounds[key] * options.scale; } } canvas = crop(renderer.canvas, cropBounds); canvas.style.width = origBounds.width + 'px'; canvas.style.height = origBounds.height + 'px'; } else { canvas = crop(renderer.canvas, {width: options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: 0, y: 0}); } cleanupContainer(container, options); return canvas; });
參考連接:https://www.jianshu.com/p/f40...
最後寫寫html2canvas的使用方法:微信
var height = $('.teacher_page').scrollTop() + $('.teacher_page').outerHeight(true); html2canvas($(".teacher_page"),{ height:height, // window.devicePixelRatio是設備像素比 dpi: window.devicePixelRatio, }).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...app