Geek Answers Handbook

How to display modified images on a web page while maintaining aspect ratio?

What is the best and fastest way to resize client-side images using JavaScript?

EDIT: Sorry, I meant the best way to display an image modified on the client side.

+5
source share
8 answers

Easily.

<!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>
+7
source

, flash10 , . , // -, , - ( apis), .

as3 core lib jpeg png-, .

, flex 3 ( 4) sdk flashdevelop, =)

+3

. . 5 , , , . , , - 1500 , jpg png, 500 .

, , . JQuery, .

+3

flash 10 :

http://www.swfupload.org/

+3

, .

- , .animate(...) . .

0

, . , . :

  • 500X400, 100X80
  • API / .

Resizing an image is not a simple change in height / width. When you specify a size other than (through styles, script, etc.), the Original image size, the browser will use its own API (for example, win32 draw) to properly compress / enlarge the image. Cropping an image (losing part of an image) is easier, but rarely required.

-2
source

More articles:


All Articles