echart图片导出到iframe中，出现跨站

Question

我想将echart的导出图片导出到iframe中，但是出现了跨域，应该如何修复？用的echart提供的myChart.getDataURL()方法。

Answer 1

通常, 图片允许跨域访问, 也可以在canvas中使用跨域的图片, 但这样做会污染画布, 一旦画布受污染, 将无法读取其数据. 比如无法调用 toBlob(), toDataURL() 或 getImageData()方法.
浏览器的这种安全机制规避了未经许可的远程服务器图片被滥用的风险.
因此如需在canvas中使用跨域的图片资源, 请参考如下apache配置片段

<IfModule mod_setenvif.c>

    <IfModule mod_headers.c>

        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">

            SetEnvIf Origin ":" IS_CORS

            Header set Access-Control-Allow-Origin "*" env=IS_CORS

        </FilesMatch>

    </IfModule>

</IfModule>

echart本身使用的就是canvas技术，跨域是由canvas安全性机制引起的，建议更换图片源。