热门标签 | HotTags
当前位置:  开发笔记 > 后端 > 正文

html2canvas图片跨域无法加载的问题

最近有个项目,需要截图,想到截图就想到canvas,想到canvas就想到html2canvas。。。问题:无法截取图片&

最近有个项目,需要截图,想到截图就想到canvas,想到canvas就想到html2canvas。。。


问题:无法截取图片,有图片的直接空白了。


原因:经过观察研究发现,canvas在调用drawImage方法的时候,是会受到浏览器同源策略限制的。


解决方法:前端设置useCORS为true,后端将图片设置允许跨域共享(即相应头里面要带上access-control-allow-origin)

遇到这种问题,我很淡定,作为一个成熟的库,这么常见的问题肯定是有解决策略的。翻开官网,找到了这两个参数:
在这里插入图片描述
但是不管我怎么弄,加一个还是都加上,都不起作用。有点慌。。。
只能看下网友是怎么解决的了。
有说转base64的,但最后发现绕不开drawImage。
还有就是用useCORS,这个官网也有写:
在这里插入图片描述
但加上也没有作用。最后发现,这是需要后端配合使用的。要让这个参数生效,请求的图片必须带有下面这个字段:
在这里插入图片描述
最后,问题解决了,还是绕不开后端。

跨域资源共享 (CORS)


推荐阅读
  • 在网站制作中随时可用的10个 HTML5 代码片段
    HTML很容易写,但创建网页时,您经常需要重复做同样的任务,如创建表单。在这篇文章中,我收集了10个超有用的HTML代码片段,有HTML5启动模板、空白图片、打电话和发短信、自动完 ... [详细]
  • Vue项目中应用骨架屏实践
    在当前开发的项目中,由于登录过程涉及多次重定向,导致用户体验不佳。为了改善这一状况,本文介绍了如何使用vue-skeleton-webpack-plugin插件在Vue项目中实现骨架屏,以减少用户感受到的白屏时间。 ... [详细]
  • 本文针对公司项目中普遍存在的IE浏览器兼容性问题,特别是IE9及以下版本,提出了具体的解决方案,确保用户在这些旧版浏览器中也能顺利实现图片上传预览功能。 ... [详细]
  • 解决FCKeditor应用主题后上传问题及优化配置
    本文介绍了在Freetextbox收费后选择FCKeditor作为替代方案时遇到的上传问题及其解决方案。通过调整配置文件和调试工具,最终解决了上传失败的问题,并对相关配置进行了优化。 ... [详细]
  • 在跨浏览器开发中,一个常见的问题是关于如何在鼠标悬停时显示图片提示信息。本文深入探讨了 IE 浏览器对 IMG 元素 alt 属性的特殊处理,并提供了最佳实践建议。 ... [详细]
  • 本文详细探讨了JavaScript中的作用域链和闭包机制,解释了它们的工作原理及其在实际编程中的应用。通过具体的代码示例,帮助读者更好地理解和掌握这些概念。 ... [详细]
  • 雨林木风 GHOST XP SP3 经典珍藏版 V2017.11
    雨林木风 GHOST XP SP3 经典珍藏版 V2017.11 ... [详细]
  • Python 内存管理机制详解
    本文深入探讨了Python的内存管理机制,涵盖了垃圾回收、引用计数和内存池机制。通过具体示例和专业解释,帮助读者理解Python如何高效地管理和释放内存资源。 ... [详细]
  • 深入探讨ASP.NET中的OAuth、JWT与OpenID Connect
    本文作为前文关于OAuth2.0和使用.NET实现OAuth身份验证的补充,详细阐述了OAuth与JWT及OpenID Connect之间的关系和差异,旨在提供更全面的理解。 ... [详细]
  • 本文介绍了在一卡通项目中设计加密管理方案时,证书服务器的配置步骤及其在用户权限控制中的应用。首先概述了证书服务器的基本设置,包括操作系统的选择和证书服务的安装,随后详细描述了服务器证书及客户端证书的创建过程。 ... [详细]
  • 本文探讨了在安卓设备上的微信H5环境中,如何解决长按图片时无法保存或分享Base64编码图片及Blob形式图片的问题,并提供了有效的解决方案。 ... [详细]
  • 本文探讨了如何在不同域名下,通过浏览器直接下载PDF文件而非预览的问题,并提供了两种解决方案:一是利用原生JavaScript编写下载函数,二是使用第三方库简化下载流程。 ... [详细]
  • 1<table>2<tr>3<th>ID<th>4 ... [详细]
  • iOS 小组件开发指南
    本文详细介绍了iOS小部件(Widget)的开发流程,从环境搭建、证书配置到业务逻辑实现,提供了一系列实用的技术指导与代码示例。 ... [详细]
  • 菜鸟物流用户增长部现正大规模招聘P6及以上级别的JAVA工程师,提供年后入职选项。 ... [详细]
author-avatar
手机用户2502941293
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有