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 相关文章推荐
详解CSS样式中的 !important * _ 符号
Mar 09 HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
让IE下支持Html5的placeholder属性的插件
Sep 02 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
Jan 03 HTML / CSS
HTML5录音实践总结(Preact)
May 07 HTML / CSS
css实现文章分割线样式的多种方法总结
Apr 21 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
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
js 上传图片预览问题
2010/12/06 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
python分割文件的常用方法
2014/11/01 Python
浅谈五大Python Web框架
2017/03/20 Python
python自定义时钟类、定时任务类
2021/02/22 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
python实现简单猜单词游戏
2020/12/24 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
冰淇淋店创业计划书范文
2013/12/27 职场文书
物业保安员岗位职责
2014/03/14 职场文书
经典禁毒标语
2014/06/16 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
旷课检讨书500字
2014/10/14 职场文书
python通过新建环境安装tfx的问题
2022/05/20 Python