jpeg - 防止渐进式 jpeg 完全加载

Question

所以，假设我有一个大版本的图像，它只显示为缩略图。是否可以通过使用渐进式 jpeg 来避免为缩略图创建单独的文件，在达到一定数量的扫描时停止加载，并且仅在用户选择完全打开它时继续加载？

如果是这样，如何控制图像的加载？

提前致谢。

Answer 1

有2种方法:

1.客户端重

先决条件

镜像服务器必须支持range HTTP header

例如。 Range: bytes=0-1024 表示您只请求前 1024 个字节

你 必须提前知道 你要请求多少字节

你可以说是全尺寸的 1/8，如果你从服务器端推送该值

所以客户端应该知道确切的字节数

如果Range 无效或不受支持，则服务器将返回整个图像，这是一个很好的自然“后备”

跨域请求 :如果 html 和图像在不同的域上

Access-Control-Allow-Headers: "range" 必须设置

图像服务器 上的 Apache .htaccess 示例 :

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Headers: "range"
</IfModule>

如果浏览器由于CROS设置不当导致请求失败，代码回退将data-src属性设置为src属性

概述

请求带有 AJAX 请求的图像

将Range请求的AJAX头设置为你想取回多少字节

将mimeType 设置为纯文本(这样我们以后可以对其进行base64 编码)

Base64编码数据并将其设置为图像的src属性(<img src="data:image/jpeg;base64,...">)

当心较大的图像，这对客户端来说可能会很重

如果由于某种原因设置 src 属性失败(例如，不正确的 CROS 设置)，则回退以将 data-src 属性设置为 src 属性

代码

这是建立在 gaetanoM 的精彩回答的基础上的:Get Image using jQuery.ajax() and decode it to base64

// for each img, which has data-src and data-bytes attributes
$('img[data-src][data-bytes]').each(function(i,e){
	$.ajax({
	    url: $(e).data('src'), // url of image
	    type: 'GET',
	    headers: {
	    	'Range':'bytes=0-'+$(e).data('bytes') // Range header, eg. Range: bytes=0-1024
	    },
	    mimeType: "text/plain; charset=x-user-defined"
	}).done(function( data, textStatus, jqXHR ) {
	    $(e).attr('src', 'data:image/jpeg;base64,' + base64encode(data)); // on success we set the base64 encoded data to the image's src attribute
	}).always(function(){
	    // if setting the src failed for whatever reason, we fall back to set the data-src attribute to src attribute
	    if(!$(e).attr('src'))
	        $(e).attr('src', $(e).data('src'));
	});
});

function base64encode(str) {
    var CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
    var out = "", i = 0, len = str.length, c1, c2, c3;
    while (i < len) {
        c1 = str.charCodeAt(i++) & 0xff;
        if (i == len) {
            out += CHARS.charAt(c1 >> 2);
            out += CHARS.charAt((c1 & 0x3) << 4);
            out += "==";
            break;
        }
        c2 = str.charCodeAt(i++);
        if (i == len) {
            out += CHARS.charAt(c1 >> 2);
            out += CHARS.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4));
            out += CHARS.charAt((c2 & 0xF) << 2);
            out += "=";
            break;
        }
        c3 = str.charCodeAt(i++);
        out += CHARS.charAt(c1 >> 2);
        out += CHARS.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
        out += CHARS.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
        out += CHARS.charAt(c3 & 0x3F);
    }
    return out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- total filesize is 35 933 bytes -->
<img data-src="http://shoepimper.com/doklist.com-logo.jpg" data-bytes="1900">
<img data-src="http://shoepimper.com/doklist.com-logo.jpg" data-bytes="2500">
<img data-src="http://shoepimper.com/doklist.com-logo.jpg" data-bytes="5600">

<!-- if data-bytes are erroneous the server will return the whole image -->
<img data-src="http://shoepimper.com/doklist.com-logo.jpg" data-bytes="error">
<!-- if CROS fails, then it falls back to set the data-src attribute to the src attribute -->
<img data-src="/image/QOPRf.jpg" data-bytes="error">

2.服务器端重

详细说明 ProgressiveMonkey 的评论，您可以使用 php 或任何其他服务器端编程语言轻松修剪图像数据。

概述

服务器端 :根据url参数修剪图像数据

如果你想知道第一次扫描到底在哪里结束，请阅读这个精彩的答案:How many bytes are needed for a complete thumbnail of a progressive JPEG?

客户端 :根据需要更改该 url 参数

服务器端代码

<?php
    $div = isset($_GET['div']) && intval($_GET['div'])>1 ? intval($_GET['div']) : 1; // what fraction of the image shall we return
    $img = 'doklist.com-logo.jpg';
    $size = round(filesize($img) / $div); // calculating the size in bytes what we return

    // setting the headers
    header("Content-Type: image/jpeg");
    header("Content-Length: $size");

    $fp = fopen($img, 'r');
        echo fread($fp, $size); // returning the necessary amount of bytes
    fclose($fp);
?>

示例

请在此处查看我们网站 Logo 之一的示例 (Doklist.com)

请随意使用此 url 的 div 参数(另请注意，我的测试服务器可能无法很好地处理增加的流量):
http://shoepimper.com/progressive-thumb.php?div=14

仅读取文件大小的 1/24th 并将其作为整个图像返回:<img src="http://shoepimper.com/progressive-thumb.php?div=24">

读取图像的 1/14th :<img src="http://shoepimper.com/progressive-thumb.php?div=14">

读取图像的 1/6th :<img src="http://shoepimper.com/progressive-thumb.php?div=6">

读取 整个 图像(1/1)<img src="http://shoepimper.com/progressive-thumb.php?div=1">

如果您需要帮助来确定图像是否是渐进式编码的，请使用:http://codepen.io/sergejmueller/full/GJKwv

如果您无法直接访问图像，那么您应该使用代理，这意味着代码本身的结构并没有真正改变，您只是“打开”一个远程文件。