html2canvas生成清晰的图片实现打印的示例代码_打印canvas生成图片 - CSDN文库

151 浏览量更新于2023-05-04 评论收藏 44KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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) {

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38685521

粉丝: 3
资源: 935

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈