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 相关文章推荐
CSS3 特效范例整理
Aug 22 HTML / CSS
详解CSS3中@media的实际使用
Aug 04 HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
详解Html5原生拖拽操作
Jan 12 HTML / CSS
HTML5 Canvas标签使用收录
Jul 07 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
Jul 22 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
Apr 05 HTML / CSS
有关HTML5页面在iPhoneX适配问题
Nov 13 HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 HTML / CSS
分享几个实用的CSS代码块
Jun 10 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代码
2008/04/09 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
javascript实现微信分享
2014/12/23 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
Vue加载json文件的方法简单示例
2019/01/28 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
基于vue、react实现倒计时效果
2019/08/26 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
vue实现评论列表功能
2019/10/25 Javascript
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
python爬取个性签名的方法
2018/06/17 Python
pandas 选择某几列的方法
2018/07/03 Python
wxPython实现画图板
2020/08/27 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
经典c++面试题二
2015/08/14 面试题
百度吧主申请感言
2014/01/12 职场文书
写求职信有什么意义
2014/02/17 职场文书
支部组织生活会方案
2014/06/10 职场文书
小学生植树节活动总结
2014/07/04 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
义卖募捐活动总结
2015/05/09 职场文书
公司安全管理制度范本
2015/08/05 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python