js获取img的图像宽高

jquary获得图片的高度宽度
window.onload=function(){
var imgH = $(“#bimg1”).height();
$(“#slide”).height(imgH);
~~~~~~~~~~~~~~~~~~~
JS获取背景图片宽高比根据浏览器宽度动态赋值
&style type="text/css"&
  width: 100%;
  background: url("bg.jpg") no-repeat;
  background-size: 100% auto;
  border: 1px solid #f00;
&script type="text/javascript"&
function resizeDiv() {
  var div = document.getElementById("div");
  var style = div.currentStyle || getComputedStyle(div, false);
  var img_src = style.backgroundImage
    .replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
  var img = new Image();
  img.onload = function() {
    var ratio = img.width / img.
    div.style.height = parseInt(div.offsetWidth / ratio) + "px";
    img = null;
  img.src = img_
window.onload = function() {
  resizeDiv();
window.onresize = function() {
  resizeDiv();
&div id="div"&&/div&js判断上传图片类型 以及图片文件大小,和高度宽度尺寸大小控制 - 开源中国社区
当前访客身份:游客 [
当前位置:
发布于 日 8时,
/*==============================================================================**&Filename:&uploadimg.js*&Description:js判断上传图片类型&以及图片文件大小,和高度宽度尺寸大小控制*&Version:&1.0*&Created:&*&Author:&liangjw*&E-mail&:&*&Q&&&Q&&&:&*&Profile&Url:http://90ideas.net/*&Company:&Copyright&(C)&Create&Family&Wealth&Power&By&Peter*==============================================================================*/&*&备注信息:&上传部分自己总结的常用方法的封装,有不足和不完美之处,希望大家指出来,愿意一起&*&主要研究erp,cms,crm,b2b,oa等系统和网站的开发,欢迎有共同追求和学的IT人员一起学习和交流。&*&学习和讨论有关asp.net&&mvc&,Ajax&,jquery&,html/css,&xml&,sqlserver&,wpf,IIS以及服务器的搭建和安全性相关技术的交流和学习。
代码片段(1)
1.&[代码][JavaScript]代码&&&&
* 判断图片类型
* @param ths
type="file"的javascript对象
* @return true-符合要求,false-不符合
function checkImgType(ths){
if (ths.value == "") {
alert("请上传图片");
if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(ths.value)) {
alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
ths.value = "";
var img=new Image();
while(true){
if(img.fileSize&0){
if(img.fileSize&10*1024){
alert("图片不大于10M。");
* 判断图片大小
* @param ths
type="file"的javascript对象
* @param width
需要符合的宽
* @param height
需要符合的高
* @return true-符合要求,false-不符合
function checkImgPX(ths, width, height) {
img = document.createElement("img");
document.body.insertAdjacentElement("beforeEnd", img); // firefox不行
img.style.visibility = "hidden";
img.src = ths.
var imgwidth = img.offsetW
var imgheight = img.offsetH
alert(imgwidth + "," + imgheight);
if(imgwidth != width || imgheight != height) {
alert("图的尺寸应该是" + width + "x"+ height);
ths.value = "";
开源中国-程序员在线工具:
相关的代码(1354)
0回/2371阅
[JavaScript]
0回/1004阅
[JavaScript]
0回/1412阅
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
2回/1100阅
[JavaScript]
0回/1024阅
[JavaScript]
[JavaScript]
filepath哪里来
2楼:孙吉大虾 发表于
同问&filepath哪里来
3楼:柳梦璃 发表于
zhongwenyouwenti
4楼:nanxia灯塔 发表于
此段代码请谨慎使用,后果自负。
5楼:yushyd 发表于
var images = &document.getElementById("subjectPicUrlFile").files[0].
if(images&1024000){
alert("图片不能大于 1 M ");
============
&form id="fileform"&
&input type="file" id="subjectPicUrlFile" name="subjectPicUrlFile" style="display: none"
onchange="javascript:setImagePreview('subjectPicUrlFile','subjectPicUrlDiv','subjectPicUrlImg');"
class="m-wrap span4" /&&
开源从代码分享开始
liangjw0504的其它代码用php或js获取图片大小高宽尺寸
稿源:code-123.com
以下为引用的内容:
&?arr=getimagesize(&images/album_01.gif&); echo arr[3];strarr=explode(&\&&,arr[3]);echo strarr[1];?&
&HTML& &HEAD& &TITLE&演示图片等比例缩小&/TITLE& &script& function Wa_SetImgAutoSize(img) { //var img=document.all.img1;//获取图片 var MaxWidth=200;//设置图片宽度界限 var MaxHeight=100;//设置图片高度界限 var HeightWidth=img.offsetHeight/img.offsetW//设置高宽比 var WidthHeight=img.offsetWidth/img.offsetH//设置宽高比 alert(&test&+img.offsetHeight+img.fileSize);if(img.offsetHeight&1) alert(img.offsetHeight);if(img.readyState!=&complete&){//确保图片完全加载}
if(img.offsetWidth&MaxWidth){ img.width=MaxW img.height=MaxWidth*HeightW } if(img.offsetHeight&MaxHeight){ img.height=MaxH img.width=MaxHeight*WidthH } }
function CheckImg(img) { var message=&&;var MaxWidth=1;//设置图片宽度界限 var MaxHeight=1;//设置图片高度界限
if(img.readyState!=&complete&){//确保图片完全加载}if(img.offsetHeight&MaxHeight) message+=&\r高度超额:&+img.offsetHif(img.offsetWidth&MaxWidth) message+=&\r宽度超额:&+img.offsetWif(message!=&&) alert(message);} &/script& &/HEAD& &BODY& &img src=&images/frequency.gif& border=0 id=&img1& onload=&CheckImg(this);&& &br& &input id=inp type=&file& onpropertychange=&img1.src=this.&& &/BODY& &/HTML&
有好的文章希望站长之家帮助分享推广,猛戳这里
本网页浏览已超过3分钟,点击关闭或灰色背景,即可回到网页随笔 - 449
评论 - 1905一般获取图片高度宽度的写法:
var img = new Image();img.src =var imgWH = CalcImgTiple(img.width, img.height);
但chrome中测试 无法获取到。img.width, img.height都为0
原因:当图片不是本地图片,而是网络图片
onload 在成功地装载了图像时调用的事件处理程序。
在做web开发,其中有一个需求:利用Javascript获取要加载的图片的尺寸,所以很自然的,想到了img的onload方法,在firefox下开发完成后,到IE下调试,发现img的onload事件很多情况下都不被调用。
最初的代码如下:
var img = new I &&&
img.src = "test.gif"; &&&
img.onload = function(){ &&&&&&&
alert ( img.width ); &&&
这段代码看着没什么问题,但是为什么onload没有被IE调用呢?因为IE会缓存图片,第2次加载的图片,不是从服务器上传过来的,而是从缓冲区里加载的。是不是从缓冲区里加载的图片就不触发onload事件呢?我于是我测试了以下代码,成功了~
var img = new I &&&
img.onload = function(){ &&&&&&&
alert ( img.width ); &&& }; &&&
img.src = "test.gif";
把onload写到前面去,先告诉浏览器如何处理这张图片,再指定这张图片的源,这样就正常了。所以,不是IE没有触发onload事件,而是因为加载缓冲区的速度太快,以至于没有运行到img.onload的时候,onload事件已经触发了。这让想到了Ajax,在写xmlhttp的时候,都是先指定onstatechange的回调函数,然后再send数据的,道理是一样的
阅读(...) 评论()

我要回帖

更多关于 js获取img的图像 的文章

 

随机推荐