精华内容
下载资源
问答
  • jquery获取img实际长宽

    千次阅读 2016-11-01 11:21:26
    jquery获取img实际长宽$(function(){ var imgSrc = $("#image").attr("src"); getImageWidth(imgSrc,function(w,h){ console.log({width:w,height:h}); }); });function getImageWidth(url,callback){

    jquery获取img实际长宽

    $(function(){
        var imgSrc = $("#image").attr("src");
        getImageWidth(imgSrc,function(w,h){
            console.log({width:w,height:h});
        });
    });
    
    function getImageWidth(url,callback){
        var img = new Image();
        img.src = url;
    
        // 如果图片被缓存,则直接返回缓存数据
        if(img.complete){
            callback(img.width, img.height);
        }else{
                // 完全加载完毕的事件
            img.onload = function(){
            callback(img.width, img.height);
            }
            }
    
    }
    展开全文
  • title date categories html5通过load获取图片长宽 2018-10-31 17:48:43 +0800 ...html5有naturalWidth,naturalHeight属性获取图片的长宽,但是必须在图片加载完成之后才能获取。可以...
    titledatecategories
    html5通过load获取图片长宽
    2018-10-31 17:48:43 +0800
    js

    html5有naturalWidth,naturalHeight属性获取图片的长宽,但是必须在图片加载完成之后才能获取。可以使用load事件。但load在已有缓存时是不会执行的

    function setWidthHeight($span, nWidth, nHeight, imgIndex) {
        $span.text(nWidth + "X" + nHeight);
        if(imgIndex == 0) {
            $span.append("<em class=\"c-pink ml10 main-pic\">主图</em>");
        }
    }
    $(".small-img").each(function () {
        var imgDom = $(this)[0];
        nWidth = imgDom.naturalWidth;
        if(nWidth == 0) {
            $(this).load(function () {
                setWidthHeight($(this).parent().next("span"), imgDom.naturalWidth, imgDom.naturalHeight, $(".small-img").index(this));
            });
        } else {
            setWidthHeight($(this).parent().next("span"), imgDom.naturalWidth, imgDom.naturalHeight, $(".small-img").index(this));
        }
    });
    
    展开全文
  • 目前我们常用的获取图片实际宽度高度的方法,要么是在DOM中写入,要么就是等图片加载完毕后才开始获取,用户体验极其不好,今天特意整理一个办法,可以让javascript在html加载完毕后就可以立即获取img文件的头数据...
  • 获取图片长宽getimagesize等

    千次阅读 2018-07-23 10:46:05
    //图片路径 路径错误返回false $imgsize = getimagesize(img($info['imgurl'],$imgs_input_wh[0],$imgs_input_wh[1])); $width = $imgsize[0]; $height = $imgsize[1];  

    //图片路径   路径错误返回false

    $imgsize = getimagesize(img($info['imgurl'],$imgs_input_wh[0],$imgs_input_wh[1]));
    $width = $imgsize[0];
    $height = $imgsize[1];

     

    展开全文
  • Java爬虫+URL获取Img高宽.zipJava爬虫+URL获取Img高宽.zip
  • js动态获取图片长宽尺寸(兼容所有浏览器,速度...javascript无法获取img文件头数据,真的是这样吗?本文通过一个巧妙的方法让javascript获取它。 这是大部分人使用预加载获取图片大小的例子: 01 var...

    js动态获取图片长宽尺寸(兼容所有浏览器,速度极快)

    lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如filick相册的全屏效果)。javascript无法获取img文件头数据,真的是这样吗?本文通过一个巧妙的方法让javascript获取它。

    这是大部分人使用预加载获取图片大小的例子:

    01 var imgLoad = function (url, callback) {
    02     var img = new Image();
    03 
    04     img.src = url;
    05     if (img.complete) {
    06         callback(img.width, img.height);
    07     else {
    08         img.onload = function () {
    09             callback(img.width, img.height);
    10             img.onload = null;
    11         };
    12     };
    13 
    14};

    可以看到上面必须等待图片加载完毕才能获取尺寸,其速度不敢恭维,我们需要改进。

    web应用程序区别于桌面应用程序,响应速度才是最好的用户体验。如果想要速度与优雅兼得,那就必须提前获得图片尺寸,如何在图片没有加载完毕就能获取图片尺寸?

    十多年的上网经验告诉我:浏览器在加载图片的时候你会看到图片会先占用一块地然后才慢慢加载完毕,并且不需要预设width与height属性,因为浏览器能够获取图片的头部数据。基于此,只需要使用javascript定时侦测图片的尺寸状态便可得知图片尺寸就绪的状态。

    当然实际中会有一些兼容陷阱,如width与height检测各个浏览器的不一致,还有webkit new Image()建立的图片会受以处在加载进程中同url图片影响,经过反复测试后的最佳处理方式:

    01// 更新:
    02// 05.27: 1、保证回调执行顺序:error > ready > load;2、回调函数this指向img本身
    03// 04-02: 1、增加图片完全加载后的回调 2、提高性能
    04 
    05/**
    06  * 图片头数据加载就绪事件 - 更快获取图片尺寸
    07  * @version 2011.05.27
    09  * @param   {String}    图片路径
    10  * @param   {Function}  尺寸就绪
    11  * @param   {Function}  加载完毕 (可选)
    12  * @param   {Function}  加载错误 (可选)
    13  * @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
    14         alert('size ready: width=' + this.width + '; height=' + this.height);
    15     });
    16  */
    17 var imgReady = (function () {
    18     var list = [], intervalId = null,
    19 
    20     // 用来执行队列
    21     tick = function () {
    22         var i = 0;
    23         for (; i < list.length; i++) {
    24             list[i].end ? list.splice(i--, 1) : list[i]();
    25         };
    26         !list.length && stop();
    27     },
    28 
    29     // 停止所有定时器队列
    30     stop = function () {
    31         clearInterval(intervalId);
    32         intervalId = null;
    33     };
    34 
    35     return function (url, ready, load, error) {
    36         var onready, width, height, newWidth, newHeight,
    37             img = new Image();
    38 
    39         img.src = url;
    40 
    41         // 如果图片被缓存,则直接返回缓存数据
    42         if (img.complete) {
    43             ready.call(img);
    44             load && load.call(img);
    45             return;
    46         };
    47 
    48         width = img.width;
    49         height = img.height;
    50 
    51         // 加载错误后的事件
    52         img.onerror = function () {
    53             error && error.call(img);
    54             onready.end = true;
    55             img = img.onload = img.onerror = null;
    56         };
    57 
    58         // 图片尺寸就绪
    59         onready = function () {
    60             newWidth = img.width;
    61             newHeight = img.height;
    62             if (newWidth !== width || newHeight !== height ||
    63                 // 如果图片已经在其他地方加载可使用面积检测
    64                 newWidth * newHeight > 1024
    65             ) {
    66                 ready.call(img);
    67                 onready.end = true;
    68             };
    69         };
    70         onready();
    71 
    72         // 完全加载完毕的事件
    73         img.onload = function () {
    74             // onload在定时器时间差范围内可能比onready快
    75             // 这里进行检查并保证onready优先执行
    76             !onready.end && onready();
    77 
    78             load && load.call(img);
    79 
    80             // IE gif动画会循环执行onload,置空onload即可
    81             img = img.onload = img.onerror = null;
    82         };
    83 
    84         // 加入队列中定期执行
    85         if (!onready.end) {
    86             list.push(onready);
    87             // 无论何时只允许出现一个定时器,减少浏览器性能损耗
    88             if (intervalId === null) intervalId = setInterval(tick, 40);
    89         };
    90     };
    91})();

    调用例子:

    2     alert('size ready: width=' this.width + '; height=' this.height);
    3});
     
    展开全文
  • 安装库: pip install pillow 运行测试代码: # encoding=utf-8 import requests from io import BytesIO ...url = 'http://img1.2345.com/duoteimg/zixunImg/local/2018/02/06/15178886066294.jpg'...
  • js获取img原始宽高

    2021-01-12 11:31:10
    获取img原始宽高使用:naturalWidth,naturalHeight。 如果图片宽高比大于浏览器宽高比,则设置图片宽100%,高度自适应; 如果图片宽高比小于浏览器宽高比,则设置图片高100%,宽度自适应; resizeImg(index){ ...
  • lightbox类效果为了让图片居中显示而使用预加载,需要等待完全...javascript无法获取img文件头数据,真的是这样吗?本文通过一个巧妙的方法让javascript获取它。 这是大部分人使用预加载获取图片大小的例子: ...
  •  我们都知道一般的img标签都有个src的属性,浏览器在解析img标签的时候就会读取src属性的值,并从值所指向的地址获取到图片。如果我们在写img标签的时候图片地址不写在src属性上而是写在data-original上这样浏览器...
  • 并且同时还可以获得图片的长宽相素以及图片文件的大小。demo如下: $(function(){ $("#pstimg").change(function(){ var file = this.files[0]; alert("文件大小:"+(file.size / 10
  • 获取 img元素图片 的原始尺寸

    千次阅读 2019-05-08 18:45:10
    用js获取图片宽高,再获取 盒子 宽高 , 计算 图片 和 盒子的宽高比 如果图片宽 > 高,那么比较图片宽度与盒子宽度; 如果图片高 > 宽,那么比较图片高度与盒子高度; 如果图片宽度大于 盒子 宽度, 那么图片宽度...
  • svg中image如何获取图片本身的长宽,然后把图片长宽设置成这个长宽
  • // Get on screen image var screenImage = $("#image"); // Create new offscreen image to test var theImage = new Image();...theImage.src = screenImage.attr("src");...// Get accurate measurements ...
  • In OpenCV, I'm able to capture frames using VideoCapture in C++, however, when I try to get the data from a frame and calculate length, it just returns me 0.Below is my sample code:VideoCapture cap(0)...
  • Java-获取图片的长宽属性

    千次阅读 2017-11-11 21:50:58
    BufferedImage image1 = ImageIO.read(new File("照片路径")); int width = image1.getWidth(); int height = image1.getHeight(); 将目标文件的路径填进去就好了。
  • 长宽获取(此方法只在网络加载图片,且未知其大小前需要控制时使用) image.src=PATH;//图片路径,以下都是判断浏览器,然后获取大小,也就是我们常做的预加载图片。 var userAgent = navigator....
  • 获取WebP格式图片的长宽

    千次阅读 2016-07-11 10:49:12
    通过查看十六进制文件,发现WebP格式图片的长宽信息位于文件头第26、27(高),28、29(宽)这四个字节中。 Java代码: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 ...
  • Python如何获取JPG图片的长宽等信息

    万次阅读 2015-01-13 08:58:45
    使用PIL模块,windows安装包下载: ...使用方法 # coding: utf8 # 获取指定图片的长和宽 from PIL import Image img = Image.open("img.jpg") print img.size 运行结果: (52, 54)
  • 在开发过程中,由于浏览器的缓存,有时候获取到&lt;img&gt;标签图片的高度并不是图片真实的高度,会影响我们在js代码中一些对图片尺寸的处理,那么怎么获取图片的真是高度呢?方法如下:// 获取图片真实高度...
  • 怎样获取上传图片的长宽

    千次阅读 2007-11-22 18:09:00
    方法一:客户端: function abc() { alert(img2.width); } 方法二:服务端//从文件或数据流得到Image对象------------------------------------System.Drawing.Image image=System.Drawing.Image.Fro
  • 快速切图铺页面用---就是不需要手动输入背景图的长宽 自动获取背景图的长宽 : <div class="wrap"> <div style="background: url(images/by_01.jpg) no-repeat top center;"></div> <...
  • 我的代码是 &lt;ul class="list-j clr" id="listJoin"&gt; &lt;li&gt;&lt;div style="line-height: 104px;"&...img src="res/images/1
  • 先要根据URL获取到图片,然后在根据得到的图片进行操作。 需要的: import java.net.URL; import java.awt.image.BufferedImage; import java.io.InputStream; import javax.imageio.ImageIO; 1:...
  • 下面有几个方法,本质上都是在内存中创建一个图片,获取这个图片的属性. 方法一,原生的,对于已缓存的和动态加载的都可以 Demo:  http://jsfiddle.net/9543z/2/ function LoadImage(imgSrc, callback){ var ...
  • 语法格式使用getimagesize 函数获取图像大小及相关信息,成功返回一个数组array getimagesize ( string $filename [, array &$imageinfo ] )$imagesize = getimagesize("1001.jpg");var_dump($imagesize);echo ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,482
精华内容 2,592
关键字:

获取img长宽