JavaScript를 사용하여 이미지 크기(높이 및 폭)를 얻는 방법
페이지 상의 이미지의 치수를 취득하기 위한 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';이 기능은 이미지가 마크업의 일부가 아닌 경우에 도움이 됩니다.
clientWidth 및 클라이언트높이는 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로 몇 가지 실험을 했습니다.
우선 Dash라는 프로그램을 사용하여 이미지 API의 개요를 확인했습니다.라고 있다height ★★★★★★★★★★★★★★★★★」width 높이이며, '그림'은 '그림' 또는 '그림'입니다.naturalHeight ★★★★★★★★★★★★★★★★★」naturalWidth는 이미지의 고유한 높이/폭(HTML5만 해당)입니다.
높이 300, 폭 400의 줄에서 아름다운 나비의 이미지를 사용했습니다.그리고 이 Javascript:
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' 이벤트가 발생한다는 점에 유의하십시오.$('#xxx').width() 및 .height()는 온로드이벤트 이후에 기동해야 합니다.
실제로 이 작업을 수행하려면 로드이벤트의 콜백을 사용합니다.이미지 사이즈는 실제로 로드가 완료될 때까지 알 수 없기 때문입니다.아래 코드 같은 거...
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>를 들어,.<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이 문서에서 요소가 렌더링되는 치수를 가져옵니다.
자연스러운 높이와 폭을 얻으려면:
document.querySelector("img").naturalHeight;
document.querySelector("img").naturalWidth;<img src="img.png">그리고 스타일 높이와 폭을 얻고 싶다면:
document.querySelector("img").offsetHeight;
document.querySelector("img").offsetWidth;자, 여러분, 저는 소스 코드를 개선해서 이미지를 읽기 전에 속성을 찾을 수 있도록 했습니다.그렇지 않으면 파일이 브라우저에 로드되기 전에 다음 문이 호출되었을 것이기 때문에 '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']);
}
이 답변은 바로 제가 찾고 있던 것입니다(jQuery).
var imageNaturalWidth = $('image-selector').prop('naturalWidth');
var imageNaturalHeight = $('image-selector').prop('naturalHeight');
jQuery 라이브러리 사용 시 -
.width() ★★★★★★★★★★★★★★★★★」.height().
자세한 내용은 jQuery width 및 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>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 프레임워크를 사용하면 간단한 방법으로 실제 이미지 크기를 얻을 수 있습니다.
$("ImageID").load(function(){
console.log($(this).width() + "x" + $(this).height())
})
JQuery 답변:
$height = $('#image_id').height();
$width = $('#image_id').width();
최근 플렉스 슬라이더 오류로 같은 문제가 발생하였습니다.로드 지연으로 인해 첫 번째 영상의 높이가 더 작게 설정되었습니다.나는 그 문제를 해결하기 위해 다음과 같은 방법을 시도했고 효과가 있었다.
// 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';
그러면 원래 너비 또는 0이 아닌 설정한 너비에 대한 높이가 제공됩니다.
내 의견으로는.
면책사항:이것이 반드시 이 질문에 답하는 것은 아니지만, 우리의 역량을 넓힙니다.jQuery 3.3.1에서 테스트 및 동작
다음 사항을 고려하겠습니다.
이미지 URL/경로가 있고 DOM에서 렌더링하지 않고 이미지 폭과 높이를 얻으려고 합니다.
DOM에서 이미지를 렌더링하기 전에 오프셋 부모 노드 또는 image div 래퍼 요소를 이미지 폭과 높이로 설정하여 다양한 이미지 크기에 맞는 유체 래퍼를 만들어야 합니다. 예를 들어 버튼을 클릭하여 모달/라이트 박스에서 이미지를 볼 수 있습니다.
나는 이렇게 할 것이다.
// 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}`);
})
Nicky De Maeyer가 배경 사진을 요청했습니다.저는 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()));
}
다음과 같이 페이지가 js 또는 jquery로 로드될 때 로드 핸들러 속성을 적용할 수 있습니다.
$(document).ready(function(){
var width = img.clientWidth;
var height = img.clientHeight;
});
간단하게 이렇게 테스트할 수 있습니다.
<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>
이것은 Node.js에 대한 대체 답변으로, OP의 의미는 아닐 수 있지만 도움이 될 수 있으며 질문의 범위 내에 있는 것으로 보입니다.
이것은 Node.js를 사용한 솔루션입니다.이 예에서는 Next.js 프레임워크를 사용하지만 Node.js 프레임워크에서는 동작합니다.NPM 패키지를 사용하여 서버 측에서 이미지 속성을 해결합니다.
사용 예:다음 코드를 사용하여 Airtable Automation 스크립트에서 이미지 크기를 해결했습니다. 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-> 변환ArrayBufferto base64 string -> 이 파일을 이미지 소스로 사용합니다.Imageclass -> 사용naturalHeight&naturalWidth치수를 구합니다.
const fr = new FileReader();
fr.readAsArrayBuffer(image); // image the the 'File' object
fr.onload = () => {
const arrayBuffer: ArrayBuffer = fr.result as ArrayBuffer;
// Convert to base64. String.fromCharCode can hit stack overflow error if you pass
// the entire arrayBuffer in, iteration gets around this
let binary = '';
const bytes = new Uint8Array(arrayBuffer);
bytes.forEach(b => binary += String.fromCharCode(b));
const base64Data = window.btoa(binary);
// Create image object. Note, a default width/height MUST be given to constructor (per
// the docs) 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렌더링하지 않고요.쉽게 변환할 수 있습니다.onloadRxJS 관측치에 대한 함수 사용fromEvent비동기 환경 향상:
// fr is the file reader, this is the same as fr.onload = () => { ... }
fromEvent(fr, 'load')
다음 항목도 사용할 수 있습니다.
var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;
브라우저 해석 설정을 부모 div에서 삭제하는 것이 중요합니다.따라서 실제 이미지 폭과 높이를 원한다면
$('.right-sidebar').find('img').each(function(){
$(this).removeAttr("width");
$(this).removeAttr("height");
$(this).imageResize();
});
이 예는 올바른 관계에 따라 크기를 조정하기 위해 이미지의 실제 속성이 필요한 제 TYPO3 프로젝트의 예입니다.
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.
이게 내 방법이야, 도움이 되길 바라.:)
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 resloution image.Your image width=" + this.width + ",Heigh=" + 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 파일 객체를 전달하기만 하면 우리가 올바른 파일을 선택하면 이미지의 netural 높이와 너비를 얻을 수 있습니다.
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;
}
언급URL : https://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript
'source' 카테고리의 다른 글
| CURRENT_TIMESTamp(밀리초 단위) (0) | 2023.01.02 |
|---|---|
| 자노드를 취득하는 최선의 방법 (0) | 2023.01.02 |
| Windows에서 MySQL과 Python의 통합 (0) | 2023.01.02 |
| var_dump를 예쁘게 꾸미다 (0) | 2023.01.02 |
| sudo 없이 mysql 실행 (0) | 2023.01.02 |