html2canvas转换时跨域链接的图片显示空白

今天遇到一个奇葩的问题,html2canvas将html转为图片,页面上的图片元素丢失,导致转完后的图片上面有一大块空白。而且只有iOS出现了这个问题,安卓是没问题的。

我们用html2canvas想要实现的效果大家应该都很清楚,对html页面进行截屏,转换成图片保存到手机相册。

我们的页面很简单,一个背景图,几行说明文字,本来是把页面放在项目的本地目录中,用相对路径去访问的,测试下来没有任何问题。突然有一天要求将图片放到阿里云服务器上通过url链接的形式进行访问。没想到换完以后直接出现了这个bug。

百度了一通,说是图片的链接是跨域请求,导致canvas拿不到图片内容。有个解决办法是先把在线的url通过canvas转为base64,再赋值回原图片的src。我试了一下,没什么用。最后无奈,将图片改回本地存储,不放在阿里云

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容