Javascript/jQuery圖像縮放插件

Question

我需要在固定大小的div中顯示圖像。 div下必須有一些控件，如光標欄，它設置顯示圖像的分辨率。 我不介意寫很多東西，但我認爲它可能已經存在。我怎麼找不到這樣的事情？

（我不感興趣的東西像jQZoom也不zoomimage不讓用戶選擇動態的顯示分辨率。）

Answer 1

由於這個問題現在已經看到1K多的時間，我在我的解決方案添加到它。隨意複製和適應。

該解決方案涉及jQuery UI滑塊插件。主要我們創建一個固定大小的div，overflow：scroll，包含一個img標籤，並且我們在其下添加一個滑塊。滑塊'change'事件綁定到img @ width/@ height屬性的重新縮放。

這裏是我們所做的摘錄：

HTML

<div id="pictureFilePreview"> 
     <img id="pictureFilePreviewImg" src="style/images/spacer.gif"/> 
    </div> 
    <div id="pictureSlider"/> 

JS

$('#pictureFilePreview').css('overflow','scroll'); 
$('#pictureFilePreviewImg') 
    .attr("src", "http://url.of.the.image") 
    .css("display","block") 
    .bind("load", function(){ //wait for complete load of the image 
     // Slider 
     var initHeight = parseInt($('#pictureFilePreviewImg').attr("height")); 
     var initWidth = parseInt($('#pictureFilePreviewImg').attr("width")); 
     if ($('#pictureFilePreview').width() < initWidth 
      || $('#pictureFilePreview').height() < initHeight) {     

      var deltaW = $('#pictureFilePreview').width() - initWidth; 
      var deltaH = $('#pictureFilePreview').height() - initHeight; 
      var ratio = 0; 
      if (deltaW < deltaH) { 
       ratio = ($('#pictureFilePreview').width()/initWidth) * 100; 
      } else { 
       ratio = ($('#pictureFilePreview').height()/initHeight) * 100; 
      } 
      $('#pictureSlider').slider({ 
       range: false, 
       min : ratio, 
       values: [100], 
       change: function(event, ui) { 
        var newHeight = ((initHeight) * ui.value/100); 
        var newWidth = ((initWidth) * ui.value/100); 
        $('#pictureFilePreviewImg').attr("height",newHeight); 
        $('#pictureFilePreviewImg').attr("width",newWidth); 
        $('#pictureFilePreview').css('overflow',ui.value === 0?'visible':'scroll'); 
       } 
      }); 
     } 
    }); 

Answer 2

不知道它是否值得你的努力，但有一些了不起的庫，在卡布奇諾做這件事。本教程演練演示如何建立縮放和旋轉圖像的應用：

Scrapbook tutorial