JavaScript를 사용하여 이미지 크기(높이 및 너비)를 가져오는 방법
페이지에 있는 이미지의 치수를 가져올 수 있는 자바스크립트나 jQuery API 또는 방법이 있습니까?
JavaScript를 사용하여 이미지를 프로그래밍 방식으로 가져오고 치수를 확인할 수 있습니다...
const img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';이미지가 마크업의 일부가 아닌 경우 유용합니다.
클라이언트 폭 및 클라이언트높이는 DOM 요소의 내부 치수(마진 및 테두리 제외)의 현재 브라우저 내 크기를 표시하는 DOM 속성입니다.그래서 IMG 요소의 경우, 이것은 보이는 이미지의 실제 치수를 얻을 것입니다.
var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
(렉스와 이안의 답변 외에도) 다음과 같은 내용이 있습니다.
imageElement.naturalHeight
그리고.
imageElement.naturalWidth
이미지 요소뿐만 아니라 이미지 파일 자체의 높이와 너비를 제공합니다.
jQuery를 사용하고 있고 이미지 크기를 요청하는 경우 로드될 때까지 기다려야 합니다. 그렇지 않으면 0만 표시됩니다.
$(document).ready(function() {
$("img").load(function() {
alert($(this).height());
alert($(this).width());
});
});
용사를 합니다.clientWidth 제쓸모가 없어졌습니다.제 생각에 키는 이제 쓸모가 없어졌습니다.
실제로 반환되는 값을 알아보기 위해 HTML5로 몇 가지 실험을 했습니다.
우선 이미지 API의 개요를 얻기 위해 대시라는 프로그램을 사용했습니다.
라고 되어 있습니다.height그리고.width이미지의 렌더링된 높이/폭 및 다음과 같은 값입니다.naturalHeight그리고.naturalWidth이미지의 고유 높이/폭(및 HTML5 전용)입니다.
저는 높이 300, 너비 400의 파일에서 아름다운 나비의 이미지를 사용했습니다.그리고 이 자바스크립트 코드:
var img = document.getElementById("img1");
console.log(img.height, img.width);
console.log(img.naturalHeight, img.naturalWidth);
console.log($("#img1").height(), $("#img1").width());
그리고 나서 저는 높이와 너비를 위해 인라인 CSS와 함께 이 HTML을 사용했습니다.
<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
결과:
/* Image element */ height == 300 width == 400
naturalHeight == 300 naturalWidth == 400
/* jQuery */ height() == 120 width() == 150
/* Actual rendered size */ 120 150
그런 다음 HTML을 다음과 같이 변경했습니다.
<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />
즉, 인라인 스타일보다는 높이 및 너비 속성을 사용합니다.
결과:
/* Image element */ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/* jQuery */ height() == 90 width() == 115
/* Actual rendered size */ 90 115
그런 다음 HTML을 다음과 같이 변경했습니다.
<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
즉, 속성과 CSS를 모두 사용하여 어느 것이 우선하는지 확인합니다.
결과:
/* Image element */ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/* jQuery */ height() == 120 width() == 150
/* Actual rendered size */ 120 150
jQuery를 사용하여 다음 작업을 수행합니다.
var imgWidth = $("#imgIDWhatever").width();
다른 모든 사람들이 잊어버린 것은 로드하기 전에 이미지 크기를 확인할 수 없다는 것입니다.작성자가 게시된 모든 메서드를 확인할 때 로컬 호스트에서만 작동합니다.
여기서 jQuery를 사용할 수 있으므로 이미지를 로드하기 전에 'ready' 이벤트가 실행됩니다.$('#xx').width() 및 .height()는 onload 이벤트 이상에서 발생해야 합니다.
로드가 실제로 완료될 때까지 이미지 크기를 알 수 없으므로 로드 이벤트의 콜백을 사용해야만 이 작업을 수행할 수 있습니다.아래의 코드와 같은 것...
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';
모든 기능으로 통합해 imageDimensions()) 그것은 약속을 사용합니다.
// helper to get dimensions of an image
const imageDimensions = file =>
new Promise((resolve, reject) => {
const img = new Image()
// the following handler will fire after a successful loading of the image
img.onload = () => {
const { naturalWidth: width, naturalHeight: height } = img
resolve({ width, height })
}
// and this handler will fire if there was an error with the image (like if it's not really an image or a corrupted one)
img.onerror = () => {
reject('There was some problem with the image.')
}
img.src = URL.createObjectURL(file)
})
// here's how to use the helper
const getInfo = async ({ target: { files } }) => {
const [file] = files
try {
const dimensions = await imageDimensions(file)
console.info(dimensions)
} catch(error) {
console.error(error)
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
Select an image:
<input
type="file"
onchange="getInfo(event)"
/>
<br />
<small>It works offline.</small>자연 높이 및 폭을 구하는 방법
document.querySelector("img").naturalHeight;
document.querySelector("img").naturalWidth;<img src="img.png">스타일 높이 및 너비를 얻으려면 다음을 수행합니다.
document.querySelector("img").offsetHeight;
document.querySelector("img").offsetWidth;예를 들어, 우리는 다음과 같은 이미지 치수를 얻고자 합니다.<img id="an-img" src"...">
// Query after all the elements on the page have loaded.
// Or, use `onload` on a particular element to check if it is loaded.
document.addEventListener('DOMContentLoaded', function () {
var el = document.getElementById("an-img");
console.log({
"naturalWidth": el.naturalWidth, // Only on HTMLImageElement
"naturalHeight": el.naturalHeight, // Only on HTMLImageElement
"offsetWidth": el.offsetWidth,
"offsetHeight": el.offsetHeight
});
})
자연 치수
el.naturalWidth그리고.el.naturalHeight이미지 파일의 자연스러운 크기를 얻을 수 있습니다.
레이아웃 치수
el.offsetWidth그리고.el.offsetHeight문서에서 요소가 렌더링되는 차원을 얻을 수 있습니다.
이 답변은 바로 제가 찾던 것이었습니다(jQuery).
var imageNaturalWidth = $('image-selector').prop('naturalWidth');
var imageNaturalHeight = $('image-selector').prop('naturalHeight');
속성을 찾기 전에 이미지를 로드할 수 있도록 소스 코드를 개선한 것 같습니다.그렇지 않으면 파일이 브라우저에 로드되기 전에 다음 문이 호출되었기 때문에 '0 * 0'으로 표시됩니다.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']);
}
2019년에 JavaScript 및/또는 TypeScript를 사용하는 사람들에게 도움이 될 수 있다고 생각했습니다.
일부에서 제안한 것처럼 다음이 올바르지 않다는 것을 알게 되었습니다.
let img = new Image();
img.onload = function() {
console.log(this.width, this.height) // Error: undefined is not an object
};
img.src = "http://example.com/myimage.jpg";
이것은 정확합니다.
let img = new Image();
img.onload = function() {
console.log(img.width, img.height)
};
img.src = "http://example.com/myimage.jpg";
결론:
사용하다img,것은 아니다.this에서, 서에onload기능.
jQuery 라이브러리를 통해
사용하다.width()그리고..height().
jQuery 너비 및 jQuery 높이에 더 있습니다.
코드 예제
$(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>실제 이미지 크기를 사용하기 전에 원본 이미지를 로드해야 합니다.jQuery 프레임워크를 사용하면 간단한 방법으로 실제 이미지 크기를 얻을 수 있습니다.
$("ImageID").load(function(){
console.log($(this).width() + "x" + $(this).height())
})
jQuery 답변:
$height = $('#image_id').height();
$width = $('#image_id').width();
jQuery에 있는 나의 2센트
고지 사항:이것이 반드시 이 질문에 답하지는 않지만, 우리의 역량을 넓혀줍니다.jQuery 3.3.1에서 테스트 및 작동했습니다.
다음을 고려해 보겠습니다.
이미지 URL/경로가 있고 DOM에서 렌더링하지 않고 이미지 너비와 높이를 얻고자 하는 경우,
DOM에서 이미지를 렌더링하기 전에 오프셋 부모 노드 또는 이미지 디브 래퍼 요소를 이미지 폭 및 높이로 설정하여 다양한 이미지 크기에 대한 유체 래퍼를 생성해야 합니다. 예를 들어, 버튼을 클릭하여 모달/라이트 박스에서 이미지를 볼 때
다음과 같이 작업할 것입니다.
// image path
const imageUrl = '/path/to/your/image.jpg'
// Create dummy image to get real width and height
$('<img alt="" src="">').attr("src", imageUrl).on('load', function(){
const realWidth = this.width;
const realHeight = this.height;
alert(`Original width: ${realWidth}, Original height: ${realHeight}`);
})
최근 플렉스 슬라이더의 오류로 인해 동일한 문제가 발생했습니다.로드 지연으로 인해 첫 번째 이미지의 높이가 더 작게 설정되었습니다.저는 그 문제를 해결하기 위해 다음과 같은 방법을 시도해 보았는데 효과가 있었습니다.
// Create an 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';
이렇게 하면 원래 너비 또는 0이 아닌 설정한 너비에 대한 높이가 제공됩니다.
니키 드마이어는 배경 사진을 요청했습니다. 저는 단순히 CSS 콘텐츠에서 가져와 "url()"을 대체합니다.
var div = $('#my-bg-div');
var url = div.css('background-image').replace(/^url\(\'?(.*)\'?\)$/, '$1');
var img = new Image();
img.src = url;
console.log('img:', img.width + 'x' + img.height); // Zero, image not yet loaded
console.log('div:', div.width() + 'x' + div.height());
img.onload = function() {
console.log('img:', img.width + 'x' + img.height, (img.width/div.width()));
}
다음과 같이 JavaScript 또는 jQuery에서 페이지가 로드될 때 onload 처리기 속성을 적용할 수 있습니다.
$(document).ready(function(){
var width = img.clientWidth;
var height = img.clientHeight;
});
이것은 Node.js에 대한 대안적인 답변입니다.OP가 의미한 것은 그것이 아닐 수도 있지만, 유용할 수도 있고 질문의 범위에 있는 것처럼 보입니다.
이 솔루션은 Node.js가 있는 솔루션이며 예제에서는 Next.js 프레임워크를 사용하지만 모든 Node.js 프레임워크에서 작동합니다.NPM 패키지를 사용하여 서버 측에서 이미지 속성을 확인합니다.
예제 사용 사례:아래 코드를 사용하여 Airtable Automation 스크립트에서 이미지의 크기를 확인했습니다. 이 스크립트는 내 것을 호출합니다.analyzeImageAPI 및 이미지의 속성을 반환합니다.
import {
NextApiRequest,
NextApiResponse,
} from 'next';
import probe from 'probe-image-size';
export const analyzeImage = async (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
try {
const result = await probe('http://www.google.com/intl/en_ALL/images/logo.gif');
res.json(result);
} catch (e) {
res.json({
error: true,
message: process.env.NODE_ENV === 'production' ? undefined : e.message,
});
}
};
export default analyzeImage;
산출물:
{
"width": 276,
"height": 110,
"type": "gif",
"mime": "image/gif",
"wUnits": "px",
"hUnits": "px",
"length": 8558,
"url": "http://www.google.com/intl/en_ALL/images/logo.gif"
}
저 같은 경우에는.Filetype(이미지임이 보장됨)을 입력하고 DOM에 로드하지 않고 이미지 치수를 원합니다.
일반 전략:변환File로.ArrayBuffer변환ArrayBufferbase64 문자열에 → 이를 이미지 소스로 사용합니다.Image클래스 → 사용naturalHeight&naturalWidth치수를 구하려고 합니다.
const fr = new FileReader();
fr.readAsArrayBuffer(image); // Image the 'File' object
fr.onload = () => {
const arrayBuffer: ArrayBuffer = fr.result as ArrayBuffer;
// Convert to base64. String.fromCharCode can hit a stack overflow error if you pass
// the entire arrayBuffer in, and iteration gets around this
let binary = '';
const bytes = new Uint8Array(arrayBuffer);
bytes.forEach(b => binary += String.fromCharCode(b));
const base64Data = window.btoa(binary);
// Create an image object. Note, a default width/height MUST be given to the constructor (per
// the documentation) or naturalWidth/Height will always return 0.
const imageObj = new Image(100, 100);
imageObj.src = `data:${image.type};base64,${base64Data}`;
imageObj.onload = () => {
console.log(imageObj.naturalWidth, imageObj.naturalHeight);
}
}
이를 통해 이미지 치수와 가로 세로 비율을 모두 얻을 수 있습니다.File그것을 렌더링하지 않고.쉽게 변환할 수 있습니다.onload함수 - RxJS 관측 가능한 변수 사용fromEvent더 나은 비동기 환경을 위해:
// fr is the file reader, and this is the same as fr.onload = () => { ... }
fromEvent(fr, 'load')
간단하게, 당신은 이렇게 테스트할 수 있습니다.
<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>
const file = event.target.files[0];
const img = new Image();
img.onload = function () {
width = img.width;
height = img.height;
};
img.src = URL.createObjectURL(file);
alert(width + "x" + height);
상위 div에서 브라우저 해석 설정을 제거하는 것이 중요합니다.따라서 실제 이미지의 너비와 높이를 원한다면 사용할 수 있습니다.
$('.right-sidebar').find('img').each(function(){
$(this).removeAttr("width");
$(this).removeAttr("height");
$(this).imageResize();
});
이것은 제가 TYPO3 프로젝트의 한 예입니다. 이미지의 실제 속성이 올바른 관계로 확장되어야 합니다.
사용하다
function outmeInside() {
var output = document.getElementById('preview_product_image');
if (this.height < 600 || this.width < 600) {
output.src = "http://localhost/danieladenew/uploads/no-photo.jpg";
alert("The image you have selected is low resolution image. Your image width=" + this.width + ", height=" + this.height + ". Please select image greater or equal to 600x600. Thanks!");
}
else {
output.src = URL.createObjectURL(event.target.files[0]);
}
return;
}
img.src = URL.createObjectURL(event.target.files[0]);
}
여러 이미지 미리 보기 및 업로드에 사용할 수 있습니다.각 영상에 대해 하나씩 선택해야 하는 경우 모든 미리보기 영상 기능에 복사하여 붙여넣고 유효성을 확인합니다!!!
요소의 속성을 가져오기 전에 문서 페이지가 로드되어야 합니다.
window.onload = function(){
console.log(img.offsetWidth,img.offsetHeight);
}
입력 요소에서 얻은 'img' 파일 개체를 전달하기만 하면 됩니다.올바른 파일을 선택하면 이미지의 자연스러운 높이와 너비가 제공됩니다.
function getNeturalHeightWidth(file) {
let h, w;
let reader = new FileReader();
reader.onload = () => {
let tmpImgNode = document.createElement("img");
tmpImgNode.onload = function() {
h = this.naturalHeight;
w = this.naturalWidth;
};
tmpImgNode.src = reader.result;
};
reader.readAsDataURL(file);
}
return h, w;
}
다음을 사용할 수도 있습니다.
var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;
언급URL : https://stackoverflow.com/questions/623172/how-to-get-the-image-size-height-width-using-javascript
'programing' 카테고리의 다른 글
| Git 수정, 삭제 및 추적되지 않은 모든 파일을 추가하시겠습니까? (0) | 2023.05.25 |
|---|---|
| Postgre에서 어떤 타임스탬프 유형을 선택해야 합니까?SQL 데이터베이스? (0) | 2023.05.25 |
| 특정 클래스나 속성이 아닌 요소를 선택하는 CSS 셀렉터를 작성할 수 있습니까? (0) | 2023.05.25 |
| Html에 "활성" 클래스를 추가하는 방법.ASP.NET MVC의 ActionLink (0) | 2023.05.25 |
| NTFS 성능 및 대용량 파일 및 디렉토리 (0) | 2023.05.25 |