前言
在项目开发中用到了dom-to-image
将相关dom元素转为一个base64
格式的图片链接,进行后续预览功能。本地开发时一切正常,放到线上环境中发现了2个问题,一个是线上加载http
链接资源的问题,一个是图片的跨域问题。
线上加载http链接资源
线上是https
环境,项目中的图片资源是存储在阿里云osd中的,在图片资源返回时始终是http
开头的链接。在使用dom-to-image
将页面上渲染好的相关图片元素转为base64格式的svg链接时,发现浏览器中一直有个无法访问http链接的报错。
解决方法是在index.html
文件头部加一个meta元素:
<meta http-equiv='Content-Security-Policy' content='upgrade-insecure-requests' />
但是为了适配生产环境和开发环境,开发环境不需要添加这个meta元素,建议用下面这种写法:
<script>
if (window.location.protocal.startsWith('https')) {
const meta = document.createElement('meta');
meta.httpEquiv = 'Content-Security-Policy';
meta.content = 'upgrade-insecure-requests';
document.getElementsByTagName('head')[0].appendChild(meta)
}
</script>
这里可能有个疑惑点,既然在线上环境无法请求http链接的资源,那么该图片元素是怎么正常渲染在页面上的。通过F12进行元素审查,发现img元素的src属性好像做了处理,自动从http转成了https链接。
图片跨域问题
针对图片跨域这个问题,可以给img元素添加crossOrigin属性,属性值为anonymous。
// 情况一
<img
crossOrigin="anonymous"
:src="item.downloadUrl"
alt=""
>
// 情况二
const img = document.createElement('img');
img.crossOrigin = 'anonymous';
img.onload = () => {
// .......
};
img.src = v.playUrl;