javascript - echart图片导出到iframe中，出现跨站-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

怪我咯 2017-05-19 10:33:19

[JavaScript讨论组]

694

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

怪我咯

走同样的路，发现不同的人生

全部回复(1)

PHPz2017-05-19 10:35:19 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安全性机制引起的，建议更换图片源。