CODEWITHSUNDEEP
javascriptthree.js
mans
mans

Reputation: 18148

Large image and javascript

I am using pannellum (http://www.mpetroff.net/archives/2012/08/28/pannellum-1-2/) which uses Three.js and I am using it to work with local files. It works fine for small files, but the image that I have is 5000 * 10000, and it doesn't load them. What is the limitation and how can I use it with large images. Can I load the image using an img tag and inject that image into the application? In the code I found that I have:

var panoimage = new Image();

Can I replace it with something such as his?

 var panoimage = document.getElementById('PanImage');

Where is the source code for Image()? Is it part of JS? I could not find any information on this class.

EDIT 1

I made the following changes to pannellum so it loads image from an image on html instead of loaading it dynamically.

In pannellum.htm I added the following html:

 <img id='panimage' src="000063.jpg" style="visibility: collapse;"/>

in pannellum.js, I change line 104 to :

var panoimage = document.getElementById('panimage');

I also commented out the 

panoimage.onerror = function() {

and so the code which should be called after image was downloaded called straight away ( since by the time that we reach to his point image already downloaded)

Also I commented out the line that set the source of image.

It doesn't download image. it only show a black screen.

Upvotes: 1

Views: 1588

Answers (2)

Tapio
Tapio

Reputation: 3456

Looking at the Pannellum source code, it seems to use the WebGL renderer of Three.js. WebGL has a limit on texture size (and thus in the image size it can render) imposed by your GPU. You can check yours ("Max texture size") here: http://jsfiddle.net/DA7wr/

Another thing that came into mind was using non-power-of-two image size with wrong kind of texture parameters, but as the Pannellum demo also has NPOT image, I guess this is not the issue.

Upvotes: 0

Barney
Barney

Reputation: 16456

I've found that various browsers will take it upon themselves not to render images they deem to be too large (see this question I asked a while back). Sadly, this depends on the user agent. Canvas has abstractions for dealing with this sometimes but last time I was dealing with very large images in DHTML, I had to give up (even slicing them up into tiny bite-sized pieces just ended up with them not rendering after a while).

new Image() is an old DOM method to produce an image element from scratch outside of the document – documented here. That first line of yours is the equivalent of:

var panoimage = document.createElement('img');

The line you've replaced it with effectively takes an image that's already somewhere in the document rather than creating a new one from scratch.

Upvotes: 1

Related Questions