大图像和javascript

Question

我正在使用使用Three.js的pannellum (http://www.mpetroff.net/archives/2012/08/28/pannellum-1-2/)，并且我正在使用它来处理本地文件。它适用于小文件，但我有的图像是5000 * 10000，并且它不加载它们。限制是什么，我如何在大图像中使用它。是否可以使用img标签加载图像并将该图像注入到应用程序中？在我发现的代码中，我有：

var panoimage = new Image();

我可以把它换成像他的那样的吗？

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

Image()的源代码在哪里？它是JS的一部分吗？我找不到关于这个班级的任何信息。

编辑1

我对pannellum做了以下更改，以便它从html上的图像加载图像，而不是动态加载图像。

在pannellum.htm中，我添加了以下html：

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

在pannellum.js中，我将第104行改为：

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

我还注释掉了

panoimage.onerror = function() { 

因此，在图像下载之后应该调用的代码立即被调用(因为当我们到达已经下载的点图像时)

我还注释掉了设置图像来源的行。

它不能下载图片。它只显示一个黑屏。

Answer 1

我发现不同的浏览器都会采取措施，不渲染他们认为太大的图像(参见this question，我前段时间问道)。遗憾的是，这取决于用户代理。Canvas有时有一些抽象概念来处理这个问题，但上次我在DHTML中处理非常大的图像时，我不得不放弃(即使将它们切成小块，一段时间后它们也不会渲染)。

new Image()是一种旧的DOM方法，用于在document - documented here之外从头开始生成图像元素。你的第一行相当于：

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

您用来替换它的行将有效地获取文档中已有的图像，而不是从头开始创建新的图像。

Answer 2

查看Pannellum源代码，它似乎使用了Three.js的WebGL渲染器。WebGL对纹理大小(以及它可以渲染的图像大小)有限制。你可以在这里检查你的(“最大纹理大小”)：http://jsfiddle.net/DA7wr/

我想到的另一件事是在wrong kind of texture parameters中使用非2次方图像大小，但由于Pannellum演示也有NPOT图像，我猜这不是问题所在。