前言
最近由于公司业务要求，需要完成一个一键生成照片图片打印总图的功能
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的一下处理
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
web前端基础之HTML5语义化新标签学习笔记（8）学会用语义化标签
网友评论