가로 세로 비율을 유지하면서 크기가 조정 된 이미지를 웹 페이지에 표시하는 방법은 무엇입니까?

JavaScript를 사용하여 클라이언트 측에서 이미지 크기를 조정하는 가장 빠르고 쉬운 방법은 무엇입니까?가로 세로 비율을 유지하면서 크기가 조정 된 이미지를 웹 페이지에 표시하는 방법은 무엇입니까?

편집 : 죄송합니다, 나는 당신이 말은 실제로 이미지 크기를 조정하거나 크기를 설정하면 잘 모르겠어요 표시 클라이언트 측에서 크기를 조정할 이미지에 가장 좋은 방법 ..

2009-06-10 mattt

사용자가 클라이언트에서 이미지를 업로드하려는 경우 이미지를 서버로 보내기 전에 먼저 크기를 조정하여 네트워크 트래픽을 최소화 할 방법이 있습니까? –

@ 제프리 : 그래, 맞아. 그렇지 않으면 그냥 전선 아래로 보내기 전에 서버 쪽 크기를 조정하십시오. –

@mattt : 이미지를 업로드하기 전에 크기를 조정할 수있는 솔루션을 제공하는 사람들이 많습니다. 그게 니가 찾고 있던거야? (질문의 현재 텍스트가 약간 명확하지 않고 편집이 도움이 될 것입니다.) –

쉬운. 당신이 flash10으로, 플래시에 의해 연기 너무하지 않은 경우

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>Client-Side Image Resize (Why?!)</title> 
    <script type="text/javascript"> 
     window.onload = function() { 
     var url = "http://www.google.com/intl/en_ALL/images/logo.gif"; 
     var img = new Image(); 
     img.onload = function() { 
      var w = parseInt((this.width + "").replace(/px/i, ""), 10); 
      var h = parseInt((this.height + "").replace(/px/i, ""), 10); 

      // 50% scale 
      w = (w/2) + "px"; 
      h = (h/2) + "px"; 

      var htmlImg = document.createElement("img"); 
      htmlImg.setAttribute("src", url); 
      htmlImg.setAttribute("width", w); 
      htmlImg.style.width = w; 
      htmlImg.setAttribute("height", h); 
      htmlImg.style.height = h; 
      document.body.appendChild(htmlImg); 
     } 
     img.src = url; 
     } 
    </script> 
    </head> 
    <body> 
    <h1>Look, I'm Resized!</h1> 
    </body> 
</html>

출처

2009-06-10 05:39:52

무게와 높이를 만드는 것이 이미지의 크기를 의미하지는 않습니다. –

을 의미하는 이미지가에 표시됩니다. 하나는 불가능하며 다른 하나는 jQuery를 사용하여 width 및 height 속성을 설정하는 것입니다.

http://docs.jquery.com/CSS/width

출처

2009-06-10 03:48:38

http://docs.jquery.com/CSS/height

는 성명에서 그것을하고 싶은 경우 다음 높이와 너비 속성이 가장 가능성이 가장 좋은 것입니다.

애니메이션을 원한다면 .animate(...) 명령을 사용하고 높이와 너비를 매개 변수로 설정할 수 있습니다. 그러면 이미지가 부드럽게 전환됩니다.

출처

2009-06-10 03:52:32 Hugoware

-2

이미지는 항상 표시 할 크기로 제공해야합니다. 네트워크를 통해 하나의 파일을 복사하고 클라이언트 측에서 조작하려고하는 대신 서버에 여러 복사본을 갖는 것이 좋습니다. 이것을 고려 : 네트워크 자원의

폐기물은 당신이 실제로 크기 조정 클라이언트 측

에 이미지를 확대/축소하는 몇 가지 이미징 API에 CPU의 100X80

유사한 폐기물을 필요로 할 때 500X400 이미지를 전송 이미지가 높이/너비의 단순한 변화가 아닙니다. 원본 이미지 크기와 다른 크기 (스타일, 스크립트 등을 통해)를 지정하면 브라우저는 기본 API (예 : win32 draw)를 사용하여 이미지를 적절히 축소/확대합니다. 이미지 자르기 (이미지 부분 삭제)는 더 쉽지만 거의 필요 없습니다.

출처

2009-06-10 04:31:28 Sesh

-1 "항상 제공해야 함" 서로 다른 크기로 동일한 이미지를 재사용하면 대역폭을 절약하는 데 유용 할 수 있습니다. 또한 사용자가 이미지를 가져올 수 있도록 허용하는 경우 (예 : 포럼에서) 크기를 조정할 수 있습니다. – Pool

이제 서버로 보내기 전에 클라이언트 측에서 처리 업로드 된 파일의 검색을합니다. 그래서 숨겨진/투명/작은 플래시 개체를 사용하여 클라이언트가 자신의 이미지를 업로드하고 이미지의 크기를 조정 한 다음 (일부 좋은 이미지 조작 apis를 가짐) 서버에 바이트 데이터를 보낼 수 있습니다.

as3 core lib에는 이미지를 업로드하기 전에 형식을 인코딩하려는 경우 jpeg 및 png 인코더가 있습니다.

당신은 플래시가없는 경우 항상 플렉스 3 (4) SDK를 다운로드하고 매우 강력한 도구가 될 것입니다 업로드하기 전에) = 모두 무료

출처

2009-06-10 06:06:21 justlost

크기 조정을 그것을 할에 FlashDevelop 사용할 수 있습니다. 이렇게하면 이미지를 서버에 업로드하는 데 걸리는 시간이 줄어 듭니다. 종종 사용자는 카메라에서 5 메가 픽셀의 이미지를 가지고 있으며 이미지 편집기를 사용하여 크기를 줄이는 방법에 대한 단서가 없습니다. 우리가 업로드하고 싶은 것은 1500 픽셀 너비의 사진, jpg 또는 png가 500Kbyte 미만으로 압축 된 것입니다.

이 복장 Thin File은 할 수 있다고 주장하지만 아직 조사하지 않았습니다. JQuery를 사용하여 동일한 작업을 수행하는 방법을 찾고 싶었습니다.업로드 전에

이

http://www.swfupload.org/

출처

2009-10-05 20:36:27

플래시 (10)는 클라이언트 측 이미지 크기 조정을 지원한다. 유연하고 긴밀한 JavaScript 통합으로 어떤 백엔드 언어, 빠르고 고품질의 이미지를 사용해 보겠습니다.

자바 스크립트 통합을 보여줍니다 메인 페이지보다 더 좋은 데모 : 맥주로 http://www.shift8creative.com/projects/agile-uploader/advanced-demo.html

무료. 희망이 도움이됩니다.

출처

2009-11-25 16:07:29 Andras