资讯专栏INFORMATION COLUMN

html2canvas使用中的坑

springDevBird / 3368人阅读

摘要:最近项目中使用到,其中遇到了一些坑,在此记录一下绝对定位元素不渲染定位时,一定要设置等值,并且不能减写成加载时,只渲染一部分便签加载的是时,不会读取标签的,而是读取标签上设置的和获取的图片内容向左下偏移可能是未渲染完成导致,一定要在渲染完成

最近项目中使用到html2canvas,其中遇到了一些坑,在此记录一下

1. 绝对定位元素不渲染

absolute、fixed定位时,一定要设置top  left等值,并且不能减写成top:0;

2. img加载svg时,只渲染一部分

img便签加载的是svg时,html2canvas不会读取img标签style的width、height,而是读取svg标签上设置的width和height

3. 获取的图片内容向左下偏移

可能是dom未渲染完成导致,一定要在dom渲染完成,图片资源加载完成后进行html2canvas转换

4. background-image背景图不清晰

要用img标签absolute定位做背景图


文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/110314.html

相关文章

  • 我还是踩上了网页截图的坑

    摘要:最近做了个实现网页缩略图的项目,其中不免需要用到网页截屏。选择好方案后还是踩了不少坑,第一个就是我得想办法让它和通信,不然我没法通过前端只传一个需要被截图的链接给就能实现截图。 最近做了个实现网页缩略图的项目,其中不免需要用到网页截屏。 一开始想的是看看能不能在前端直接实现截图,因为Web端的截图并生成图片并不算是一个高频的需求,网上资料自然也不算多,查来查去,发现JavaScript...

    jcc 评论0 收藏0
  • 移动端 html2canvas 踩坑记录

    摘要:原因大图还未下载完毕即开始了绘制。而其并不能绘制隐藏的内容,因此需要先显示页面,在图片生成后再隐藏。解决方法设为绝对定位,使用屏幕宽度作为基准设置值。 背景 最近在做的微信 html5 项目有个需求:页面包含 一张大的背景图片 + 一个用户的链接二维码图片 拼成一张图片,让用户长按保存的时候,可以把整个页面都保存起来,而不是只保存二维码。 思考 1.前后端哪个实现方法会更高效 虽然图片...

    妤锋シ 评论0 收藏0
  • 移动端 html2canvas 踩坑记录

    摘要:原因大图还未下载完毕即开始了绘制。而其并不能绘制隐藏的内容,因此需要先显示页面,在图片生成后再隐藏。解决方法设为绝对定位,使用屏幕宽度作为基准设置值。 背景 最近在做的微信 html5 项目有个需求:页面包含 一张大的背景图片 + 一个用户的链接二维码图片 拼成一张图片,让用户长按保存的时候,可以把整个页面都保存起来,而不是只保存二维码。 思考 1.前后端哪个实现方法会更高效 虽然图片...

    xfee 评论0 收藏0
  • 移动端 html2canvas 踩坑记录

    摘要:原因大图还未下载完毕即开始了绘制。而其并不能绘制隐藏的内容,因此需要先显示页面,在图片生成后再隐藏。解决方法设为绝对定位,使用屏幕宽度作为基准设置值。 背景 最近在做的微信 html5 项目有个需求:页面包含 一张大的背景图片 + 一个用户的链接二维码图片 拼成一张图片,让用户长按保存的时候,可以把整个页面都保存起来,而不是只保存二维码。 思考 1.前后端哪个实现方法会更高效 虽然图片...

    kviccn 评论0 收藏0
  • html2canvas以及domtoimage的使用踩坑总结

    摘要:本人建议第二种,更保险三转换的位图不能被以上版本所识别。客户使用的时候发现了这个问题,没法。五离成功只有一步之遥了,使用了之后安卓手机不能将图片分享给朋友。识别不了问题分析安卓能识别但不能识别矢量图片解决办法自己手写咯。判断手机为安卓还是。 前言 首先做个自我介绍,我是成都某企业的一名刚刚入行约一年的前端,在之前的开发过程中,遇到了问题,也解决了问题,但是在下一次解决相同问题的时候,只...

    邹强 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<