javascript - echart images are exported to iframe, cross-site occurs

Question

I want to export echart’s exported image to an iframe, but a cross-domain error occurs. How should I fix it? Use the myChart.getDataURL() method provided by echart.

Answer 1

Usually, pictures allow cross-domain access, and cross-domain pictures can also be used in canvas, but doing so will pollute the canvas. Once the canvas is polluted, its data will not be read. For example, toBlob(), toDataURL() or getImageData() method.
This security mechanism of the browser avoids the risk of misuse of remote server images without permission.
So if you need to use cross-domain image resources in canvas, please refer to the following apache configuration snippet

<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 itself uses canvas technology. Cross-domain cross-domain is caused by the canvas security mechanism. It is recommended to change the image source.