html5自动打印图片,html2canvas生成清晰的图片实现打印代码示例
本篇文章小编给大家分享一下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的一下处理
html5自动打印图片,html2canvas生成清晰的图片实现打印代码示例相关推荐
- 学习使用html2canvas生成渐变色背景图片
学习使用html2canvas生成渐变色背景图片 全部代码 html2canvas官网 生成图片的下载 全部代码 <!DOCTYPE html> <html><head& ...
- iOS View生成清晰的图片
一般的view生成图片方法 UIGraphicsBeginImageContext(view.bounds.size);[view.layer renderInContext:UIGraphicsGe ...
- Html2canvas——生成画布时图片显示空白
问题:用html2canvas生成画布图片,再转成pdf.生成图片时内容结构里的图片显示空白. 解决: 首先服务器设置图片允许跨域,如阿里云腾讯云配置跨域规则.其次图片设置crossOrigin=&q ...
- 输入文字自动生成图片_批量生成变化的图片文字海报
最近"双十一"活动大家已经进入了鸡血状态,运营的小伙伴给设计出了个难题,搞的设计小伙伴们进入了癫狂模式.本着工具提升效率的原则,我又开始去研究如何批量修改图片内容了,小小的成果和大 ...
- java 生成证书图片_java生成自定义证书图片4
终于到了生成自定义证书图片的最后一步,pdf转图片我选择使用pdfbox库,以下是工具类: packagecom.x.certificate.pdf;importjava.awt.image.Buff ...
- eoLinker-API_Shop_验证码识别与生成类API调用的代码示例合集:六位图片验证码生成、四位图片验证码生成、简单验证码识别等...
以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 六位图片验证码生成:包括纯数字.小写字母.大写字母.大小写混合.数 ...
- java 生成证书图片_java生成自定义证书图片1 - 制作证书word模板
最近做项目遇到一个需求,生成指定数据的证书图片(比如毕业证,在空的模板中输入自定义的姓名.日期等信息),尝试了许多方法,最终完美地实现了这个需求. 以下内容为制作证书图片的第一步,制作证书word模板 ...
- canva怎么拼接图片_canvas 生成和合并图片
先说背景:工作中遇到一个问题,file组件上传图片,file是可以上传n张图片:但是,后台逻辑历史原因,只能展现一张.因此:考虑到成本,决定在前端将多张图片合并成一张给后端. 先上代码 _mergeI ...
- html2canvas 生成h5海报图片底部有白边
这个大概率就是因为定位最后拍照的那一刻偏移导致的 如果背景是一个背景颜色的话 其实还是比较好搞的将 hmlt2canvas的背景图改成和背景色一样就好了 html2canvas(container, ...
最新文章
- 软件自动测试框架,软件自动化测试框架的研究和实现
- c语言素数个数_C语言试题及答案
- node实现简单的群体聊天工具
- sit是什么环境_软件环境常识 --dev sit uat
- python邮箱爆破_Python在线爆破邮箱账号密码测试代码(亲测可用)
- IDEA 在头注解上添加用户名称和时间
- SELinux 基础命令
- bzoj 4236: JOIOJI(map+pair)
- 1.TCP/IP 详解卷1 --- 概述
- asp.net连接mssql server的方式
- Enterprise Library v5.0 -- Data Access Application Block 开发向导(2)
- GreenSock Animation Platform
- 这可能不只是一篇面经(BAT面试)
- 易语言 内存调用html文件夹,将文件移到指定文件夹 易语言移动文件到指定文件夹内...
- 将心比心,我要有点骨气
- ubuntu18.04环境下为UR3配置MoveIt!运动学插件IKFAST(一)
- PAT乙级刷题之路1055 集体照 (25分)
- 【面试必备】编程学java还是c
- 使用matlab和GMT联合绘制带有省界的中国地图
- 时钟频率(HZ)与数据传输速率(bit/s)
热门文章
- effective c++:virtual函数在构造函数和析构函数中的注意事项
- 数据结构之队列的应用(实现斐波那契数列)
- ssh问题:ssh_exchange_identification: Connection closed by remote host
- 案例29-购物车提交订单
- (转)【MySQL】sync_binlog innodb_flush_log_at_trx_commit 浅析
- 关于Android中的SlidingMenu中的用法
- 计算机网络即时通信系统设计_天天玩微信,Spring Boot 开发私有即时通信系统了解一下...
- 7、扫雷游戏地雷数计算
- 微课|Python编写代理服务器程序(48分钟)
- Python+pandas使用交叉表分析超市营业额数据