Javascript – Echart-Bilder werden in Iframe exportiert, es erfolgt Cross-Site

Question

Ich möchte das exportierte Bild von echart in einen Iframe exportieren, aber es tritt ein domänenübergreifender Fehler auf. Wie soll ich ihn beheben? Verwenden Sie die von echart bereitgestellte Methode 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安全性机制引起的，建议更换图片源。