html2canvas截图如何解决图片跨域的问题?
来源:互联网 发布:复旦大数据学院夏令营 编辑:程序博客网 时间:2024/06/05 05:07
1、html2canvas是可以是可以在浏览器端截图,把html转换成图片,但是在实际开发中遇到,如果html页面中存在全路径图片,比如
<img src="http://test.static.com/image/25/order/20170819/1503129118906761.jpg" class="upload-img" data-preview-src="" data-preview-group="1">
这种全路径图片,则通过html2canvas截图
html2canvas($("#pdfwrap"), { onrendered: function (canvas) { var imgurl = canvas.toDataURL(); var imgBase1 = imgurl.split(',')[1]; }})
2、如果图片不跨域的话,截图正常,如果存在跨域,那么js报错,错误信息为:
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
3、解决办法,通过服务器返回的图片为base64格式的,再通过html2canvas截图,问题解决。方便理解src中base64编码只显示了一部分
<img class="upload-img" data-preview-src="" data-preview-group="1" src="data:image/jpeg;base64,iVBOM6e2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNLnczL9Imh0dHQSICN">
阅读全文
0 0
- html2canvas截图如何解决图片跨域的问题?
- Web开发之html2canvas截图如何解决跨域的问题?
- html2canvas截图的内容中存在跨域图片时出错解决思路
- html2canvas.js网页截图功能(解决截图不全问题)
- html2canvas.js网页截图功能(解决截图不全问题)
- html2canvas截图overflow:hidden失效的问题
- html2canvas完整demo解决图片跨域问题(已经成功啦啦)
- html2canvas跨域问题的简单解决方法
- html2canvas的0.5.0-beta4版本(可以解决图片不清晰问题)
- html2canvas页面截图图片不显示
- html2canvas页面截图图片不显示
- 使用 html2canvas 将 HTML 节点转为图片并解决跨域图片
- html2canvas图片截图截屏功能,附demo地址
- 【解决】html2canvas.js截图只截取当前可视区域
- VUE 移动SPA html2canvas截图不清晰问题
- html2canvas网页截图
- html2canvas 网页截图
- 利用javascript实现页面截图(html2canvas的用法)
- ASP.NET Core依赖注入解读&使用Autofac替代实现
- HDU 3861 The King’s Problem 强连通缩点+最小路径覆盖
- 关于html中js引入位置相关
- HTML 分组元素
- 正则表达式全部符号解释
- html2canvas截图如何解决图片跨域的问题?
- 北京毕加索公司应邀参加2017第二届建筑VR和BIM核心技术行业峰会
- 启用本地https域名,在Mac OS X的apache里
- Spring配置文件获取系统的环境变量
- 编译原理题解
- 3万个虚机,7PB存储
- 从软件定义存储到人工智能
- 用户感悟 2:券商头顶一朵云
- 根据select结果批量insert或update