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前端插件实现的 ...
 
随机推荐
- 程序员最喜欢用的在线IDE代码编译器,什么?你竟然不知道!
			
1.网址https://tech.io/snippet 支持 20+ 种编程语言,页面上没有杂七杂八的东西,非常简约,非常干净,另外,它上面的代码段还可以嵌入到网页之中. 2.网址 https://w ...
 - Code force-CodeCraft-20 (Div. 2) D. Nash Matrix 详解(DFS构造)
			
D. Nash Matrix time limit per test2 seconds memory limit per test256 megabytes inputstandard input o ...
 - 一个数number的n次幂 python的pow函数
			
@ 目录 解法1:暴力法 解法2:根据奇偶幂分类(递归法,迭代法,位运算法) 实现 pow(x, n),即计算 x 的 n 次幂函数.其中n为整数. 链接: pow函数的实现--leetcode. 解 ...
 - MySQL基础总结(二)
			
数据表的完整性约束条件 AUTO_INCREMENT (自增长) 注意事项: 1.一个表中只能有一个自增长字段 2.必须配合主键使用 方法1: 方法2: 方法3: 指定自增长初始值的方法: 修改自增长 ...
 - 介绍一个船新的 PHP SDK + Runtime: PeachPie
			
前言 这几天想基于 .NET Core 搞一个自己的博客网站,于是在网上搜刮各种博客引擎,找到了这些候选:Blogifier.Miniblog 以及 edi 写的 Moonglate. Blogifi ...
 - [hdu4670 Cube number on a tree]点分治
			
题意:给一个N个带权节点的树,权值以给定的K个素数为因子,求路径上节点乘积为立方数的路径条数 思路:立方数的性质是每个因子的个数为3的倍数,那么每个因子只需要保存0-2三个状态即可,然后路径就可以转化 ...
 - vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。
			
废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子 项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.e ...
 - rabbitMQ基于spring-rabbitnq
			
一.什么是MQ MQ全称为Message Queue,消息队列(MQ)是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接来链接它们.消息传递 ...
 - sonar 安装,centos7配置优化
			
/etc/sysctl.conf /etc/systemd/system.conf /etc/security/limits.conf /proc/sys/fs/file-max /etc/secur ...
 - 笨办法学习python之hashmap
			
#!/user/bin/env python #-*-coding:utf-8 -*- #Author: qinjiaxi #初始化aMap列表,把列表num_buckets添加到aMap中,num_ ...