html2canvas生成清晰的图片实现打印的示例代码


Posted in HTML / CSS onSeptember 30, 2019

前言

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

html2canvas是一个非常强大的截图插件,很多生成图片和打印的场景会用到它

但是效果很模糊 ,本文主要记录一下如果解决模糊的问题以及各种参数如何设置

目录

  1. 基本用法
  2. 处理模糊问题
  3. 细节问题-压缩base64, 导出处理

基本用法

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的一下处理

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
使用HTML5和CSS3表单验证功能
May 05 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 HTML / CSS
深入浅析HTML5中的SVG
Nov 27 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 HTML / CSS
canvas像素点操作之视频绿幕抠图
Sep 11 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
Dec 18 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
Html5页面获取微信公众号的openid的方法
May 12 HTML / CSS
使用HBuilder制作一个简单的HTML5网页
Jul 07 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 #HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 #HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 #HTML / CSS
使用Html5中的cavas画一面国旗
Sep 25 #HTML / CSS
关于canvas绘制模糊问题的解决方法
Sep 24 #HTML / CSS
html svg生成环形进度条的实现方法
Sep 23 #HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 #HTML / CSS
You might like
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
php遍历CSV类实例
2015/04/14 PHP
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
Node.js pipe实现源码解析
2017/08/12 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
javascript对HTML字符转义与反转义
2018/12/13 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
Python Tkinter简单布局实例教程
2014/09/03 Python
简述Python中的进程、线程、协程
2016/03/18 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
关于Python的一些学习总结
2018/05/25 Python
PHP统计代码行数的小代码
2019/09/19 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
python 如何将office文件转换为PDF
2020/09/22 Python
英国最受欢迎的手表网站:Watch Shop
2016/10/21 全球购物
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
关键字final的用法
2013/10/02 面试题
公司试用期员工自我评价
2014/09/17 职场文书
羊脂球读书笔记
2015/06/30 职场文书
学校远程教育工作总结
2015/08/11 职场文书
2019学生会干事辞职信
2019/06/27 职场文书
MySQL的存储过程和相关函数
2022/04/26 MySQL