个人中心
gpt4 book ai didi

javascript - GIF(重新)压缩的Javascript概念验证

转载 作者：搜寻专家 更新时间：2023-11-01 05:30:58 24 4
gpt4 key购买 nike

我的程序Precomp可用于进一步压缩已压缩的文件格式，例如GIF，PNG，PDF，ZIP等。粗略地总结，它是通过对压缩流进行解压缩，重新压缩并存储预期的压缩流与实际的压缩流之间的差异来实现的。例如，来自Wikipedia的this rotating earth picture从1429 KB压缩到755 KB。该过程是无损的，因此可以还原原始GIF文件。

GIF文件格式的算法可以隔离并相对容易地实现，因此我考虑使用JavaScript进行概念验证。这将导致Web服务器发送GIF文件的压缩版本(.pcf结尾，本质上是bip2压缩文件的
GIF图片内容)和客户端解压缩数据，再压缩为GIF并显示它。必须完成以下工作:

  • 该网站的作者必须使用标准版本的Precomp压缩GIF文件，并提供这些代替GIF文件以及JavaScript的客户端重新压缩文件。
  • 客户端将解压缩bzip2压缩文件，这可以使用one of the existing bzip2 Javascript implementations完成。
  • 客户端会将图像内容重新压缩到原始GIF文件中。

    • 该过程是带宽与客户端CPU使用率之间的折衷。

    现在我的问题如下:
  • 加载其他文件并将其“转换”为GIF的过程中是否存在一般问题？
  • 您建议在客户端完成之前显示什么(图像占位符)？
  • 我必须怎么做才能确保已缓存.pcf文件？如果不进行缓存，节省带宽是没有用的。
  • 如果停用了JavaScript，是否可以显示原始GIF，但是如果激活了JavaScript，请避免加载GIF？
  • 我可以给用户一种配置行为的方法吗？例如。在移动设备上，有些可能会避免带宽，但是其他一些可能希望减少CPU使用率。
  • 是否可以按原样显示隔行扫描的GIF(从粗略版本到最终图像)？这将需要在重新压缩的不同阶段多次更新图像内容。

    • 最佳答案

    让我们从回答您的特定问题开始。下面的代码示例。

    问答

    1. Are there any general problems with the process of loading a different file and "converting" it to GIF?


    主要问题是并发症。您正在有效地编写一个浏览器插件，例如JPEG2000。

    如果要编写真正的浏览器插件，则每个主要的浏览器的操作方式都不同，并且偶尔会更改插件格式，因此您必须积极维护它们。

    如果您正在编写JS库，则编写和维护起来会更容易，但是它将没有特权，并且会受到诸如 cross original restriction之类的限制。

    1. What would you recommend to display before the client side finishes (image placeholder)?


    取决于您的格式可以提供什么。
    如果您提早对图像尺寸和小缩略图进行编码，则可以在较早时显示准确的占位符。

    毕竟，这是您的格式。

    1. What do I have to do to make sure the .pcf file is cached? Bandwidth savings were useless if doesn't get cached.


    与其他文件没什么不同。

    在服务器端配置 Expires and Cache-Control header，它们将被缓存。
    Manifest 和 prefetch 也可以使用。

    1. Is there a way to display the original GIF if JavaScript is deactivated, but avoid loading the GIF if JavaScript is activated?


    这很棘手。禁用JavaScript后，您只能设置 replace elements，而不能设置属性。

    这意味着您无法在指向.pcf文件的位置创建图像，并且在JS不可用时要求浏览器重写src属性。

    我认为不支持JS的最佳解决方案是使用 document.write作为后备输出，使用 noscript输出图像: 
    <noscript>
      <img src=demo.gif width=90>
    </noscript><script>
      loadPcf("demo.pcf","width=90")
    </script>

    (某些库或框架可能会让您考虑使用 <img src=demo.gif data-pcf=demo.pcf>。
    这对您不起作用，因为脚本启动前的浏览器 will preload'demo.gif'会导致其他数据传输。)

    另外，浏览器插件不受“禁用JS”设置的影响，因此，如果您制作插件，则无需担心。

    1. Can I give the users a way to configure the behaviour? E.g. on mobile devices, some might avoid bandwidth, but others might want less CPU usage.


    也许。您可以编写用户界面代码，并将首选项存储在cookie或localStorage中。
    然后，您可以检测到首选项并在服务器代码(如果有cookie)或客户端代码中切换逻辑。

    如果您要添加插件，则所有浏览器都提供可靠的首选项机制。
    问题是，同样，每个浏览器都以不同的方式进行操作。

    1. Would it be possible to display interlaced GIFs as supposed (going from a rough version to the final image)? This would require updating the image content multiple times at different stages of recompression.


    如果您将浏览器的部分图像交给浏览器，他们可能会认为该图像已损坏并拒绝显示它。
    在这种情况下，为了安全起见，您必须实现自己的GIF解码器和编码器，以便您可以浏览器查看完整的占位符图像。

    1. (new) Can I decode image loaded from another site?


    我还必须重复警告:非附加JS图像解码不适用于 cross origin images。
    这意味着，所有.pcf文件必须与使用它的站点位于同一服务器，同一端口和同一协议(protocol)上。

    例如，您不能共享多个站点的图像或进行诸如 domain sharding之类的优化。

    代码示例

    这是创建 <img>，加载gif宽度一半的gif并将其放回 <img>的最小示例。

    为了支持占位符或渐进式加载，除了onload之外，还听 onprogress代替/。 
      <!DOCTYPE html><html><head><meta charset="UTF-8"><script>
      function loadPcf( file, attr ) {
         var atr = attr || '', id = loadPcf.autoid = 1 + ~~loadPcf.autoid;
         document.write( '<img id=pcf'+id+' ' + atr + ' />' );
         var xhr = new XMLHttpRequest();
         xhr.responseType = 'arraybuffer'; // IE 10+ only, sorry.
         xhr.onload = function() { // I am loading gif for demo, you can load anything.
            var data = xhr.response, img = document.querySelector( '#pcf' + id );
            if ( ! img || ! data instanceof ArrayBuffer ) return;
            var buf = new DataView( data ), head = buf.getUint32(0), width = buf.getUint16(6,1);
            if ( head !== 1195984440 ) return console.log( 'Not a GIF: ' + file ); // 'GIF8' = 1195984440
            // Modify data, image width in this case, and push it to the <img> as gif.
            buf.setInt16( 6, ~~(width/2), 1 );
            img.src = URL.createObjectURL( new Blob( [ buf.buffer ], { type: "image/gif" } ) );
         };
         xhr.open( 'GET', file );
         xhr.send();
      }
      </script>
      <h1>Foo<noscript><img src=a.gif width=90></noscript><script>loadPcf("a.gif","width=90")</script>Bar</h1>

    如果您不需要 <noscript>兼容性(从而阻止了Facebook / google +在共享页面时看到图像)，则可以将pcf文件放入 <img> src中，然后使用JS对其进行批量处理，这样就不必需要为每个图像调用loadPcf，这将使html更加简单。

    <video>怎么样？

    从理论上讲，您构想的大部分都是可行的，但也许您应该重新考虑。

    从您提出的问题来看，很难定义并顺利实现您的愿景。
    在WebM和 use <video> instead中编码动画可能更好。
  • 更好的浏览器支持回到IE 9的-只需添加H.264使其成为dual format video。您需要IE 10+来修改二进制数据。
  • 大小:电影具有许多选择和技巧来最小化大小，并且您所学的内容将来可以重复使用。
  • 渐进式: <video>具有had some techs for adaptive video，希望它们会很快稳定下来。
  • JavaScript: <video>不依赖JavaScript。
  • 面向 future :在停止使用特殊格式很久之后，许多程序都支持WebM和H.264。
  • 成本效益:使用较小或较低质量的媒体创建低带宽选项比自定义格式更容易，更可靠。这就是维基百科和YouTube提供不同分辨率的媒体的原因。

    • 对于非动画，也可以对PNG进行颜色索引和7z optimised(保持PNG格式)。
    索引为PNG的图标大小通常小于相同的GIF。

    也许您的愿景(如pcf网站中所述)是能够对许多不同的文件进行编码，而不仅仅是GIF。
    这更像是支持新的网络协议(protocol)，并且可能超出了不起眼的JavaScript的范围。 (例如，您将如何处理pdf下载或流式传输？)

    关于javascript - GIF(重新)压缩的Javascript概念验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28584052/

    24 4 0
    文章推荐： iOS 右导航按钮不显示在 UINavigationBar 中
    文章推荐： javascript - 为什么 chromecast 在动画帧之间需要这么长时间
    文章推荐： javascript - 如何使用 Angular UI Router 解析所有状态的数据？
    文章推荐： javascript - 花括号内的变量初始化
    搜寻专家
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com