`
darrenzhu
  • 浏览: 779321 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JavaScript获取图片(Image)的大小(宽度,高度)

阅读更多
如果只有图片的URL
function getImageDimensions(imgStyleRule) {
  var defaultSize, img;
  defaultSize = {
    width: 10,
    height: 30
  };
  if (!imgStyleRule || !imgStyleRule.style || !imgStyleRule.style.backgroundImage) {
    return defaultSize;
  }
  img = new Image();
  img.src = imgStyleRule.style.backgroundImage.replace(/url\(|\)$|"/ig, '');
  return {
    width: img.width,
    height: img.height
  };
}


[size=medium]
如何获取imgStyleRule, 参考
http://darrenzhu.iteye.com/admin/blogs/2065946


如果图片已经加载,可以通过如下方式获取
var img = document.getElementById('imageid'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

[/size]
分享到:
评论

相关推荐

    JavaScript获取图片的原始尺寸以宽度为例

    主要介绍了JavaScript如何获取图片的原始尺寸以宽度为例,需要的朋友可以参考下

    jquery.imgGetSize:在图片onload之前获取图片的大小

    image-size使用该插件,可以在图片onload之前获取图片的大小,在瀑布流布局中,应该可能会有用处。###实现原理:使用轮询,在图片onload之前,获取到图片大小。如果图片已经被缓存过,直接返回相关信息。回调参数...

    JS获取图片高度宽度的方法分享

    一般获取图片高度宽度的写法: 代码如下: var img = new Image(); img.src = imgsrc; var imgWH = CalcImgTiple(img.width, img.height); 但chrome中测试 无法获取到。img.width, img.height都为0 原因:当图片...

    JavaScript详解(第2版)

     12.6.2 改变图片的高度和宽度属性   12.7 应知应会   练习   第13章 事件处理   13.1 事件处理函数介绍   13.2 事件处理的内联模型   13.2.1 HTML和事件处理函数   13.2.2 设置事件处理函数...

    JavaScript 图片切割效果

    其中GetSize获取尺寸程序可以根据图片实际大小按比例缩放到要设置的大小: Code var iWidth = nowWidth, iHeight = nowHeight, scale = iWidth / iHeight; //按比例设置 if(fixHeight){ iWidth = (iHeight = ...

    dummyImage_js:用于网络的虚拟图像生成JavaScript

    获取文档中所有不带src属性的img标签的宽度,高度和高度,并生成图像。 如果没有宽度和高度,则每个宽度和高度的默认值均为100px(击败作品)。 优点是,与描述src中虚拟图像的URL的服务器类型机制相反,不需要...

    browser-image-size:在浏览器中获取图像大小

    浏览器图片大小 安装 $ npm install browser-image-size 要使用 browser-image-size 你必须 polyfill 。 用法 var browserImageSize = require ( 'browser-image-size' ) browserImageSize ( '128.png' ) . then ...

    jQuery 图片浏览放大插件 ZoomImage V1.0.rar

    默认: 0.3 border integer 图片的边框宽度。默认: 0 duration integer 动态化持续时间。默认: 300 译者注:控制图片放大的时间和标题栏、控制栏显示的时间,两个操作不同步进行。 easing string 动画缓和。默认: ...

    image-perspective-crop:具有透视图调整功能的简单JavaScript图像裁剪

    originalSize原始图像大小(宽度,高度)的数组 包含四个已调整点(左上,右上,右下,左下)的x和y的cropPoints数组 scaleFactors数组,其中包含图像的比例因子(宽度,高度) 调整透视图的目的是在服务器端进行...

    grapesjs-tui-image-editor:GrapesJS TOAST UI图像编辑器

    Image Editor labelApply 应用按钮上使用的标签Apply height 默认编辑器高度650px width 默认编辑器宽度100% commandId 用于创建图片编辑器命令的ID tui-image-editor toolbarIcon 组件工具栏中使

    react-native-cloudinary-image-display:React本机Cloudinary图像显示

    height 上载图片的高度。可选的:options 除了必需的cloud_name标识符之外,您还可能需要定义许多可选参数。 请参阅以获取有关这些参数的更多信息。 如果未设置选项对象,则将使用以下默认选项: {crop: 'fill',...

    js使用小技巧

    Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...

    ExtAspNet_v2.3.2_dll

    -为Button,MenuItem(MenuButton,MenuHyperLink),AccordionLink,TreeNode,Image(如果ImageUrl为空,则取Icon的值)增加Icon属性。 +2009-09-15 v2.1.1 -修正不能动态修改AccordionPane属性Items的BUG。 +为...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -为Button,MenuItem(MenuButton,MenuHyperLink),AccordionLink,TreeNode,Image(如果ImageUrl为空,则取Icon的值)增加Icon属性。 +2009-09-15 v2.1.1 -修正不能动态修改AccordionPane属性Items的BUG。 +为...

    JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法

    本文实例讲述了JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法。分享给大家供大家参考,具体如下: 这里演示js如何给页面中所有的img对象加上onclick事件,且实现在新窗体中查看该图片文件的功能: ...

    从入门到精通HTML5——PDF——网盘链接

     15.1.2 使用blob接口获取文件的类型与大小 282  15.1.3 通过类型过滤选择的文件 283  15.2 使用FileReader接口读取文件 285  15.2.1 检测浏览器是否支持FileReader接口 285  15.2.2 FileReader接口的方法 ...

Global site tag (gtag.js) - Google Analytics