html2canvas页面滚动时截图不全空白问题

一、问题

h5项目中有给上传的图片加天气、地理位置等水印信息需求，本来想用cavas画，但是代码又长又臭，样式也不那么灵活。然后想到用html2canvas，我可真是个小机智。在页面内容不多的页面上没有问题，效果也不错，但是内容很多会滚动的页面就出现了截掉一半内容的情况。这是为什么呢？

二、解决

一番查找之后，在官网看到了scrollY属性，这个属性官网注解是渲染元素时要使用的y轴滚动位置（例如，如果元素使用位置：fixed），我要截图的元素正是fixed定位的，所以截图渲染的时候元素在画布上相对Y轴偏移了滚动条的高度。找到问题就好解决了，使用scrollY对这个偏移进行修正，用官网的例子代码示例：

html2canvas(document.querySelector("#capture"), { scrollY: 0 }).then(canvas => {document.body.appendChild(canvas)
})

如果本文对你有些许帮助，动动手指点个赞吧，你的鼓励是我创作的动力，笔芯♥。

html2canvas页面滚动时截图不全空白问题相关推荐

java怎么往右浮动_[Java教程]jQuery实现页面滚动时智能浮动定位
[Java教程]jQuery实现页面滚动时智能浮动定位 0 2016-08-04 18:00:08 jQuery实现页面滚动时层智能浮动定位_前端开发 * { margin: 0; padding: ...
页面滚动时触发图片逐帧播放_如何在滚动效果上创建逐帧运动图像
页面滚动时触发图片逐帧播放 A step by step guide on how to create that dynamic image background you see everywhere ...
iphoneX系列手机在页面滚动时隐藏底部的操作栏
iphoneX系列手机底部都有一个(横杠)键,浏览器会在页面滚动时隐藏底部的操作栏,需求:底部导航栏出现 1.判断是iphonex设备的方法 function isIphoneX(){if(/ipho ...
WOW.js – 在页面滚动时展现动感的元素动画效果
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
html侧边导航栏跟随页面滚动,页面滚动时，右侧导航栏跟着对应滚动
页面滚动时,右侧导航栏跟着对应滚动方法一: 导航栏对应跳转 *{ margin:0px; padding:0px; text-align:center; color:#fff; font-size: ...
你也可以做一个小米魅族网站 WOW js WOW js – 在页面滚动时展现动感的元素动画效果
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 可视区域 ...
你也可以做一个小米魅族网站（WOW.js：WOW.js – 在页面滚动时展现动感的元素动画效果）
可视区域动画: aos.js :http://www.jq22.com/jquery-info8150 scrollReveal.js :http://to ...
动态效果html wow,WOW.js ? 在页面滚动时展现动感的元素动画效果_html/css_WEB-ITnose...
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
Html2canvas——生成画布时图片显示空白
问题:用html2canvas生成画布图片,再转成pdf.生成图片时内容结构里的图片显示空白. 解决: 首先服务器设置图片允许跨域,如阿里云腾讯云配置跨域规则.其次图片设置crossOrigin=&q ...

html2canvas页面滚动时截图不全空白问题

html2canvas页面滚动时截图不全空白问题相关推荐

最新文章

热门文章