html2canvas.js插件截图空白问题
发现使用
html2canvas.js插件截图保存在前端很方便。学习过程中遇到的问题,主要负责将html标签转化为图片。
canvas2image.js是一个展示图片的canvas插件,解决微信分享失败就靠这个插件。
截图出现空白和截图不全。
问题原因:
html2canvas.js插件截图是基于body标签的,如果body存在滚动条就会出现截图空白的情况。如何避免:
关键点:在截图前将滚动条位置设置在顶部。截图时,截图选择内容标签不是body,就将截图宽度和高度设置为选择标签的宽高在截图。 具体代码:
<!-- 海报弹窗 -->
<div class="dialog flex" id="alert10" style="display:none" >
<div class="poster_con"> <div class="poster" id="contbox">
<div class="qrcode" id="qrcode"> </div>
</div> <div class="poster_btn"><button id="down">点击保存图片分享给好友</button><a id="down1" class="down" href="" download="downImg" style="display:none"></a></div>
</div> </div>
浏览器
下载图片js代码:
$("#down").click(function(){
// 截图前先讲滚动条置顶
$('html,body').animate({'scrollTop':0});
// document.getElementById("contbox") 需要截图的是div标签
html2canvas(document.getElementById("contbox"),
{logging:false,
width:$("#contbox").width(),// 宽设置为div标签的宽
height:$("#contbox").height(),// 高设置为div标签的高
useCORS:true}).then(function(canvas) {
//将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了
var timestamp = Date.parse(new Date());
//把截取到的图片替换到a标签的路径下载
$("#down1").attr('href',canvas.toDataURL("image/png"));
console.log(canvas.toDataURL("image/png"));
//下载下来的图片名字
$("#down1").attr('download',timestamp + '.png') ;
$("#down1")[0].click();
//document.body.appendChild(canvas);
}); });
微信分享长按图片分享js代码:
$("#down").click(function(){
// 截图前先讲滚动条置顶
$('html,body').animate({'scrollTop':0});
$('body').css({'overflow':'hidden'})
// document.getElementById("contbox") 需要截图的是div标签
html2canvas(document.getElementById("contbox"),
{logging:false,
width:$("#contbox").width(),// 宽设置为div标签的宽
height:$("#contbox").height(),// 高设置为div标签的高
useCORS:true}).then(function(canvas) {
// 将canvas转为图片
var img = Canvas2Image.convertToImage(canvas,$("#contbox").width()*2,
$("#contbox").height()*2);
// 图片添加到页面中,在微信里长按添加的img图片就可以正常使用微信自带的长按图片分享功能
$('body').append(img);
$('body').css({'overflow':'scroll'}) }); });
html2canvas.js插件截图空白问题的更多相关文章
- html2canvas.js网页截图功能
需求:将网页生成图片,用户自行长按图片进行保存图片,再分享朋友圈.其中,都可识别图中的二维码.(二维码过小会识别不出) 首先,先来科普一下微信网页识别二维码原理:截屏识别,当客户端发现用户在网页的im ...
- html2canvas JS截图插件
github/download:https://github.com/niklasvh/html2canvas/releases 参考文章:基于html2canvas实现网页保存为图片及图片清晰度优化 ...
- IText&Html2canvas js截图 绘制 导出PDF
Html2canvas JS截图 HTML <div id="divPDF"> 需要截图的区域 </div> JS <script src=" ...
- js实现html转pdf+html2canvas.js截图不全的问题
最近做项目中遇到要把整个页面保存为PDF文件,网上找了一下实现的方法都是 html2canvas.js+jsPdf.js 来实现.实现的过程是 先用html2canvas.js把html页面转成图片, ...
- 使用html2canvas.js实现页面截图并显示或上传
最近写项目有用到html2canvas.js,可以实现页面的截图功能,但遭遇了许多的坑,特此写一篇随笔记录一下. 在使用html2canvas时可能会遇到诸如只能截取可视化界面.截图没有背景色.svg ...
- 使用 html2canvas 实现浏览器截图
基于上一篇<h5 本地上传图片预览 源码下载>,今天分享一个图片上传后, 根据所上传的图片颜值随机生成一个答案, 并且可以生成一张专属于自己的名片. 首先上传预览我们已经实现了, 所以接下 ...
- web前端常用js插件
第一款:截图插件html2Canvas.js html2是一款强大的截图插件,只需引入js文件,依照官方给定的截图方法,就能截取对应DOM区域的内容.对于有些截图出现模糊偏移的问题,网上也有一堆解决方 ...
- html2canvas实现浏览器截图的原理(包含源码分析的通用方法)
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师. 官方网站:devui.design Ng组件库:ng-devui(欢 ...
- 使用html2canvas实现浏览器截图
最近做项目为了解决全局异常信息记录,研究了一下浏览器全屏截图功能,方便用户发现异常时能够快速截图发给管理员.最终记录的异常信息如下,上面的[截图报告管理员]就是使用html2canvas前端插件实现的 ...
随机推荐
- 简单使用媒体查询@media
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. 那媒体查询该如何使用呢? 一.铺垫 1.首先我们在使用 @media 的时候需要 ...
- P2432 zxbsmk爱查错
描述:https://www.luogu.com.cn/problem/P2432 给你一个主串以及若干个子串,求最少需要删除几个字母,使得主串能由一些子串组成. dp [ i ] 表示前 i 个字符 ...
- Centos7下tomcat关闭异常问题
目录 出错原因 解决方法 出错原因 在阿里云服务器上买的轻量级应用服务器,装上了tomcat,访问tomcat自带的首页,8080端口,第一次启动成功了,关闭也正常,但在服务器重启后,或者第二次启 ...
- word 小技巧 方框中 打 对勾
方框中 打 对勾 称为 复选框 控件,单击鼠标,在两种符号中切换. 设置步骤 1. 将隐藏的"开发工具"选项卡,显示出来 2. 在所需位置,插入复选框 3. 在属性中,设置复选框 ...
- 面试官:你说你懂动态代理,那你知道为什么JDK中的代理类都要继承Proxy吗?
之前我已经写过了关于动态代理的两篇文章,本来以为这块应该没啥问题,没想到今天又被难住了- 太难了!!! 之前文章的链接: 动态代理学习(一)自己动手模拟JDK动态代理. 动态代理学习(二)JDK动态代 ...
- 动态代理学习(一)自己动手模拟JDK动态代理
最近一直在学习Spring的源码,Spring底层大量使用了动态代理.所以花一些时间对动态代理的知识做一下总结. 我们自己动手模拟一个动态代理 对JDK动态代理的源码进行分析 文章目录 场景: 思路: ...
- 将csv文件导入sql数据库
有一个csv文件需要导入到Sql数据库中,其格式为 “adb”,"dds","sdf" “adb”,"dds","sdf" ...
- MinorGC前检查
- 一文教你快速搞懂 FOC ramp function 斜坡函数的作用和实现
文章目录 定义 程序的实现 matlab 程序 C语言程序 定义 x(t)={0,t<0At,t≥0 x(t) = \begin{cases} 0,t<0\\ At,t \ge 0\\ \ ...
- web概念简述,HTML学习笔记
今日内容 1. web概念概述 2. HTML web概念概述 * JavaWeb: * 使用Java语言开发基于互联网的项目 * 软件架构: 1. C/S: Client/Server 客户端/服务 ...