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

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

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

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

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

你可能感兴趣的:(html2canvas转换时跨域链接的图片显示空白)