html2canvas生成清晰的图片实现打印的示例代码_html5教程技巧

来源:脚本之家  责任编辑:小易  

两种方法控制元素大小,每页元素高度等于pdf的每页高度把每一页内容切成多个图片然后合成一个pdfwww.zgxue.com防采集请勿采集本网。

前言

最近由于公司业务要求,需要完成一个一键生成照片图片打印总图的功能

这是因为图像的采样方式不够好造成的 解决方案是自己写算法进行平均采样 实现方式有两种,一种是js对像素点进行手动合并采样,具体算法可以用这个:github。com

html2canvas是一个非常强大的截图插件,很多生成图片和打印的场景会用到它

canvas的todataurl一般是保存的是PNG的BASE64编码,可以用jsp将base64那长一串字符还原成PNG图片,如果要保持JPG,可以再进行格式转换,您的思路没错,祝您成功! 本回答

但是效果很模糊 ,本文主要记录一下如果解决模糊的问题以及各种参数如何设置

你有没试过将你取到的内容赋值到一个可视容器里面,然后测试。长按图片的话,手机会自动弹出选项菜单的。既然你肯定已经用canvas截取到目标,那还有什么问题? 本回答由网

目录

    基本用法 处理模糊问题 细节问题-压缩base64, 导出处理

不光绘制图片,在高分屏下,绘制文字和线条都会出现模糊的现象,GitHub上有一个hidpi-canvas-polyfill可以很好的解决这个问题,但是没有对图片进行处理。如果你

基本用法

//初始化调用 $(function(){ placeholder.init(); //placeholder.init('#div1'); //动态加载后,可这样调用 });

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的一下处理

html2canvas可能对某些属性不兼容,你可以用div模拟textarea请采纳内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • html2 canvas生成清晰的图片实现打印功能
  • 前端实现打印图像功能
  • 一个不错的html 打印代码支持翻页
  • css2 打印属性让打印html文档不出问题
  • 将xhtml css页面转换为打印机页面
  • 将xhtml css页面转换为打印机页面
  • html 打印相关操作与实现详解
  • html2canvas 截图不全问题
  • 使用jspdf和html2canvas导出pdf文件分页时如何正常留白?
  • 基于jquery与html5 canvas生成pdf插件jspdf为什么导出页面内容不全 ...
  • IE11浏览器不支持html2canvas
  • HTML5 canvas 画图, 大图缩小时清晰度问题
  • 求救.为什么使用html2canvas 转化的canvas 不能调
  • html2canvas区域截图通过点击转换为微信长按可保存的Image 百度...
  • HTML5用图片生成canvas画布,为什么图片会模糊?
  • html2canvas中div转化为图片时候会浏览器会加载下,请问如何做到无...
  • 如何让html2canvas捕抓超出滚动条的部分
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html5html2canvas图片打印html2 canvas生成清晰的图片实现打印功能前端实现打印图像功能一个不错的html 打印代码支持翻页css2 打印属性让打印html文档不出问题将xhtml css页面转换为打印机页面将xhtml css页面转换为打印机页面html 打印相关操作与实现详解html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧css 如何让背景图片拉伸填充避免重复显示html5 input placeholder 颜色修改示例基于第一个phonegap(cordova)的应用详解 html5配合css3实现带提示文字的输入框(摆脱js)html5定位获取当前位置并在百度地图上显示将html5 canvas的内容保存为图片借助todataurl实现html5中如何显示视频呢 html5视频播放demo让ie支持html5的方法微信浏览器取消缓存的方法html5的存储方式sessionstorage和localstorage详解基于html5+tracking.js实现刷脸支付功能html中meta标签及keywords详解移动端h5页面根据屏幕适配的四种方案html5移动端自适应布局的实现html里显示pdf、word、xls、ppt的方法示例html5 直播疯狂点赞动画实现代码 附源码html5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷canvas 基础之图像处理的使用用canvas显示验证码的实现html5给汉字加拼音收起展开组件的实现代码
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved