Large image does not load in Static Image Layer
See original GitHub issueI made several tests on different PCs using same extra large PNG file (7021px x 4967px) A0. On my own PC it works 100% (Windows 64bit - 32Gb Ram), but on another PC (Windows 32bit - 4Gb Ram) it does not load and Openlayers gives an error on the decode promise when trying to decode the image (See below). When I resize the image to 5000px or less, it works.
NOTICE THE LINE: error = DOMException: The source image cannot be decoded
function listenImage (image, loadHandler, errorHandler) {
var img =
/** @type {HTMLImageElement} */
image;
if (img.src && IMAGE_DECODE) {
var promise = img.decode();
var listening_1 = true;
var unlisten = function () {
listening_1 = false;
};
promise.then(function () {
if (listening_1) {
loadHandler();
}
}).catch(function (error) { // **error = DOMException: The source image cannot be decoded**
if (listening_1) {
// FIXME: Unconditionally call errorHandler() when this bug is fixed upstream:
// https://bugs.webkit.org/show_bug.cgi?id=198527
if (error.name === 'EncodingError' && error.message === 'Invalid image type.') {
loadHandler();
} else {
errorHandler();
}
}
});
return unlisten;
}
var listenerKeys = [listenOnce(img, EventType.LOAD, loadHandler), listenOnce(img, EventType.ERROR, errorHandler)];
return function unlisten () {
listenerKeys.forEach(unlistenByKey);
};
}
Issue Analytics
- State:
- Created 3 years ago
- Comments:18 (7 by maintainers)
Top Results From Across the Web
OpenLayers Large static image does not appear in the mobile ...
I am using the code below OpenLayers to view a static image with the following dimensions 43000 px x 4000px, 10mb. In the...
Read more >Static Image Layer Performance Issues - Open Layers 3
I need to plot all of these on a static image in OpenLayers 3. I am not using OSM or anything else, my...
Read more >Static Image - OpenLayers
This example uses a static image as a layer source. The map view is configured with a custom projection that translates image coordinates...
Read more >Images - Gridsome
A base64 blurred image loaded by default. This makes: 1) Larger images outside the viewport are not requested until they're needed, and 2)...
Read more >A Guide to Working with Images in ArcGIS StoryMaps - Esri
These simple rules and tips will ensure the images in your stories ... hard to ensure readers don't have to wait long for...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@rooby That comment is only relevant for svg images. There are several reasons why large images could fail. The first thing to check is whether the generated url can be downloaded stand-alone without error (e.g. with curl, or directly by pasting it into the browser’s address bar. Another problem could be missing CORS headers, but that would also affect small images. And when the download finishes correctly, there is still a chance that the canvas needed to render the image gets bigger than the size supported by the browser and device.
The last mentioned problem is related to #9578. At least on devices with a high device pixel ratio, it could improve the situation when fixed.
#13073 should fix this, with no more application level workarounds necessary.