我需要使用 JavaScript 和 HTML5 开发图像放大功能。哪种策略会更好——</p>
拍摄单张图像并应用缩放级别 - 我们可以下载图像以获得更高的缩放级别 - 4x 和加载页面以 1x 显示图像。通过这种方法,如果图像有很多文本,图像是否会特别失真?
不同缩放级别的不同图像 - 这肯定会增加页面加载时间,希望避免这种情况。
我需要使用 JavaScript 和 HTML5 开发图像放大功能。哪种策略会更好——</p>
拍摄单张图像并应用缩放级别 - 我们可以下载图像以获得更高的缩放级别 - 4x 和加载页面以 1x 显示图像。通过这种方法,如果图像有很多文本,图像是否会特别失真?
不同缩放级别的不同图像 - 这肯定会增加页面加载时间,希望避免这种情况。
我认为最好的方法是为不同的缩放级别创建不同的图像(这样可以确保它们总是看起来不错)并仅在请求时加载不同的缩放级别(使用 ajax)——这样可以避免页面加载时间的增加.
我建议选择第一个选项。
如果图像具有良好的分辨率,则文字不会扭曲。使用 PNG,或者如果可能的话,使用 SVG。
在您的第二个选项中,缩放效果不会平滑,因为您只会在不同级别拥有不同的图像。
即使您不需要它那么平滑但为了避免在缩放效果上加载图像的时间,您应该在缩放完成之前加载所有图像。但是在这种情况下,将一张重图像加载一次并平滑缩放比将多张不同尺寸的图像更轻。
第二种选择肯定会增加网络流量的开销,从而导致性能下降。因此,使用一张图像然后对其应用缩放级别会更好,但是这样您就可以选择图像类型,如 png、gif 等(更适合您的)。
在实践中,png 质量很好,适合这种操作。