解决html2canvas截取页面部分div黑屏问题

最新推荐文章于 2023-03-24 16:26:02 发布
最新推荐文章于 2023-03-24 16:26:02 发布
阅读量2.2k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 总结 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43248623/article/details/108147036
本文探讨了在截取页面部分div时遇到的问题，即使用JPEG格式时出现黑屏现象，而转换为PNG格式则能正常显示。文章揭示了不同图片格式在截图操作中的表现差异。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在这里插入图片描述
当截取页面的部分div时出现上述问题

原因：
在这里插入图片描述
当转存图片格式为jpeg时截取整个页面(document.body)没有问题，但截取部分div会有黑屏

将jpeg改为png时图片可正常显示。
在这里插入图片描述

Vue2 - 详细实现调用浏览器摄像头拍照并生成图片预览，开启摄像头并进行拍照，支持将抓拍的图像保存到用户本地或上传到服务器、调取前置摄像头和后置摄像头，vue实现调用摄像头，电脑或手机调用摄像头拍照
资深程序员
10-03 1万+
vue2，nuxt2，摄像头，vue网站打开摄像头拍照，vue项目调用摄像头实现拍照功能，vue调用电脑端摄像头实时拍照，解决调用摄像头权限无法弹出，打不开摄像头，vue如何调用手机的摄像头，调用本地摄像头实现拍照，浏览器不弹摄像头权限了，如何不使用https运行测试，拍照后怎么保存，照相后上传到后端服务器，开启摄像头黑屏，如何默认后置摄像头，网页开启电脑摄像头并照相，前置拍照，vue2如何调用手机摄像头进行拍摄，拒绝权限后不再弹出了，微信公众号网页，摄像头报错，拍照左右镜像反了，浏览器不兼容怎么办，前置摄
iframe截图html,javascript – html2canvas – iframe没有屏幕截图
weixin_34638776的博客
06-05 2177
我有一个任务,我需要在我的网页上加载一个URL(例如www.yahoo.com),并截取屏幕截图.我使用html2canvas进行截屏并将其附加到页面正文.URL指定的页面已成功加载到div元素内的iframe中.但是当我尝试截取屏幕截图时,iframe区域显示为空白.以下是previewURL和截图的代码.//to preview the URL contentfunction previewU...
threeJS 使用 html2canvas截图为黑色的问题
MonkeyB_B的博客
03-16 2264
threeJS 使用 html2canvas截图为黑色的问题
canvas画布会黑屏吗_html2canvas实现网页保存为图片及图片清晰度优化
weixin_39559097的博客
12-20 804
一、实现HTML页面保存为图片1.1 已知可行方案现有已知能够实现网页保存为图片的方案包括：方案1：将DOM改写为canvas，然后利用canvas的toDataURL方法实现将DOM输出为包含图片展示的data URI方案2：使用html2canvas.js实现(可选搭配Canvas2Image.js实现网页保存为图片)方案3：使用rasterizeHTML.js实现1.2 解决方案的选择方案1...
html2canvas手机黑屏,html2canvas 生成海报图 开发中遇到的问题
weixin_31328561的博客
06-21 999
ios里，生成的图片不显示canvas.toDataURL('image/jpeg', 1.0)使用image/jpeg格式，在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。canvas 是弹出层时，底层有滚动条，会有部分空白测试的时候，好奇为啥每次，生成的图片都缺一部分，而且都是从顶部开始空白，再绘制图片。解决方案: 添加绘制...
html2canvas 在 IOS 微信中绘图白屏黑屏问题
u010905433的博客
03-10 1134
项目中需要在微信中生成海报图，用户长按海报图后可以将图片发送给微信好友或保存到本地； 海报图在前端使用html2canvas 1.0.0-rc5生成，布局先使用一个高度为0并添加overflow: hidden的div作为外部容器，并将需要绘制的dom作为子元素放进去，实现绘制dom对用户不可见，大致代码如下： <div style="height: 0;overflow: hidden;"> <div ref="canvasDiv"> 待绘图的DOM </di
HTML页面转PDF导出加水印并解决字被截断的问题
weixin_41673550的博客
07-23 7416
项目需求：根据HTML页面导出完整的PDF 技术栈： html2canvas 、 jspdf 、 Vue 首先将包下载到项目中，然后在制定页面引入依赖包 import html2Canvas from "html2canvas"; import JsPDF from "jspdf"; 定义一个ID为pdfDom的HTML节点，也就是你想导出的那部分 <div class="r...
vue项目html页面生成PDF预览、下载及生成页面水印
weixin_42132044的博客
04-24 3460
html2canvas官方文档 jspdf官方文档 概述 因为生成的PDF内还有富文本，后端不好生成PDF，故有前端完成。 原理 html2canva生成截图，jsPDF利用图片生成PDF。 代码 <template> <div class="app-container"> <div id="pdfDom"> <!-- 封面 --> <div id="cover"> <div class="
在 vue项目里面，使用htmlcancas2进行页面的截图，现在需要截图sp播放的某一帧，当点击截屏时进行截取并下载到本地，如何实现
最新发布
03-11
好的，我需要解决用户在Vue项目中使用html2canvas截取视频特定帧并下载的问题。首先，我得了解用户的具体需求和当前环境。用户提到的是在Vue项目中，当点击截屏按钮时，需要捕获正在播放的视频的某一帧，然后下载到...
基于fastadmin框架，上传视频，自动截取视频封面图
一只胡萝卜
06-09 2364
基于fastadmin框架，上传视频，自动截取封面图
html2canvas截图空白问题的解决
11-21
最近在项目中遇到一个需求，需要提供网页截图的功能。百度下发现html2canvas很好用。那就试试吧。 资源下载地址 插件下载地址：html2canvas下载地址 使用方式 项目使用的react组件开发方式。参照官方的说明文档getting-started.md,按照以下步骤进行： 1、使用以下命令安装 npm install html2canvas --save 2、在文件中引入html2canvas import html2canvas from 'html2canvas'; 3、文件中的使用 html2canvas(document.body).then(function(ca
html2canvas手机黑屏,华为手机使用canvas.getContext('2d')真机黑屏
weixin_29660305的博客
06-21 660
华为手机使用canvas.getContext('2d')真机黑屏框架类型 问题类型 终端类型 微信版本 基础库版本 小游戏 Bug 微信安卓客户端 7.0.16 2.11.3varcanvas=wx.createCanvas();varcontext=canvas.getContext('2d');context.fillStyle...
html2canvas ios出问题,html2canvas 在 IOS 微信中绘图白屏黑屏问题
weixin_30845893的博客
06-30 1098
项目中需要在微信中生成海报图，用户长按海报图后可以将图片发送给微信好友或保存到本地；海报图在前端使用html2canvas 1.0.0-rc5生成，布局先使用一个高度为0并添加overflow: hidden的div作为外部容器，并将需要绘制的dom作为子元素放进去，实现绘制dom对用户不可见，大致代码如下：待绘图的DOMhtml2canvas代码如下：html2canvas(this.$refs...
html2canvas截屏图片有白边/黑边 的问题记录
热门推荐
喵大嗷的博客
06-12 1万+
先记录一下canvas的画布的形态转换的一些方法 方法 描述 scale() 缩放当前绘图至更大或更小 rotate() 旋转当前绘图 translate() 重新映射画布上的 (0,0) 位置 transform() 替换绘图的当前转换矩阵 这的方法使用在canvas的画布身上的 canvas.getContext("2...
运用插件html2canvas浏览器截屏的方法
weixin_47481630的博客
03-24 658
记得把这个属性设置为true;不然下载的图片是黑屏。首先先安装 html2canvas 插件。然后就直接可以截图了。
解决html2canvas截图不全问题
qq_42669897的博客
04-19 1万+
最近公司要求做一个生成海报，html2canvas是个不错的选择，随之而来的问题，当页面的滚动条不在顶部的时候出现，截图不全，顶部出现白屏问题，我当时是各种百度各种搜索问题还是没有得到解决。 我知道的原因是：滚动了滚动条而造成的，html2canvas是根据屏幕截图进行截图，如果内容高度高于屏幕时，就会出现这样的问题 我的解决方法： 当用户点击分享海报按钮时： 1、获取滚动条的位置，body...
使用html2canvas插件截图图片不显示问题 与 JS图片转base64格式
BiangBaing的博客
09-23 3458
点击按钮保存二维码。使用了html2canvas插件配合canvas来进行保存- 保存的时候头像保存失败，本地可以。- 网络图片不能直接保存两个解决方案：1、html2canvas设置配置项2、先将图片转base64，再赋值给img标签的src属性两者都可以解决。
工作爬坑系列之html2canvas截图空白
weixin_36352085的博客
08-10 1234
开笔第一篇 工作爬坑系列之html2canvas截图空白 最近刚开始用html2canvas,发现对IE10很不友好(用啥浏览器客户说了算…呜呜呜). 问题一 第一个问题是容易出现阴影,以及截图截不全.这个问题大多出现在用了box-shadow这个样式或者有滚动条的情况下,已经有很多大神给了解决方法,大致解决思路是通过拉伸截图区域的高度以及宽度. 问题二 截图啥也没截出来,这个问题我研究了好一会儿.刚开始以为是IE10太老了,不支持这个插件,经过一番骚操作发现还是自个代码的问题,官方文档给出了很多不支持的样
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值