웹 페이지에 그림을 비례적으로 표시하는 구현 원리 및 js 코드_javascript 기술

동적 웹사이트에서는 자신의 사진을 업로드해야 하는 경우가 많으며 이러한 사진의 크기를 알 수 없는 경우 섬네일로 표시할 때 비율에 맞게 크기를 조정해야 아름답게 표시됩니다. 최근 골프사이트(http://www.changligolfsales.com)를 예로 들어보자.

본 사이트는 골프용품 이미지를 업로드하여 목록에 썸네일로 표시해야 합니다. 사이트 서버가 Asp를 지원하지만 aspjpeg 등 썸네일 생성 컴포넌트를 지원하지 않아 업로드된 이미지가 바로 썸네일로 표시됩니다. , 비례적으로 크기를 조정해야 합니다. 전제는 사진의 길이와 너비를 얻는 것입니다. 업로드할 때 ADODB.STREAM 개체를 통해 그림의 길이와 너비 정보를 읽어서 저장하는 것입니다. 데이터베이스에 저장하고 페이지가 생성될 때 읽어서 비율을 계산합니다. 이 방법의 명백한 단점은 서버에서 각 사진을 읽고 계산해야 하므로 더 많은 리소스를 소비하고 페이지 열기 지연이 증가한다는 것입니다.
두 번째 방법은 Javascript를 사용하여 계산을 클라이언트에 전송하는 것입니다.

클라이언트에서 Javascript를 사용하여 각 이미지의 크기를 읽고 페이지가 로드된 후 크기를 조정하는 것이 원칙입니다(onload 트리거).

코드 복사 코드는 다음과 같습니다.

//imageDest 이미지를 비례적으로 조정합니다. 너비 W, 높이 H 영역에 표시
function ResizeImage(imageDest, W, H)
{
//표시 상자 너비 W, 높이 H
var image = new Image() ;
image.src = imageDest.src;
if(image.width>0 && image.height>0)
{
//가로세로 비율 비교
if(image.width/ image.height >= W/H)//상대 디스플레이 프레임: width > height
{
if(image.width > W) //너비가 디스플레이 프레임 너비 W보다 큽니다. 높이는 압축되어야 합니다
{
imageDest.width = W;
imageDest.height = (image.height*W)/image.width;
}
else //너비가 더 작습니다. 표시 상자 너비 W보다 크며 그림이 완전히 표시됩니다.
{
imageDest.width = image.width
imageDest.height =
}
}
else//마찬가지로
{
if(image.height > H)
{
imageDest.height = H
imageDest.width = (image.width*H) /image.height;
}
else
{
imageDest.width = image.width;
imageDest.height =
}
}
}
}

위 함수는 이미지의 크기를 조정합니다.
골프 웹사이트의 각 썸네일 ID는 imgProductItem으로 설정됩니다. 예: 내부의 150x113은 표시 상자의 최대 크기입니다. 왜냐하면 onload가 완료되면 처리 기능이 실행되어야 하므로 여기서 특정 크기를 설정해야 하고, 그렇지 않으면 전체 이미지 로딩 과정에서 페이지가 로딩됩니다. 조판 장애가 있었고, RsizeAllImageById 실행 후 정상으로 돌아왔습니다.
일괄 연산 기능 추가:

코드 복사 코드는 다음과 같습니다.

// 페이지에서 지정된 ID를 가진 모든 이미지의 크기를 비례적으로 조정합니다.
function RsizeAllImageById(id, W, H)
{
var imgs = document.getElementsByTagName("img")
for(var i = 0; i{
if(imgs[i].id == id)
{
ResizeImage(imgs[i], W, H); 🎜 >}
}
}

이런 식으로

코드 복사 코드는 다음과 같습니다.

; 헤드 영역에 추가:

<script><!-- <br>function init() <br>{ <BR>RsizeAllImageById("imgProductItem", 150, 113) <BR>} <BR>// --> script> <br><br> <br>는 모든 이미지를 썸네일로 표시합니다.</script>