如何不完全加载图片拿到图片的原始宽高

Delete
  • 131

目前有两种思路:

  1. 借鉴exif.js的做法,以二进制的形式请求图片数据,然后从二进制里面读取图片的宽高信息。javascript能否只请求图片的部分数据(含有宽高的数据),而不用把整个图片的二进制都请求下来?
  2. 牛人写的n年前的老代码。大概思路是请求这张图,起一个定时器不停问浏览器拿到原始宽高了没有,拿到数据时这张图不一定被浏览器完全加载。

第二种方式虽能实现效果,但是感觉思路上不如第一种,有没有大牛实践过第一种的。

评论
阅读 570
3 个回答

思路不错,但想通过ajax请求部分数据似乎没法实现。我尝试了一些方法,浏览器会认为“Accept-Encoding”这个头数据是安全相关的,不允许ajax进行设置,而是自动加上诸如gzip之类的内容,而如果其含有gzip,且服务器支持gzip,很显然,数据就不可能直接进行部分下载了,nginx服务器会把要下载的东西整个打包发过来。至少ningx是这样的。大多数服务器不可能不开gzip压缩,所以,想仅仅从前端解决这个事情干扰太多,不太现实。
研究过程代码,仅供参考,不过觉得没有太大意义。

var url='./imgs/pic.png',type='GET';
$.ajax({
         //type: 'GET',
         headers: {
            // 'Access-Token':$.cookie('access_token'),
            'Accept-Ranges' : ' bytes',
            "Accept-Encoding":""
            // 'Range': ' bytes = 0-40' 
         },
         url: url,
         //data: data,
         beforeSend: function (XMLHttpRequest) {
            // XMLHttpRequest.headers
            console.log(XMLHttpRequest);
               // XMLHttpRequest.setRequestHeader("Accept-Encoding", "");
                XMLHttpRequest.setRequestHeader("Range", "bytes=30-40");
         },
         success: function(data) {
           console.log(data);
         },
         error: function(err) {
         },
         complete: function(XMLHttpRequest, status) { //请求完成后最终执行参数 
            console.log(XMLHttpRequest, status);
         }
});

在服务端处理

然而,你说的这两种方法,都已经加载了图片了。

撰写回答

登录后参与交流、获取后续更新提醒

宣传栏