question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Large image does not load in Static Image Layer

See original GitHub issue

I 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:closed
  • Created 3 years ago
  • Comments:18 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
ahocevarcommented, Aug 23, 2021

@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.

0reactions
ahocevarcommented, Dec 2, 2021

#13073 should fix this, with no more application level workarounds necessary.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found