最簡單的基本jquery外掛程式擷取教程
| 代碼如下 |
複製代碼 |
var img = $("#img_id"); // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
.attr("src", $(img).attr("src"))
.load(function() {
pic_real_width = this.width; // Note: $(this).width() will not
pic_real_height = this.height; // work for in memory images.
}); |
例子，如果你覺得jquery外掛程式包大了，我們可以使用js來實現
| 代碼如下 |
複製代碼 |
<img src="yun_qi_img/xxx.jpg" id="imgs" onload="adapt();"/> function adapt(){
var tableWidth = $("#imgTable").width(); //表格寬度
var img = new Image();
img.src =$('#imgs').attr("src") ;
var imgWidth = img.width; //圖片實際寬度
if(imgWidth<tableWidth){
$('#imgs').attr("style","width: auto");
}else{
$('#imgs').attr("style","width: 100%");
}
} css代碼 <style type="text/css">
<!--
img{
max-width:100%;height:auto;
}
-->
</style> |
如果你想擷取遠程機器圖片我們可以用下面代碼。
| 代碼如下 |
複製代碼 |
<title>JavaScript擷取遠程圖片大小</title>
<script>
var img=null;
function s()
{
if(img)img.removeNode(true);
img=document.createElement("img");
img.style.position="absolute";
img.style.visibility="hidden";
img.attachEvent("onreadystatechange",orsc);
img.attachEvent("onerror",oe);
document.body.insertAdjacentElement("beforeend",img);
img.src=inp.value;
}
function oe()
{
alert("cant load img");
}
function orsc()
{
if(img.readyState!="complete")return false;
alert(img.offsetHeight+":"+img.offsetWidth);
}
</script>
<input id=inp style="width:400" value="/images/logo.gif">
<button onclick="s()">擷取</button> |
