Last active
February 19, 2022 18:08
-
-
Save helgasoft/63f1b16d9632bfdb6f21f2db80910f47 to your computer and use it in GitHub Desktop.
R | ECharts | logo, title and background, CORS issues
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
library(echarty) | |
radial_gradient <- htmlwidgets::JS( | |
"new echarts.graphic.RadialGradient(0.3, 0.3, 0.8)" | |
# ,[{ offset: 0, color: 'red'}, { offset: 1, color: 'red'}])" | |
) | |
color_stops <- htmlwidgets::JS( | |
"[{ offset: 0, color:'gold' }, // color at 0% | |
{ offset: 0.5, color:'MediumSlateBlue' }, // color at 50% | |
{ offset: 1, color:'skyblue' // color at 100% | |
}]" | |
) | |
ec.init(title=list( | |
text='{a| } {b|🢀 here is the logo}', | |
textStyle = list( | |
rich=list( | |
a= list(height=30, backgroundColor=list( | |
image='http://simpleicon.com/wp-content/uploads/glass-64x64.png')), | |
b= list( color='teal', fontSize= 24, fontWeight= 400)) | |
) ), | |
backgroundColor = list(type = "radial", | |
x = 0.5, y = 0.5, r = 0.5, | |
backgroundColor = radial_gradient, | |
colorStops = color_stops ) | |
) | |
Good catch. ECharts are aware of the problem and discussing it - apache/echarts#15117.
The consensus is that there is no issue with images hosted on the same domain.
For external images there is a CORS problem.
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported
The simplest way is to encode the image to base64 format with a converter.
library(echarty)
p <- ec.init(title=list(
text='{a| } {b|🢀 here is the logo}',
textStyle = list(
rich=list(
a= list(height=30, backgroundColor= list(
image='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACx0lEQVRYR+2WW0hUURSGvz1njuMlM0aYboMGJWmBhaYxYGoaFEKg4osvPVXQS0QFERVdBJEgKOihIIgg6KGXJEhCouxClhrlWEpggWTGmDp4m8s5MzvOzAQS6oxCRyIPrKez917f+vfP2kuwxJ9Y4vwsA/y7Cki4GPPPsIDri/XSohWQIGNJ+wTk/ZcA6UAp0CZg0lQFJNQ1w6f38PA8FAHjAvTFQCzKAxIOBSHrJxxfB4WAR8ComQC1gA1oATYBkwL6zAQoB+xAZwzEKeCpmQCXgAYBmoSNwG4Bt8wEyDRkBxoFnJBQL+CemQA1xv0L8MtoE9or4KopAJLIC+oAsgR0GNUDAwJemQVgExCQsBUoBu4Chgm/mgWwFqgEmgFLLKoF3P6rAF7ozYDcOEnkZ4ejdrPH8yBRmHk7oZRSvOhyn/VpnKmodNms01NoEIlwLINxgCFDEqAAHeeaGN5XRapKmxpM2l9SkjsxH8ycAG1vuw+PB7k5Og2TGhysc5Hkm4pb2KOTTXwpryJNBXtKJC6XFuWfmmvjrADPOt1HPRPy2tAUjOkwFYSGAy5s/vgAd4400WMA2CDTCuvTYfUK6Sop3NY+G8SsAI9fd+v9oyiDARgcg2kdrlyowTnUP68CEkHjsRu481yssoHTDtkpkJ1BU1lx/umEAZ686f444GWLJwjeAEz6IaBDKAxSSiy6hlXXEVISViyErCpSsaJYQFWIVJ8eU8C5EqxrUpKrcnICCQMY5mttd/8Y8eHw+sAnoy1PC0PImMVmzGMRE4poqBZIFtHIsIE9Fb+qqM49O/NGFuSB34vbuj5U+IPi/rSG3a9HVdBCEP4DIFK5BWxWSFYh1cq3FDVcv2vH9pfxXJvQQGIo8vxdT64MUa1LyqSUG6QkTUBYCLwWZK8iLK2KqrWUFBR8j5d05v+EABZy4ELXLgMsuQK/AAs98iHakpmuAAAAAElFTkSuQmCC'
)),
b= list( color='teal', fontSize= 24, fontWeight= 400))
) )
)
p$x$opts$toolbox <- list(feature=list(saveAsImage=list(backgroundColor='#111')))
p
or use library base64enc to avoid CORS issues
paste0("data:image/png;base64,", base64enc::base64encode('http://simpleicon.com/wp-content/uploads/glass-64x64.png'))
Good news! Thanks a lot!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@helgasoft The problem with this is that, once an image is attached to the plot title or anywhere in the plot, downloading the image using echarts'
toolbox: feature
breaks. No longer works