Apakah ada jQuery atau murni JS Api atau metode untuk mendapatkan dimensi dari sebuah gambar pada halaman?
Pemrograman, anda dapat mendapatkan gambar tersebut dan memeriksa dimensi menggunakan Javascript...
var img = new Image(); img.onload = function() { alert(ini.lebar + 'x' + ini.tinggi); } img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';
Hal ini dapat berguna jika gambar bukan bagian dari markup.
clientWidth dan clientHeight DOM sifat yang menunjukkan saat ini di-browser ukuran dimensi batin dari elemen DOM (tidak termasuk margin dan border). Jadi dalam kasus IMG elemen ini akan mendapatkan dimensi sebenarnya dari gambar terlihat.
var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
Juga (selain untuk Rex dan Ian's jawaban) ada:
imageElement.naturalHeight
dan
imageElement.naturalWidth
Ini memiliki tinggi dan lebar dari file gambar itu sendiri (bukan hanya elemen gambar).
Jika anda menggunakan jQuery dan anda meminta ukuran gambar yang anda harus menunggu sampai mereka beban atau anda hanya akan mendapatkan nol.
$(document).ready(function() {
$("img").load(function() {
alert($(this).height());
alert($(this).width());
});
});
Saya pikir update untuk jawaban ini berguna karena salah satu yang terbaik-sebagai balasan menunjukkan menggunakan clientWidth
dan clientHeight, yang saya pikir sekarang usang.
Saya telah melakukan beberapa eksperimen dengan HTML5, untuk melihat nilai-nilai yang benar-benar mendapatkan kembali.
Pertama-tama, saya menggunakan sebuah program yang disebut Dash untuk mendapatkan gambaran dari gambar API.
Ia menyatakan bahwa tinggi
dan lebar
yang diberikan tinggi/lebar dari gambar dan bahwa naturaltinggi
dan naturalWidth
adalah intrinsik tinggi/lebar gambar (dan HTML5 saja).
Saya menggunakan sebuah gambar kupu-kupu yang indah, dari sebuah file dengan ketinggian 300 dan lebar 400. Dan ini Javascript:
var img = document.getElementById("img1");
console.log(img.height, img.width);
console.log(img.naturalHeight, img.naturalWidth);
console.log($("#img1").height(), $("#img1").width());
Kemudian saya menggunakan HTML ini, dengan inline CSS untuk tinggi dan lebar.
<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
Hasil:
/*Image Element*/ height == 300 width == 400
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 120 width() == 150
/*Actual Rendered size*/ 120 150
Saya kemudian berubah HTML berikut:
<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />
yaitu menggunakan tinggi dan lebar atribut daripada inline styles
Hasil:
/*Image Element*/ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 90 width() == 115
/*Actual Rendered size*/ 90 115
Saya kemudian berubah HTML berikut:
<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
yaitu menggunakan atribut dan CSS, untuk melihat mana yang akan didahulukan.
Hasil:
/*Image Element*/ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 120 width() == 150
/*Actual Rendered size*/ 120 150
Hal lain telah lupa adalah bahwa anda bisa memeriksa ukuran gambar sebelum beban. Ketika penulis cek semua diposting metode ini akan bekerja hanya pada localhost. Sejak jQuery bisa digunakan di sini, ingat bahwa 'siap' acara ini dipecat sebelum gambar yang dimuat. $('#xxx').lebar() dan .ketinggian() harus dipecat di onload event atau lambat.
Anda hanya dapat benar-benar melakukan ini dengan menggunakan callback beban acara seperti ukuran gambar ini tidak diketahui sampai telah benar-benar selesai loading. Sesuatu seperti kode di bawah ini...
var imgTesting = new Image();
function CreateDelegate(contextObject, delegateMethod)
{
return function()
{
return delegateMethod.apply(contextObject, arguments);
}
}
function imgTesting_onload()
{
alert(this.width + " by " + this.height);
}
imgTesting.onload = CreateDelegate(imgTesting, imgTesting_onload);
imgTesting.src = 'yourimage.jpg';
Dengan jQuery perpustakaan-
Gunakan .lebar()
dan .ketinggian()
.
Lebih lanjut dalam jQuery lebar dan jQuery heigth.
$(document).ready(function(){
$("button").click(function()
{
alert("Width of image: " + $("#img_exmpl").width());
alert("Height of image: " + $("#img_exmpl").height());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<img id="img_exmpl" src="http://images.all-free-download.com/images/graphicthumb/beauty_of_nature_9_210287.jpg">
<button>Display dimensions of img</button>
ok guys, saya pikir saya membaik kode sumber untuk dapat membiarkan beban gambar sebelum mencoba untuk mengetahui sifat-sifatnya, jika tidak maka akan menampilkan '0 * 0', karena pernyataan berikutnya akan disebut sebelum file dimuat ke browser. Membutuhkan jquery...
function getImgSize(imgSrc){
var newImg = new Image();
newImg.src = imgSrc;
var height = newImg.height;
var width = newImg.width;
p = $(newImg).ready(function(){
return {width: newImg.width, height: newImg.height};
});
alert (p[0]['width']+" "+p[0]['height']);
}
Sebelum menggunakan real ukuran gambar yang anda harus memuat sumber gambar. Jika anda menggunakan JQuery framework anda bisa mendapatkan nyata ukuran gambar dengan cara yang sederhana.
$("ImageID").load(function(){
console.log($(this).width() + "x" + $(this).height())
})
Dengan asumsi, kita ingin mendapatkan gambar dimensi <img id="an-img" src"...">
`js // Query setelah semua elemen pada halaman telah dimuat. // Atau, gunakan
onload` pada elemen tertentu untuk memeriksa apakah itu dimuat.
dokumen.addEventListener('DOMContentLoaded', function () {
var el = dokumen.getElementById("an-img");
konsol.log({ "naturalWidth": el.naturalWidth, // Hanya di HTMLImageElement "naturaltinggi": el.naturaltinggi, // Hanya di HTMLImageElement "offsetWidth": el.offsetWidth, "offsetHeight": el.offsetHeight });
``
AlamiDimensi**
el.naturalWidth
dan el.naturaltinggi
akan membawa kita natural dimensi, dimensi dari file gambar.
Tata Letak Dimensi
el.offsetWidth
dan el.offsetHeight
akan membawa kita ke dimensi di mana elemen ini diberikan pada dokumen.
Hanya, anda dapat menguji seperti ini.
<script>
(function($) {
$(document).ready(function() {
console.log("ready....");
var i = 0;
var img;
for(i=1; i<13; i++) {
img = new Image();
img.src = 'img/' + i + '.jpg';
console.log("name : " + img.src);
img.onload = function() {
if(this.height > this.width) {
console.log(this.src + " : portrait");
}
else if(this.width > this.height) {
console.log(this.src + " : landscape");
}
else {
console.log(this.src + " : square");
}
}
}
});
}(jQuery));
</script>
var imgSrc, imgW, imgH;
function myFunction(image){
var img = new Image();
img.src = image;
img.onload = function() {
return {
src:image,
width:this.width,
height:this.height};
}
return img;
}
var x = myFunction('http://www.google.com/intl/en_ALL/images/logo.gif');
//Waiting for the image loaded. Otherwise, system returned 0 as both width and height.
x.addEventListener('load',function(){
imgSrc = x.src;
imgW = x.width;
imgH = x.height;
});
x.addEventListener('load',function(){
console.log(imgW+'x'+imgH);//276x110
});
console.log(imgW);//undefined.
console.log(imgH);//undefined.
console.log(imgSrc);//undefined.
Ini adalah metode saya, semoga ini bermanfaat. :)
Baru-baru ini saya mengalami masalah yang sama untuk kesalahan dalam flex slider. Gambar pertama's tinggi ditetapkan lebih kecil karena loading penundaan. Saya mencoba metode berikut untuk menyelesaikan masalah itu dan itu's bekerja.
// create image with a reference id. Id shall be used for removing it from the dom later.
var tempImg = $('<img id="testImage" />');
//If you want to get the height with respect to any specific width you set.
//I used window width here.
tempImg.css('width', window.innerWidth);
tempImg[0].onload = function () {
$(this).css('height', 'auto').css('display', 'none');
var imgHeight = $(this).height();
// Remove it if you don't want this image anymore.
$('#testImage').remove();
}
//append to body
$('body').append(tempImg);
//Set an image url. I am using an image which I got from google.
tempImg[0].src ='http://aspo.org/wp-content/uploads/strips.jpg';
Ini akan memberikan anda ketinggian dengan hormat untuk anda mengatur lebar daripada lebar asli atau Nol.
Anda dapat memiliki sebuah fungsi sederhana seperti berikut (imageDimensions()
) jika anda don't takut menggunakan janji-Janji.
const imageDimensions = file => new Promise((resolve, reject) => {
try {
const img = new Image()
img.onload = () => {
const { naturalWidth: width, naturalHeight: height } = img
resolve({ width, height })
}
img.onerror = () => {
reject('There was some problem during the image loading')
}
img.src = URL.createObjectURL(file)
} catch (error) {
reject(error)
}
})
const getInfo = ({ target: { files } }) => {
const [file] = files
imageDimensions(file)
.then(result => {
console.info(result)
})
.catch(error => {
console.error(error)
})
}
Select an image:
<input
type="file"
onchange="getInfo(event)"
/>