javascript - 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安全性機制引起的，建議更換圖片來源。