html2 canvas生成清晰的图片实现打印功能
发布时间：2019-09-23 14:46:48 作者：佚名 
我要评论
我要评论html2canvas是一个非常强大的截图插件，很多生成图片和打印的场景会用到它。接下来通过本文给大家介绍html2 canvas生成清晰的图片实现打印功能，感兴趣的朋友跟随小编一起看看吧
最近由于公司业务要求，需要完成一个一键生成照片图片打印总图的功能
html2canvas是一个非常强大的截图插件，很多生成图片和打印的场景会用到它
但是效果很模糊 ，本文主要记录一下如果解决模糊的问题以及各种参数如何设置
基本用法
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()
}
scale 为放大倍数 ，我这里设置为4 ，越高理论上越清晰
dom.offsetWidth height: dom.offsetHeight 直接取得需要转为图片的dom元素的宽高
处理模糊问题
var context = canvas.getContext('2d');
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
这段代码去除锯齿，会使图片变得清晰，结合scale放大处理
细节问题
如果生成的base64太大，会损耗性能，需要压缩base64
首先可能需要获取base64的大小
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);
}
然后根据获取的大小判断你是否要压缩base64
压缩的代码如下
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);
})
本文主要包括，html2canvas使用，参数，如何保证图片的清晰度和base64的一下处理
总结
以上所述是小编给大家介绍的html2 canvas生成清晰的图片实现打印功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
这篇文章主要介绍了html2canvas生成的图片偏移不完整的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小2020-05-19
这篇文章主要介绍了html2canvas截图空白问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习2020-03-24
使用html2canvas实现将html内容写入到canvas中生成图片
这篇文章主要介绍了使用html2canvas实现将html内容写入到canvas中生成图片,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下2020-01-03
html2canvas是一可以在网页上实现页面截图的js，给大家提供包括html2canvas.js 和html2canvas.min.js以及应用示例2019-06-18- 最近很多朋友联系小编在截取网页成图片的时候，html2+canvas不能识别 svg的问题，正好这个问题我也遇到过，下面我把处理思路分享到脚本之家平台，对html2 canvas svg不能识2021-06-03
最新评论