html2 canvas生成清晰的图片实现打印功能html2canvas生成的图片偏移不完整的解决方法html2canvas截图空白问题的解决使用html2canvas实现将html内容写入到canvas中生成图片html2canvas.js 实现页面截图html2 canvas svg不能识别的解决方案

 window.html2canvas(dom, { scale: scale, width: dom.offsetWidth, height: dom.offsetHeight }).then(function (canvas) { var context = canvas.getContext('2d'); context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; var src64 = canvas.toDataURL() }

 var context = canvas.getContext('2d'); context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false;

 getImgSize: function (str) { //获取base64图片大小，返回KB数字 var str = str.replace('data:image/jpeg;base64,', '');//这里根据自己上传图片的格式进行相应修改 var strLength = str.length; var fileLength = parseInt(strLength - (strLength / 8) * 2); // 由字节转换为KB var size = ""; size = (fileLength / 1024).toFixed(2); return parseInt(size); }

 compress: function (base64String, w, quality) { var getMimeType = function (urlData) { var arr = urlData.split(','); var mime = arr[0].match(/:(.*?);/)[1]; // return mime.replace("image/", ""); return mime; }; var newImage = new Image(); var imgWidth, imgHeight; var promise = new Promise(function (resolve) { newImage.onload = resolve; }); newImage.src = base64String; return promise.then(function () { imgWidth = newImage.width; imgHeight = newImage.height; var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); if (Math.max(imgWidth, imgHeight) > w) { if (imgWidth > imgHeight) { canvas.width = w; canvas.height = w * imgHeight / imgWidth; } else { canvas.height = w; canvas.width = w * imgWidth / imgHeight; } } else { canvas.width = imgWidth; canvas.height = imgHeight; } ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height); var base64 = canvas.toDataURL(getMimeType(base64String), quality); return base64; }) }

 self.compress(src64,width,1).then(function(base){ src64 = base src64 = src64.replace(/data:image\/.*;base64,/, '') // 调用接口保存图片 }).catch(function(err){ dialog.tip(err.message, dialog.MESSAGE.WARN); })