首页 前端知识 html2canvas 截图空白 或出现toDataURL‘ on ‘HTMLCanvasElement或img标签没截下来 的所有解决办法

html2canvas 截图空白 或出现toDataURL‘ on ‘HTMLCanvasElement或img标签没截下来 的所有解决办法

2024-07-02 23:07:23 前端知识 前端哥 913 597 我要收藏

1.如果截图空白:在这里插入图片描述

1.1以下的参数是必须要有的。

							width: shareContent.offsetWidth, //设置canvas尺寸与所截图尺寸相同,防止白边
							height: shareContent.offsetHeight, //防止白边
							logging: true,
							useCORS: true,
							x:0,
							y:0,

2,如果出现了报错 toDataURL’ on 'HTMLCanvasElement 这个报错 那么我的解决办法就是加参数 就解决了:

2.1这两个是解决这个报错的

foreignObjectRendering : true,
allowTaint :true

3.如果你截图的内容包含了图片 但是你截图上没显示 那么你就需要以下的操作。

3.1先设置上这个参数

useCORS: true, 

3.2必须在img标签上加上这个参数

<img crossOrigin="anonymous" :src="wx64Url" alt="img"></img>

3.3最重要的一步就是必须把你的图片路径变成base64格式的,不管是网络图片还是本地图片 都不管用 必须是base64格式的, 转成了base64格式会截图很慢,所以你截图的时候必须加上一个定时器,如上图1

如果需要我的完整代码的话 可以关注我私聊。我会给你发完整的代码。只是关于截图的部分

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13820.html
标签
评论
发布的文章

读魏书生的心得体会

2024-07-03 14:07:10

jQuery 选择器

2024-05-12 00:05:34

Vue中public/assets目录区别

2024-07-02 23:07:29

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!