使用 PHP、GD、XML 和 Javascript 的在线图像幻灯片
我编写了一些代码来通过 1000 多帧图像序列自动跟踪许多对象。我的算法将对象边界和中心以 xml 格式输出。我正在制作一个网站来展示我的结果，我希望有一个可导航的幻灯片，具有正常的播放、暂停、前进、后退功能。我目前设置了一个 php-javascript 循环帧队列。它的工作原理是让 10 个帧包含图像 1-10，然后当用户想要查看图像 2 时，更改视图并将图像 11 加载到帧 1 中，依此类推。这种循环队列样式对于正常滚动效果很好，但我想每 100 毫秒更改一次图像，但它会陷入困境。这边有更好的方法吗？
我的速度变慢的主要根源是我的图像是从包含大量数据点的 xml 文件在 GD 中动态绘制的。我使用 file_get_contents 和 simpleXMLELement 函数将数据获取到数组中，然后使用 imagepolygon 将它们绘制在图像上。有更好的方法吗？
每张图像的大小约为 1400 x 900，其中包含 30-500 个对象，具体取决于它在序列中的位置。我尝试过存储物理绘制的图像，但由于用户需要能够隔离对象 1-10 或 3,7,8-11，由于排列的数量，这是不可能的。
I wrote some code to automatically track many objects through an 1000+ frame image sequence. The object boundaries and centers are outputted in xml by my algorithm. I am making a website to show off my results and I would like to have a navigable slideshow with the normal play, pause, forward, rewind features. I currently have a php-javascript circular frame queue set up. It works by having 10 frames contain images 1-10, then when the user wants to see images 2, change the view and load image 11 into frame 1 and so on. This circular queue style works well for normal scrolling, but I would like to change the image every 100 ms and it bogs down. Is there a better way to do this on this side?
My main source of slowdown is that my images are dynamically plotted in GD from an xml file containing a large number of data points. I am using file_get_contents and the simpleXMLELement functions to get the data into arrays and then plotting them on an image using imagepolygon. Is there a better way of doing this?
Each image is about 1400 by 900 and has anywhere from 30-500 objects in it depending on how far into the sequence it is. I have tried storing physically plotted images but since users need to be able to isolate objects 1-10 or 3,7,8-11 this is not possible due to the number of permutations.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我将抛出一些头脑风暴类型的想法：
将对象边界绘制为相对定位的 div，并设置高度和宽度。这样，您就不必为每种可能的组合生成图像。可以为页面上任何给定的动态对象启用对象跟踪。缺点是较慢的客户端可能会缓慢地渲染 500 个 div。
减少动态渲染需求的另一种方法 - 将每个对象的所有跟踪帧渲染（一次）为透明背景（PNG 或 GIF）上的多边形。查看该帧时，将所有适当的对象跟踪帧叠加在背景图层上。没有渲染问题，只是客户端加载 500 个图像时出现加载延迟。
不必每次都解析 XML 文件，而是创建一个包含包含文件中所有数据点的 PHP 数组。
为您的服务器配备更快的处理器和大量的 RAM。
就像我说的——随机的想法。也许它们让你思考，也许它们对我来说只是思考的乐趣。祝你好运。
I'm going to throw out a couple of brainstorming type ideas:
Draw the object boundaries as relatively positioned divs with height and width set. This way, you don't have to generate images for each possible combination. Object tracking can be turned on for any given object on the fly on the page. Downside is that slower clients could render 500 divs slowly.
Another way to reduce the need to render on the fly - render (once) all tracking frames for each object as the polygon on a transparent background (PNG or GIF). When the frame is viewed, layer all appropriate object tracking frames over the background layer. No rendering problem, just a load delay while the client loads 500 images.
Instead of parsing the XML file each time, create a PHP array with all the data points in an include file.
Get a faster processor and a lot of RAM for your server.
Like I said - random ideas. Maybe they get you thinking, maybe they were just fun for me to think about. Good luck.