记录一下使用HTML2Canvas生成的图片无法获取html中img标签高度导致图片被截断的问题

于 2024-03-13 15:04:29 发布
阅读量671 收藏 10
点赞数 9
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53171104/article/details/136680330
版权

最近开发过程中使用 html2canvas 将html代码生成canvas的时候发现预览出现的canvas图片中间被截断了  如图

期间以为是跨域图片没有加载，使用了useCORS:true,allowTaint:两个html2canvas的配置项，然而并没有什么卵用。

然后以为标签非块元素的问题，尝试了给img标签添加display:block，object-fit并没有生效

由于是富文本组件自定义功能按钮添加的图片生成的html代码，要考虑到富文本组件编辑时候的美观，所以没有加固定宽高，由于之前画canvas并没有添加过img标签，导致变成了瞎子过河。

然后把html代码截取出来用控制变量法发现仅文字输出是没有问题的，带上图片就出现了问题，

尝试了文字---图片---文字的结构 发现比文字----图片被截断的位置不一样，得出结论  img标签在html2canvas里面被默认当做一行行高的元素，且display:block并不生效，所以 只需要在调用html2canvas的方法之前  将所有的img标签加上固定高度即可保证导出的canvas正常渲染~

抽象派的毕加索
关注
  • 9
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
html2canvas苹果不显示图片,简单记录 html2canvas网页中的图片没法显示的问题
weixin_42138139的博客
06-04 1636
html2canvas绘制图片，若是页面中存在img，出现绘制的结果无图片时，缘由以下：(建议逐步查找)css1.绘制时间过早，图片还没有加载html解决方式：经过setTimeout延迟绘制或者经过img.onload监听图片是否绘制完成ios2.绘制的图片跨域问题canvas解决方式：图片生成前，添加 image.crossOrigin = "*";跨域切记：要在图片赋值以前添加缓存3.若是出...
html2canvas关于图片不能正常截取的解决方案
09-22
图片中的文案、背景图片、用户头像全部都是通过后端的接口获取。但是使用 html2canvas 生成的canvas有些图片成功的在canvas里生成了。但是有些图片无论如何都显示不出来，这篇文章主要介绍了html2canvas关于图片不能正常截取的解决方案，感兴趣的小伙伴们可以参考一下
html2canvas赋值img标签,使用html2canvas 生成img
weixin_35840387的博客
06-21 935
//canvas-> imgfunction convert2canvas() {var el = document.getElementById("dayimg");//要截图的divvar saveImg = document.getElementById("saveImg");var canvas = document.createElement("canvas");var scale...
html2canvas不能截取svg中image标签（解决）
zhuzhucaicai的博客
12-23 2534
html2canvas不能截取svg中image标签（解决）
html2canvas插件生成base64img图片。
bobringtheboys的博客
04-11 565
handleDownloadReport() { const printOuter = $("#printReport"); printOuter.addClass("to-pdf"); console.log($("#printReport")); //插件生成base64img图片。 html2canvas($("#printReport")[0]).then((canvas) => { const contentWidt
使用html2canvas将整个元素导出为图片，其中包含svg和img，解决img跟svg导出时img或svg(canvg处理)不显示的问题，以及相关优化
一个咸鱼的博客
12-22 5885
使用html2canvas将整个元素导出为图片，其中包含svg和img，解决img跟svg导出时img或svg(canvg处理)不显示的问题，以及相关优化
html2canvas将HTML内容写入Canvas生成图片 uniapp
12-16
综上所述，html2canvas在uniAPP中用于生成HTML内容的图片，无论是截取整个页面还是特定部分，都可以提供便捷的解决方案。开发者需要理解其工作原理，合理处理滚动页面和兼容性问题，才能在实际项目中发挥出它的价值...
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
11-26
如何使用JS截取HTML页面为图片呢，下面为大家介绍一款JS截图插件html2canvas.js html2canvas.js 能够实现在用户浏览器端直接对整个或部分页面进行截屏。 html2canvas.js可以将当页面渲染成一个Canvas图片，通过读取...
使用html2canvas实现将html内容写入到canvas中生成图片
01-21
之前我们简单的了解了canvas的基本用法,这里我们来了解下如何将html内容写入到canvas中生成图片，这里我使用到了html2canvas插件，这个插件是基于canvas实现的 html2canvas官网： http://html2canvas.hertzen.com/ ...
html2canvas生成的图片偏移不完整的解决方法
11-20
问题背景：生成的图片在一个弹窗里面，如果页面没有滚动条就是正常的，但是一旦出现滚动条并且页面发生滚动时html2canvas绘制成的图片就会偏移出对应滚动高度的白边，如下：   解决办法：   楼主查了很多资料，也...
vue 使用html2canvas将DOM转化为图片的方法
10-18
主要介绍了vue 使用html2canvas将DOM转化为图片的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用html2canvas将页面画到画布上去并且放入img
ansinie的博客
05-24 482
要实现打开页面后可以吧页面保存到相册， 打开页面自动触发，但是这时候页面还未加载完全，导致画布是空白的，所以需要使用setTiomeout延迟触发 npm i html2canvas 导入 import html2canvas from "html2canvas"; let bg =document.getElementById('poster') //要画的div setTimeout(()=>{ html2canvas(bg).then(canvas => {
html2canvas 截图空白 或出现toDataURL‘ on ‘HTMLCanvasElement或img标签没截下来 的所有解决办法
weixin_45721912的博客
08-31 2875
【代码】html2canvas 截图空白 或出现toDataURL' on 'HTMLCanvasElement或img标签没截下来 的所有解决办法。
html2canvas 把标签合成为canvas图片
xiao白的博客
05-22 445
<style> #can{ background:red; height:200px; width:200px; text-align: center; line-height:200px; } <style> <div id="can"> 合成为图片 </div> <img class="info_fofo" src="" /> //先引入js文件 <script src="http:/.
html2canvas图片截图截不到图像的问题解决
u013258556的博客
06-03 1万+
解决思路： 在回显图片后，给img标签动态的加上crossOrigin="anonymous"属性 然后 服务端开启跨域response.setHeader("Access-Control-Allow-Origin","*"); 并且开启CORS（重要） 前端等图片加载完后再截图（重要） 截图JS代码（会来百度的都看的懂）：useCORS记得开起来，很重要！！！ html2canv...
一个关于image访问图片跨域的问题
热门推荐
weixin_34392843的博客
03-13 2万+
一、背景 项目中遇到一个问题，同一个图片在 dom 节点中使用了 'img' 标签来加载，同时由于项目使用了 ThreeJS 3D 渲染引擎，在加载纹理时使用了 TextureLoader 来加载了同一张图片，而由于图片是在阿里云服务器上的，所以最后报出了如下错误，意思是在访问图片时出现了跨域问题： 二、问题梳理 2.1 关于图片的加载 图片是来自于阿里云服务器的，和本地 localhost 必...
解决html2canvas 无法截到Svg标签内容
d
06-08 467
【代码】解决html2canvas 无法截到Svg标签内容。
项目遇到的问题:前端html2Canvas的跨域问题
m0_59870373的博客
02-19 2402
项目中canvas遇到的问题以及解决办法
html2canvas组件 img图片无法转换问题
最新发布
huf840461的博客
09-27 439
图片转换成功了，但是还是不行！于是想到之前看过一个文章好像说到position+z-index属性会有影响，于是将。
html2canvas+jspdf前端生成pdf以及处理分页图片文字被截断问题 注:使用html2canva
09-25
总而言之，使用html2canvas和jspdf可以在前端实现PDF文件的生成，但处理分页时需要注意图片和文字被截断的问题。通过手动设置分页位置和忽略特定元素，可以解决这个问题，确保生成的PDF文件中的内容完整可读。 ###...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值