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