dom-to-image的图片跨域等问题解决

前言

在项目开发中用到了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;