html2 canvas生成清晰的图片实现打印功能


Posted in HTML / CSS onSeptember 23, 2019

最近由于公司业务要求,需要完成一个一键生成照片图片打印总图的功能

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生成清晰的图片实现打印功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
css3实现超立体3D图片侧翻倾斜效果
Apr 16 HTML / CSS
纯CSS3实现圆角效果(含IE兼容解决方法)
May 07 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
Ratchet 模态框的实现
Aug 19 HTML / CSS
h5封装下拉刷新
Aug 25 HTML / CSS
详解CSS伪元素的妙用单标签之美
May 25 HTML / CSS
html网页引入svg图片的4种方式
Aug 05 HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 #HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 #HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 #HTML / CSS
canvas生成带二维码海报的踩坑记录
Sep 11 #HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
Sep 11 #HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
Sep 09 #HTML / CSS
做一个能自适应高度的textarea的示例代码
Sep 06 #HTML / CSS
You might like
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
php实现图片添加描边字和马赛克的方法
2014/12/10 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
js 利用className得到对象的实现代码
2011/11/15 Javascript
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
js中function()使用方法
2013/12/24 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
详解node中创建服务进程
2017/05/09 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
tornado框架blog模块分析与使用
2013/11/21 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
KIKO比利时官网:意大利彩妆品牌
2017/07/23 全球购物
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
证券期货行业个人的自我评价
2013/12/26 职场文书
仓库管理员岗位职责
2014/03/19 职场文书
销售合作意向书范本
2015/05/08 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
2016银行求职自荐信
2016/01/28 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书