发现使用

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插件截图空白问题的更多相关文章

  1. html2canvas.js网页截图功能

    需求:将网页生成图片,用户自行长按图片进行保存图片,再分享朋友圈.其中,都可识别图中的二维码.(二维码过小会识别不出) 首先,先来科普一下微信网页识别二维码原理:截屏识别,当客户端发现用户在网页的im ...

  2. html2canvas JS截图插件

    github/download:https://github.com/niklasvh/html2canvas/releases 参考文章:基于html2canvas实现网页保存为图片及图片清晰度优化 ...

  3. IText&Html2canvas js截图 绘制 导出PDF

    Html2canvas JS截图 HTML <div id="divPDF"> 需要截图的区域 </div> JS <script src=" ...

  4. js实现html转pdf+html2canvas.js截图不全的问题

    最近做项目中遇到要把整个页面保存为PDF文件,网上找了一下实现的方法都是 html2canvas.js+jsPdf.js 来实现.实现的过程是 先用html2canvas.js把html页面转成图片, ...

  5. 使用html2canvas.js实现页面截图并显示或上传

    最近写项目有用到html2canvas.js,可以实现页面的截图功能,但遭遇了许多的坑,特此写一篇随笔记录一下. 在使用html2canvas时可能会遇到诸如只能截取可视化界面.截图没有背景色.svg ...

  6. 使用 html2canvas 实现浏览器截图

    基于上一篇<h5 本地上传图片预览 源码下载>,今天分享一个图片上传后, 根据所上传的图片颜值随机生成一个答案, 并且可以生成一张专属于自己的名片. 首先上传预览我们已经实现了, 所以接下 ...

  7. web前端常用js插件

    第一款:截图插件html2Canvas.js html2是一款强大的截图插件,只需引入js文件,依照官方给定的截图方法,就能截取对应DOM区域的内容.对于有些截图出现模糊偏移的问题,网上也有一堆解决方 ...

  8. html2canvas实现浏览器截图的原理(包含源码分析的通用方法)

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师. 官方网站:devui.design Ng组件库:ng-devui(欢 ...

  9. 使用html2canvas实现浏览器截图

    最近做项目为了解决全局异常信息记录,研究了一下浏览器全屏截图功能,方便用户发现异常时能够快速截图发给管理员.最终记录的异常信息如下,上面的[截图报告管理员]就是使用html2canvas前端插件实现的 ...

随机推荐

  1. c/c++头文件的摘抄

    C/C++常用头文件 以及简单应用介绍 C/C++头文件一览 C #include <assert.h> //设定插入点 #include <ctype.h> //字符处理 # ...

  2. [NOI 2020 Online] 入门组T1 文具采购(洛谷 P6188)题解

    原题传送门 题目部分:(来自于考试题面,经整理) [题目描述] 小明的班上共有 n 元班费,同学们准备使用班费集体购买 3 种物品: 1.圆规,每个 7 元. 2.笔,每支 4 元. 3.笔记本,每本 ...

  3. P1790 矩形分割(隐含的电风扇)

    描述:https://www.luogu.com.cn/problem/P1790 有一个长为a,宽为b的矩形(1≤a≤6,2≤b≤6).可以把这个矩形看作是a*b个小方格. 我们现在接到了这样的一个 ...

  4. apply call bind的用法与实现

    概念 apply call 和bind 允许为不同的对象分配和调用属于一个对象的函数/方法.同时它们可以改变函数内 this 的指向. 区别 apply 和 call 接收的参数形式不同 apply ...

  5. [ACdream 1211 Reactor Cooling]无源无汇有上下界的可行流

    题意:无源无汇有上下界的可行流 模型 思路:首先将所有边的容量设为上界减去下界,然后对一个点i,设i的所有入边的下界和为to[i],所有出边的下界和为from[i],令它们的差为dif[i]=to[i ...

  6. ubuntu docker相关错误记录

    执行下面命令 curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add - 报错: gpg: can't c ...

  7. 超过百万的StackOverflow Flutter 问题-第二期

    老孟导读:一个月前分享的<超过百万的StackOverflow Flutter 问题-第一期>受到很多朋友的喜欢,非常感谢大家的支持,在文章末尾有第一期的链接,希望此文能对你有所帮助. N ...

  8. [tgpl]go匿名函数

    [tgpl]go匿名函数 0. 定义 匿名函数顾名思义是没有名字的函数, Named functions can be declared only at the package level, but ...

  9. node响应头缓存设置

    我把react项目分成4个板块,在路由的顶层 今天在手机上打开react项目的时候,发现平级路由跳转时某一个图片较多的板块图片总是渲染得很慢,这分明是重新发起请求了. 然后我先查一下react-rou ...

  10. redis集群复制和故障转移

    #### 一.集群的问题- 1.当某个主节点宕机后,对应的槽位没有节点承担,整个集群处于失败状态,不可用,怎么办- 2.如何判断某个主节点是否真正的岩机?- 3.如果从某个主节点的所有从节点中选举出一 ...