酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
酷站

【云小站】新老客都返现+现金红包+瓜分60万奖池
酷站

html5

旗下栏目: html css xml html5 DW bootstrap Frontpage教程

html2canvas生成清晰的图片实现打印的教程

来源:互联网搜集 作者:秩名 人气: 发布时间:2019-10-02
本篇文章主要介绍了html2canvas生成清晰的图片实现打印的教程,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

最近由于公司业务要求,需要完成一个一键生成照片图片打印总图的功能,html2canvas是一个非常强大的截图插件,很多生成图片和打印的场景会用到它,但是效果很模糊 ,本文主要记录一下如果解决模糊的问题以及各种参数如何设置

目录

基本用法

处理模糊问题

细节问题-压缩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的一下处理。

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://www.jb51.net/html5/695745.html

相关文章

  • 自适应与响应式的区别

    自适应与响应式的区别

    根据日常开发经验及网上相关资料,用简单通俗易懂的大白话分析 自适应 跟 响应式 的区别。 注: 本文只分析自适应跟响应式的区别以及了解其由来的背景,不在于讨论其使用的方法 一、什么是自适应布局 自适应布局就是宽度自适用布局,在不......
    02-11
  • HTML5自定义mp3播放器源码教程

    HTML5自定义mp3播放器源码教程

    audio对象 src兼容.ogg .wav .mp3 audio controls src=data/imooc.wav/audio width autoplay loop muted静音 audio controls src=data/imooc.wav autoplay loop width=500 height=500 muted/audio 播放play() var myAudio = new Audio();......
    01-08
  • 使用canvas实现黑客帝国数字雨效果介绍

    使用canvas实现黑客帝国数字雨效果介绍

    使用canvas实现黑客帝国数字雨 效果图: 代码如下: !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 meta http-equiv=X-UA-Compatible content=ie=edge titleDocu......
    01-05
  • 详解使用html2canvas实现将html内容写入到canvas中生成图片

    详解使用html2canvas实现将html内容写入到canvas中生成图片

    之前我们简单的了解了canvas的基本用法,这里我们来了解下如何将html内容写入到canvas中生成图片,这里我使用到了html2canvas插件,这个插件是基于canvas实现的 html2canvas官网: http://html2canvas.hertzen.com/ 一:下载html2canvas插......
    01-05
  • 详解HTML文本属性&颜色控制属性

    详解HTML文本属性&颜色控制属性

    一、文本装饰的属性 1.格式:text-decoration:underline; 2.取值: (1)underline代表下划线 (2)line-through代表删除线 (3)overline代表上划线 (4)none代表什么格式都没有(默认是这个属性) 注意:none的大多数用处在我们使用a......
    12-18
  • 关于html字符串正则判断和匹配的使用介绍

    关于html字符串正则判断和匹配的使用介绍

    最近在写一个组件,需要传入html字符串,里面用到了很多正则来判断是否是html标签或者匹配标签内的文本等,这里记录下。 如何判断传入的字符串包含一个闭合html标签 /\/?[a-z][\s\S]*/i 这个其实并不能判断标签闭合的完整性或者顺序等,......
    12-13
  • H5页面适配iPhoneX的教程

    H5页面适配iPhoneX的教程

    iPhoneX 打消了物理按键,改成底部小黑条,这一窜改导致网页呈现了比力难堪的屏幕适配问题。对付网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理惩罚,所以我们只需要存眷底部与小黑条的适配问题即可(即常见的吸底导航、返回顶......
    12-03
  • Html5之自定义属性(data-,dataset)

    Html5之自定义属性(data-,dataset)

    定义 H5为我们提供了以 data- 为前缀定义需要的属性即可设置自定义属性 div id=box1 data-name=Musk/divdiv id=box2 data-full-name=Elon Musk/div 获取 使用H5自定义属性对象dataset来获取 let box1 = document.getElementById(box1);le......
    11-19
  • 移动端html5判断是否滚动到底部并且下拉加载

    移动端html5判断是否滚动到底部并且下拉加载

    如何判断滚动是否滚动到了底部? 首先要了解的知识 scrollHeight,clientHeight,scrollTop scrollHeight 只读属性,高度包括所有内容,包含内边距,但不把水平滚动条、边框和外边距算在内。 clientHeight 也是只读属性,没有定义CSS或者内联......
    11-19
  • 5分钟实现Canvas鼠标跟随动画背景方法

    5分钟实现Canvas鼠标跟随动画背景方法

    关于Canvas制作炫酷背景,我会在git上不定时去更新,并会附上详细的解析,如果有喜欢的话,可以到git上瞧瞧 gitHub传送门 = 前言 相信很多前端小白都看过这样的背景动画,也好奇如何去实现这种效果!将这种效果应用到自己的个人网站上,......
    11-19

最新更新