javascript获取图片宽高的例子总结-js教程-网页制作-壹聚教程网javascript获取图片宽高的例子总结在网上有找到很多关于获得图片宽高的程序代码了，但觉得都不怎么样了，今天来给各位整理一篇图片宽高js代码，文章非常详细的分析了，希望对大家有帮助。 一、简陋的获取图片方式
// 图片地址 后面加时间戳是为了避免缓存&&&
var img_url = '/static/upload/8813441.jpg?'+Date.parse(new Date());&&
// 创建对象&&&
var img = new Image();&&&
// 改变图片的src&&&
img.src = img_&&&
// 打印&&&
alert('width:'+img.width+',height:'+img.height);
宽高都是0的这个结果很正常，因为图片的相关数据都没有被加载前它的宽高默认就是0
于是可以这么优化！
二、onload后在打印
// 图片地址 后面加时间戳是为了避免缓存&&&
var img_url = '/static/upload/8813441.jpg?'+Date.parse(new Date());&&&
// 创建对象&&&
var img = new Image();&&&
// 改变图片的src&&&
img.src = img_&&&
// 加载完成执行&&&
img.onload = function(){&&&
&&& // 打印&&&
&&& alert('width:'+img.width+',height:'+img.height);&&&
通过onload就能获取到图片的宽高了。但onload大一点的图通常都比较慢，不实用，但只要图片被浏览器缓存，那么图片加载几乎就不用等待即可触发onload，我们要的是占位符。所以有些人通过缓存获取也可以这么写。
三、通过complete与onload一起混合使用
为了测试缓存效果，注意以下测试图片的url都不加时间戳
// 图片地址&&&
var img_url = '/static/upload/8813441.jpg';&&&
// 创建对象&&&
var img = new Image();&&&
// 改变图片的src&&&
img.src = img_&&&
// 判断是否有缓存&&&
plete){&&&
&&& // 打印&&&
&&& alert('from:complete : width:'+img.width+',height:'+img.height);&&&
&&& // 加载完成执行&&&
&&& img.onload = function(){&&&
&&&&&&& // 打印&&&
&&&&&&& alert('from:onload : width:'+img.width+',height:'+img.height);&&&
第一次执行，永远是onload触发
你再刷新，几乎都是缓存触发了
从缓存里读取图片的宽高不用说，非常方便快捷，今天我们要解决的是没有缓存而又快速的相比onload更快的方式去获取图片的宽高。我们常常知道有些图片虽然没有完全down下来，但是已经先有占位符，然后一点一点的加载。既然有占位符那应该是请求图片资源服务器响应后返回的。可服务器什么时候响应并返回宽高的数据没有触发事件，比如onload事件。于是催生了第四种方法
四、通过定时循环检测获取
看看以下例子，为了避免从缓存里读取数据，每一次请求都带时间戳：
// 图片地址&&&
var img_url = '/static/upload/8813441.jpg?'+Date.parse(new Date());&&&
// 创建对象&&&
var img = new Image();&&&
// 改变图片的src&&&
img.src = img_&&&
// 定时执行获取宽高&&&
var check = function(){&&&
&&& document.body.innerHTML += '&div&from:&span style=&color:&&check&/span& : width:'+img.width+',height:'+img.height+'&/div&';&&
var set = setInterval(check,40);&&&
// 加载完成获取宽高&&&
img.onload = function(){&&&
&&& document.body.innerHTML += '&div&from:&span style=&color:blue&&onload&/span& : width:'+img.width+',height:'+img.height+'&/div&';&&&
&&& // 取消定时获取宽高&&&
&&& clearInterval(set);&&&
IE7 8 9 10
通过以上测试，我们发现定时检测图片宽高的方式要比onload快多了，打印的行数越多表示onload时间越长，40毫秒执行一次，基本100毫秒内就能获取图片的宽高，chrome甚至在第一次循环的时候就已经获得数据。从以上数据来分析，其实我们可以在定时函数里判断只要图片的宽高都大于0就表示已经获得正确的图片宽高。我们把时间打上，来看看通过定时获取宽高或者onload获取宽高所需要多少时间。
var start_time = new Date().getTime();&&&
// 图片地址&&&
var img_url = /desk/bizhi/image/2/.jpg?'+start_&&&
// 创建对象&&&
var img = new Image();&&&
// 改变图片的src&&&
img.src = img_&&&
// 定时执行获取宽高&&&
var check = function(){&&&
&&& // 只要任何一方大于0&&&
&&& // 表示已经服务器已经返回宽高&&&
&&& if(img.width&0 || img.height&0){&&&
&&&&&&& var diff = new Date().getTime() - start_&&&
&&&&&&& document.body.innerHTML += '&div&from:&span style=&color:&&check&/span& : width:'+img.width+',height:'+img.height+', time:'+diff+'ms&/div&';&&&
&&&&&&& clearInterval(set);&&&
var set = setInterval(check,40);&&&
// 加载完成获取宽高&&&
img.onload = function(){&&&
&&& var diff = new Date().getTime() - start_&&&
&&& document.body.innerHTML += '&div&from:&span style=&color:blue&&onload&/span& : width:'+img.width+',height:'+img.height+', time:'+diff+'ms&/div&';&&&
这是一张2560 * 1600大小的图片，各浏览器执行结果都能看到通过快速获取的方法几乎都在200毫秒以内，而onload至少五秒以上，这差别之大说明快速获取图片宽高非常实用
最后再补充一下网上常用的js获得图片高宽的代码
JS获取图片实际宽高，以及根据进行自适应
&img src=&http://xxx.jpg& id=&imgs& onload=&adapt();&/&
function adapt(){
var tableWidth = $(&#imgTable&).width(); //表格宽度
var img = new Image();
img.src =$('#imgs').attr(&src&) ;
var imgWidth = img. //图片实际宽度
if(imgWidth&tableWidth){
$('#imgs').attr(&style&,&width: auto&);
$('#imgs').attr(&style&,&width: 100%&);
js动态获取图片的尺寸
var _w = parseInt($(window).width());//获取浏览器的宽度
$(&.new_mess_c img&).each(function(i){
&&&&&&&&var img = $(this);
&&&&&&&&var realW//真实的宽度
&&&&&&&&var realH//真实的高度
&&&//这里做下说明，$(&&img/&&)这里是创建一个临时的img标签，类似js创建一个new Image()对象！
&&&$(&&img/&&).attr(&src&, $(img).attr(&src&)).load(function() {
&&&&&&&&&&&&&&&&/*
&&&&&&&&&&&&&&&&&&如果要获取图片的真实的宽度和高度有三点必须注意
&&&&&&&&&&&&&&&&&&1、需要创建一个image对象：如这里的$(&&img/&&)
&&&&&&&&&&&&&&&&&&2、指定图片的src路径
&&&&&&&&&&&&&&&&&&3、一定要在图片加载完成后执行如.load()函数里执行
&&&&&&&&&&&&&&&&&*/
&&&&&&&&&&&&&&&&realWidth = this.
&&&&&&&&&&&&&&&&realHeight = this.
&&&&&&&&&&&&&&&//如果真实的宽度大于浏览器的宽度就按照100%显示
&&&&&&&&&&&&&&&&if(realWidth&=_w){
&&&&&&&&&&&&&&&&&&&&&&&$(img).css(&width&,&100%&).css(&height&,&auto&);
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&else{//如果小于浏览器的宽度按照原尺寸显示
&&&&&&&&&&&&&&&&&&&&&&$(img).css(&width&,realWidth+'px').css(&height&,realHeight+'px');
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&});
&});上一页：没有了 &&&&&下一页：相关内容主题 : cocos2d-js实现的图片变灰，已测试在不支持webGL的浏览器上完美运行
级别: 侠客
可可豆: 575 CB
威望: 554 点
在线时间: 95(时)
发自: Web Page
来源于&&分类
cocos2d-js实现的图片变灰，已测试在不支持webGL的浏览器上完美运行&&&
本帖被 superdragon 执行提前操作()
因为最近用js开发项目，要实现图片变灰，之前用shader实现的，但是会有一个问题，在不支持webGL的浏览器上无法变灰，运行会出问题，所以我就自己用canvas实现了一个变灰的代码，我已经在火狐浏览器、safari浏览器，并且也测试了app方式，均没问题，完美运行！下面是代码：//精灵变灰函数cc.Sprite.createGraySprite=function(filename){ //得到纹理 var texture = cc.textureCache.getTextureForKey(filename); if (!texture) { texture = cc.textureCache.addImage(filename); }  //判断运行的平台是不是浏览器 var isHtml5 = (typeof document !== 'undefined');
if (isHtml5) { var canvas = document.createElement('canvas');  var image = texture.getHtmlElementObj(); //将图片的高宽赋值给画布 canvas.width = image. canvas.height = image. //获得二维渲染上下文if(canvas.getContext) {//为了安全起见，先判断浏览器是否支持canvas var context = canvas.getContext(&2d&); context.drawImage(image, 0, 0);//将得到的image图像绘制在canvas对象中 var canvasData = context.getImageData(0, 0, canvas.width, canvas.height);//返回ImageData对象// 填充灰色【读取像素值和实现灰度计算】 for (var x = 0; x & canvasData. x++) { for (var y = 0; y & canvasData. y++) {// Index of the pixel in the array var idx = (x + y * canvasData.width) * 4; var r = canvasData.data[idx + 0]; var g = canvasData.data[idx + 1]; var b = canvasData.data[idx + 2];// 灰度的计算 var gray = .299 * r + .587 * g + .114 *// assign gray scale value canvasData.data[idx + 0] = // Red channel canvasData.data[idx + 1] = // Green channel canvasData.data[idx + 2] = // Blue channel//canvasData.data[idx + 3] = 255; // Alpha channel// 新增黑色边框 if (x & 8 || y & 8 || x & (canvasData.width - 8) || y & (canvasData.height - 8)) { canvasData.data[idx + 0] = 0; canvasData.data[idx + 1] = 0; canvasData.data[idx + 2] = 0; } } } context.putImageData(canvasData, 0, 0); // 处理完成的数据重新载入到canvas二维对象中 var tempTexture = new cc.Texture2D(); tempTexture.initWithElement(canvas); tempTexture.handleLoadedTexture(); return new cc.Sprite(tempTexture); } 
}  //使用shader方式实现图片变灰（适用于app和浏览器不支持canvas的情况） if(!cc.GLProgram.createWithByteArrays){ cc.GLProgram.createWithByteArrays = function(vert, frag){ var shader = new cc.GLProgram();   shader.initWithVertexShaderByteArray(vert, frag);  shader.link();   shader.updateUniforms(); setTimeout(function(){ shader.link();   shader.updateUniforms();                 }, 0); return } } var SHADER_POSITION_GRAY_FRAG = &varying vec4 v_fragmentC\n&+  &varying vec2 v_texC\n&+    (isHtml5? &uniform sampler2D CC_Texture0;\n&:&&)+&void main()\n&+         &{\n&+&    vec4 v_orColor = v_fragmentColor * texture2D(CC_Texture0, v_texCoord);\n&+&    float gray = dot(v_orColor.rgb, vec3(0.299, 0.587, 0.114));\n&+&    gl_FragColor = vec4(gray, gray, gray, v_orColor.a);\n&+&}\n&; var SHADER_POSITION_GRAY_VERT = &attribute vec4 a_\n&+&attribute vec2 a_texC\n&+&attribute vec4 a_\n&+&\n&+&varying vec4 v_fragmentC\n&+&varying vec2 v_texC\n&+ &\n&+                               &void main()\n&+ &{\n&+                           &gl_Position = &+ (isHtml5?&(CC_PMatrix * CC_MVMatrix)&:&CC_PMatrix&) + & * a_\n&+&v_fragmentColor = a_\n&+&v_texCoord = a_texC\n&+ &}&; var sprite=new cc.Sprite(texture); var shader = cc.GLProgram.createWithByteArrays(SHADER_POSITION_GRAY_VERT, SHADER_POSITION_GRAY_FRAG); shader.addAttribute(cc.ATTRIBUTE_NAME_POSITION, cc.VERTEX_ATTRIB_POSITION);   shader.addAttribute(cc.ATTRIBUTE_NAME_COLOR, cc.VERTEX_ATTRIB_COLOR);   shader.addAttribute(cc.ATTRIBUTE_NAME_TEX_COORD, cc.VERTEX_ATTRIB_TEX_COORDS);                 sprite.setShaderProgram(shader); return}此函数返回值是一个cc.Sprite类型，用法很简单使用方法：//测试精灵变灰的代码        var sprite=cc.Sprite.createGraySprite(res.HelloWorld_png);        sprite.attr({            x: size.width / 2,            y: size.height / 2,            scale: 0.5,            rotation: 180        });        this.addChild(sprite);就是这样了，如果有什么问题，请给我留言！！！！[ 此帖被fqq14-10-20 10:31重新编辑 ]
级别: 新手上路
UID: 47769
可可豆: 71 CB
威望: 35 点
在线时间: 50(时)
发自: Web Page
级别: 论坛版主
UID: 362141
可可豆: 1218 CB
威望: 1193 点
在线时间: 370(时)
发自: Web Page
回 楼主(fqq3512863) 的帖子
给力给力。必须顶个
cocos2d-js----------dragon
级别: 新手上路
UID: 311947
可可豆: 44 CB
威望: 45 点
在线时间: 125(时)
发自: Web Page
问一下，你这样子吧图片纹理变灰，需要回复的话，要做什么处理呢?
级别: 侠客
可可豆: 575 CB
威望: 554 点
在线时间: 95(时)
发自: Web Page
回 3楼(hezijie) 的帖子
要恢复就重新创建一个塞，最直接的方法。
级别: 新手上路
可可豆: 2 CB
威望: 2 点
在线时间: 11(时)
发自: Web Page
我之前用改变sprite的不透明度来实现类似变灰的效果，效果还行
关注本帖(如果有新回复会站内信通知您)
8*2-5 正确答案:11
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 浏览移动版