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

Delete
  • 131

目前有两种思路:

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

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

回复
阅读 655
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);
         }
});

在服务端处理

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏