Repository navigation
v2.2.0
Loading cross-origin external graphics
By default, all external graphics are loaded without CORS. This works fine when displaying features styled with image icons loaded from another domain, but when you try to read/serialise the OpenLayers layer canvas, you'll get a 'SecurityError', because the canvas contains pixels loaded from another domain.
To help with this, v2.2.0 introduced a crossOriginMode option for createOlStyleFunction and loadExternalGraphics.
createOlStyleFunction(featureTypeStyle, { crossOriginMode: 'require-cors' }); // or 'prefer-cors'
loadExternalGraphics(featureTypeStyle, { crossOriginMode: 'require-cors' }); // or 'prefer-cors'To load external graphics with crossorigin attribute set, use the crossOriginMode option when creating a style function, or when preloading external graphics. There are two possible string values for this option:
require-cors: external graphics are loaded with CORS. If the origin does not support CORS, this will result in an image load error, causing a red cross to display instead of an image. Using this option may cause some image icons to fail, but the layer canvas will stay serialisable.prefer-cors: external graphics are loaded with CORS, but if the origin does not support CORS, a second attempt to load the image will be made without CORS. This ensures that valid image icons will always display, but reading from the canvas may fail if any of the rendered image icons are not CORS-proof.