html2canvas使用过程中的坑

最新推荐文章于 2024-07-31 11:17:59 发布
最新推荐文章于 2024-07-31 11:17:59 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： JS 文章标签： javascript react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kevinlwf/article/details/107683018
版权

使用html2canvas可以将dom中的节点转换成图片，但是使用过程中也有不少的坑

1、如果节点中有跨域的图片，则会转换失败，要使用同源的图片，也可以在html2canvas的参数中使用userCORS = true

2、转换后的图片模糊，这个是因为将图片作为了background的导致的问题，解决办法是使用img标签

3、转换后概率出现白板的问题，尝试了等图片完全加载完成之后再用html2canvas转换无效，也试过给html2canvas的参数设置宽高也无效

4、转换后使用canvas.toDataURL拿到的是base64的图片，此图片可以直接展示在网页上，但是在Android设备上长按此图片无法保存，ios设备可以长按保存；原因是Android无法长按保存base64的图片，可以考虑将图片先上传到服务器拿到url再展示

kevinlwf
关注
专栏目录
详解html5 canvas 微信海报分享（个人爬坑）
11-21
记录下在实现功能过程中遇到的问题 canvas在微信浏览器中长按无效不能像img一样长按分享（那我就转成img呗） 转成img后在微信开发者工具中能显示，真机无效（欲哭无泪），度娘说可能是图片跨域^-^ 用户头像合成...
html2canvas踩坑记
qq_34024116的博客
02-15 1786
html2canvas使用稍微比较简单一点，就是在html中，找到最外层的元素，给一个class或者id即可导出，但是需要注意的是网络图片跨域问题，这时候是需要配置useCORS元素的。最近在开发 html2canvas 的时候，突然发现，html2canvas在IOS13.4.1系统中调用失败。就是在图片外层包一个view，然后view是图片的正常尺寸，然后image标签的宽高是原来的2倍，再缩小，这样图片就不会模糊了。*可直接用我上面的方法来生成图片，不会出现偏移现象，亲测苹果安卓也可以。
前端使用html2canvas生成图片踩坑
daimaxiaoyu的博客
09-19 7885
截图插件html2canvas
前端使用html2canvas在页面截图并导出，以及截图中含有图片时的跨域问题解决
最新发布
qq_54818343的博客
07-31 699
在你的Vue组件中，你应该将图片URL更改为通过代理访问的URL。注意，出于安全考虑，许多服务器默认不允许跨域请求。
使用html2canvas,将页面转换成图片的图片模糊等踩坑记录(Web/Taro h5)
weixin_44514665的博客
01-02 5489
hteml2canvas 采坑记录,涉及到图片空白跨域/截图不完整问题
html2canvas 的一些坑
weixin_33834075的博客
04-19 2811
1.模糊的问题：不要把背景图做为background的元素添加，要插入dom里面 2.文字模糊的问题 加大scale 值 就是放大倍数 不过图片的容量会变大 我加到3 3. html2canvas 支持的css方面很弱 最好用position来定位 上代码片段 function cloneImg(){ var shareContent = document.getElem...
html2canvas的坑
似月是你
05-16 719
html2canvas的坑 最近项目要实现一个将html生成图片的效果，从网上搜就用了html2canvas，结果弄了挺久，踩了不少的坑。 大致流程就是先找的插件，开始没有用官网的。 第一个实现效果是生成图片嘛，就还可以 var copyDom = $(".tuiguangtu_tu");//要保存的dom var width = copyDom.width(); //dom宽 var height = copyDom.height(); //dom高 v
html2canvas的使用与清晰度优化
z17864151193的博客
05-30 5213
这是html页面代码： <view id="Top4Img" class="posterImage" ref="Top0Img"> <image class="bgImg" src="../../static/invite/images/invite4.jpg" /> <view class="title">今日签</view> <view class="num">{{userInfo
详解Canvas 跨域脱坑实践
09-22
Canvas API是HTML5中的一个重要功能，它允许网页直接在浏览器中绘制图形，从而增强了网页的交互性和视觉效果。但是，当在Canvas中绘制来自不同域的图片时，就会遇到跨域问题。跨域问题是指出于安全考虑，浏览器会...
原生canvas制作画图小工具的踩坑和爬坑
11-20
【标题解析】：“原生canvas制作画图小工具的踩坑和爬坑”是指使用HTML5的canvas元素来开发一个简单的绘图应用，这个应用具备画线、画矩形、画圆以及选择颜色的功能，类似于截图软件中的绘图工具。 【描述分析】：...
关于canvas.toDataURL 在iOS运行失败的问题解决
11-19
在提供的代码片段中，看到使用了Vue.js框架，并且在`mounted`钩子中初始化canvas。代码中有一个`loadImage`异步方法用于加载图片并处理跨域问题。但是，问题可能出现在其他未展示的部分，如图片加载和绘制到canvas的...
Lottie.js实现的圣诞老人掉入坑中动画效果源码.zip
11-01
在这个特定的案例中，“圣诞老人掉入坑中动画效果”是通过Lottie.js来实现的，我们可以深入探讨这个过程中的关键知识点。 首先，我们需要理解Adobe After Effects。这是一个强大的视觉特效和动态图形软件，设计师...
微信小程序点击生成朋友圈分享图(遇到的坑)
10-15
2. **画布操作**：在画布上绘制文本、图片时，需要使用`wx.createSelectorQuery()`来获取画布的DOM信息，然后调用`canvasContext`的相关方法进行绘制。 3. **兼容性问题**：微信小程序的API在不同版本之间可能存在...
mall-xiaohongshu-小程序模仿小红书.zip
09-23
代码如下： class="navBar-box" scroll-x="true" 一些使用scroll-view的注意事项：请勿在 scroll-view 中使用 textarea、map、canvas、video 组件scroll-into-view 的优先级高于 scroll-top在滚动 scroll-view 时...
html2canvas遇到的坑
热门推荐
dream0129的博客
02-11 1万+
需要将一个背景图+动态获取的微信名+微信头像拼接成一张图片，用户可长按保存最终图片，最终就是要将html转换成图片。 最初想自己用canvas画，但是有些麻烦，后来发现了html2canvas这个插件，先将html转成canvas，再生成图片。 因为生成的图片和html是在同一个页面中，最初想法是页面加载完成后，html内容隐藏，对应的图片盒子生成并显示，在实现过程中发现如果将html内容隐藏，...
html2canvas填坑指难
逆水行舟，不进则退
08-20 605
前端生成图片只有一种方法，就是用canvas画图，转成图片格式。 使用原生canvas画图，简单的实现画图还可以操作，如果是画海报，画二维码，就比较吃力，一般用现成的库来做。 画二维码有专门的二维码生成库 qrcode 把dom转成图片有专门库 html2canvas，一般前端生成海报都是用这个库 html2canvas 使用直接参考官网，使用比较简单 使用过程中我遇到的坑 图片资源跨域问题 股东页面后，截图不完整 图片有背景颜色 1. 图片跨域可以加 useCORS: true 经测试，就算加了允.
使用html2canvas截图踩坑总结
Vintage
02-05 2259
使用html2canvas截图踩坑总结
html2Canvas（踩坑）
qq_36472571的博客
06-06 1114
html2Canvas 就是不支持多行超出显示省略号，这里有两个方案 1）超出高度之后，直接overflow:hidden 2) js控制字数，截取
html2canvas ios遇到的坑
09-15
在 iOS 设备上使用 HTML2Canvas 时，可能会遇到一些问题。 1. iOS 上的安全限制：由于 iOS 的安全限制，HTML2Canvas 默认情况下无法截取跨域的图片。这意味着，如果你的网页中包含跨域的图片，HTML2Canvas 在 iOS ...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值