使用 jCrop 和服务器端图像 resizing 进行图像剪裁

华宰 发布于 2011/06/01 07:27
阅读 1K+
收藏 3

本文介绍使用 jQuery, jCrop, 和 ImageResizing.Net 来创建 Ajax 的图像剪裁接口,只需要 11 行 JavaScript 代码。

该技术需要 .NET 2.0, 3.0, 3.5, 4.0, both MVC and WebForms.

这里有一些例子:basic demo, advanced demo, 或者直接下载例子打包文件

要求的文件:

混合说明:

  1. 打开 Visual Studio, 右击你的项目并选择 “Add reference”. 浏览并添加 ImageResizer.dll
  2. 在 web.config 中添加 ImageResizer.InterceptModule 到 <modules> 或者<httpModules> 中,如下所示:
    <configuration>
      <system.web>   
        <httpModules>
          <!-- this is for Classic mode and Cassini -->
          <add name="ImageResizingModule" type="ImageResizer.InterceptModule"/>
        </httpModules>
      </system.web>
      <system.webServer>
        <validation validateIntegratedModeConfiguration="false"/>
        <modules>
          <!-- This is for Integrated mode-->
          <add name="ImageResizingModule" type="ImageResizer.InterceptModule"/>
        </modules>
      </system.webServer>
    </configuration>
  3. 添加前面的js文件到项目中

下面是相关的 HTML 和 JavaScript 代码:

  1. 引入脚本文件  jquery.min.js, jquery.Jcrop.js, and the CSS file jquery.Jcrop.js
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.Jcrop.js" type="text/javascript"></script>
    <link href="css/jquery.Jcrop.css" type="text/css" rel="stylesheet" />
  2. 在 HTML 的 body 中插入一个 <div> 和 <a> 元素
    <div class="image-cropper">
        <img src="fountain-small.jpg?width=400" class="image" />
        <a class="result">View the result</a>
    </div>
  3. 编写JavaScript脚本
    $(function () { //On DOM ready
        //Using the 'each' pattern allows multiple cropping image/link pairs per page.
    	$('.image-cropper').each(function(unusedIndex, container) {
    	    container = $(container); //We were passed a DOM reference, convert it to a jquery object
    
    	    //Find the image inside 'container' by class ("image")
    	    var image = container.find("img.image");
    
    	    //Trim the querystring off the image URL.
    	    var path = image.attr('src'); if (path.indexOf('?') > 0) path = path.substr(0, path.indexOf('?'));
    
    	    //Define a function to execute when the cropping rectangle changes.
    	    var update = function (coords) {
    	        if (parseInt(coords.w) <= 0 || parseInt(coords.h) <= 0) return; //Require valid width and height
    
    	        //Build the URL based on the coordiantes. The resizing module will handle everything else.
    	        var url = path + '?crop=(' + coords.x + ',' + coords.y + ',' + coords.x2 + ',' + coords.y2 +
                ')&cropxunits=' + image.width() + '&cropyunits=' + image.height()
    
    	        //Now, update the link 'href' (you could update a hidden field just as easily)
    	        container.find('a.result').attr('href', url);
    	    }
    
    	    //Start up jCrop on the image, specifying our function be called when the selection rectangle changes,
            // and that a 60% black shadow should cover the cropped regions.
    	    image.Jcrop({ onChange: update, onSelect: update, bgColor: 'black', bgOpacity: 0.6 });
    	});
    });

下载完整示例代码:JCropExample2.zip

加载中
返回顶部
顶部