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前端插件实现的 ...
随机推荐
- C语言编程入门题目--No.12
题目:判断101-200之间有多少个素数,并输出所有素数. 1.程序分析:判断素数的方法:用一个数分别去除2到sqrt(这个数),如果能被整除, 则表明此数不是素数,反之是素数. 2.程序源代码: # ...
- 数学--数论--HDU 12151七夕节 Plus (因子和线性筛)
Problem Description 七夕节那天,月老来到数字王国,他在城门上贴了一张告示,并且和数字王国的人们说:"你们想知道你们的另一半是谁吗?那就按照告示上的方法去找吧!" ...
- 数学--数论---P4718 Pollard-Rho算法 大数分解
P4718 [模板]Pollard-Rho算法 题目描述 MillerRabin算法是一种高效的质数判断方法.虽然是一种不确定的质数判断法,但是在选择多种底数的情况下,正确率是可以接受的.Pollar ...
- 「译」Graal JIT编译器是如何工作的
原文Understanding How Graal Works - a Java JIT Compiler Written in Java,讲了jvmci和ideal graph的基本概念以及一些优化 ...
- Shell脚本(三)重定向
先上一张图: 代码如下: #!/bin/bash echo "hello world" echo `ls +` 运行结果如下: PS: 1. 如果想同时将数据重定向到文件和stdo ...
- 大富翁 线段树+二分 +dfs
https://csustacm.fun/problem/2033 这个题目还是比较简单的,但是比赛的时候没有像清楚,用了一个不太熟悉的数据结构主席树, 所以出现了bug,主席树的bug是真的难找. ...
- 最简单的手机预览WEB移动端网页的方法
网上看了很多关于该问题的解决办法,各种各样的都有,个人也测试了一些, 最后总结出一个最简单且实用的方法. 1.安装nodejs node官网下载对应版本的nodejs,安装好了之后,在node.js执 ...
- SpringBoot基础实战系列(二)springboot解析json与HttpMessageConverter
SpringBoot解析Json格式数据 @ResponseBody 注:该注解表示前端请求后端controller,后端响应请求返回 json 格式数据前端,实质就是将java对象序列化 1.创建C ...
- iOS事件的响应和传递机制
跟二狗子哥哥交流的时候,他总说我,说的过程太业余.故 好好学习整理一下.努力不那么业余. 一.事件的产生.传递.响应: 1.事件从父控件依次传递到子控件,寻找最合适的子控件View. 2.寻找最合适的 ...
- Spring全家桶之spring boot(二)
spring boot的两种配置文件: 虽然spring boot可以帮助我们进行一些配置项,但是有些内容还是需要开发者自己进行配置,因此spring boot提供了配置文件以供开发者配置.sprin ...