html2canvas 跨域问题

年秒 2017-11-27 05:42:57

用html2Canvas这个插件截屏，但是遇到了跨域问题，看了官方提供的办法自己做了个demo也没成功。官方给的方法如果是单张图片的话是可以的，但是截取百度地图的话就不管用了。

请问这种情况该怎么解决？

...全文

376 3 打赏收藏转发到动态举报

写回复

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

年秒 2017-11-28

打赏
举报

回复

引用 2 楼 showbo 的回复:

百度地图就不用想了。。。不是1，2张图片的问题。。 Web开发学习资料推荐 Web开发 extjs开发技巧

那有什么其他的可以截屏的插件么，或者js可以实现的方法？公司要求一定要截地图，我也很无奈啊

Go 旅城通票 2017-11-28

打赏
举报

回复

百度地图就不用想了。。。不是1，2张图片的问题。。

Web开发学习资料推荐
Web开发
extjs开发技巧

年秒 2017-11-28

打赏
举报

回复

有知道的嘛~TAT

html2canvas js 框架和 java设置代理解决图片跨域访问时不能生成图片的问题。 zip包含：设置代理使用跨域图片.docx，canvas2image.js，canvg.js，html2canvas.js，html2canvas.min.js，html2canvas.svg.min.js共6个文件

该样例代码是 html转canvas canvas转图片功能示例，代码下载完成后请在web服务器上发布后进行代码测试，否则会因跨域问题导致代码出错。压缩包资源： canvas2image.js demo.html githug.txt html2canvas.min.js S1.jpg

本课程基于HTML5的Canvas编程技术、JavaScript和CSS等前端技术，实现了拼图游戏的开发过程，可以借此课程初步掌握网页游戏的开发过程和思路，并加强对H5等前端技术的熟练掌握。

如题，在将页面的图片地址进行本地输出时（Html2Canvas.js），因不同源存在跨域问题，会出现toDataURL访问权限问题：【Redirect at origin ‘http://sub1.xx.com’ has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://sub2.xx.com’ is therefore no

问题1：百度地图应用的是瓦片式图片（地图是一张张图片拼出来的），html2canvas 处理时，遇到非同一域名下的图片，浏览器会显示跨域的报错，也无法用反向代理来解决，因为瓦片图片的域名不确定，无法指定 proxy_pass 解决：使用百度地图静态图处理（ http://lbsyun.baidu.com/index.php?title=static ），这时域名确定了（ http://api.map.baidu.com ），可以用反向代理来解决跨域  <el-image :src=`/baidu-static/staticimage/v2?ak=yourak&widt

87,910

社区成员

224,616

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章