`
yhhazr
  • 浏览: 47659 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
文章分类
社区版块
存档分类
最新评论

jquery插件图片裁剪jcrop

阅读更多

官网地址:http://deepliquid.com/content/Jcrop.html

 

加载

<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script src="js/jquery.Jcrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />

调用

jQuery(window).load(function(){

      // Create variables (in this scope) to hold the API and image size
      var jcrop_api, boundx, boundy;
      
      jQuery('#target').Jcrop({
        onChange: updatePreview,
        onSelect: updatePreview,
        aspectRatio: 1.4468
      },function(){
        // Use the API to get the real image size
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];
        // Store the API in the jcrop_api variable
        jcrop_api = this;
      });

      function updatePreview(c)
      {
        if (parseInt(c.w) > 0)
        {
          var rx = 204 / c.w;
          var ry = 141 / c.h;

          $('#preview').css({
            width: Math.round(rx * boundx) + 'px',
            height: Math.round(ry * boundy) + 'px',
            marginLeft: '-' + Math.round(rx * c.x) + 'px',
            marginTop: '-' + Math.round(ry * c.y) + 'px'
          });
        }
      };
    });
 
<img  id="target" src="test.jpg" />
<div style="width:204px;height:141px;overflow:hidden;">
    <img src="test.jpg" id="preview" alt="Preview" class="jcrop-preview" />    	
</div>
 

 

0
0
分享到:
评论

相关推荐

    jQuery图片裁剪插件Jcrop.js

    **jQuery图片裁剪插件Jcrop.js** Jcrop.js是一款基于jQuery的开源图片裁剪工具,它为网页开发者提供了一种高效、灵活的方式来实现图像裁剪功能。在网页设计中,用户经常需要上传图片并根据需求进行裁剪,以适应特定...

    jQuery图像裁剪插件Jcrop.js.zip

    jQuery图像裁剪插件Jcrop.js是一个用于网页前端的JavaScript库,它允许用户在浏览器上交互式地裁剪图像。这个插件是基于流行的jQuery框架构建的,因此它能够无缝集成到任何使用jQuery的项目中。Jcrop的核心功能是...

    jQuery图片裁剪插件Jcrop.js.zip

    &lt;... &lt;head&gt; &lt;meta charset="utf-8" /&gt;...jQuery图片裁剪插件Jcrop.js&lt;... Jcrop.js实现的一款功能强大的jQuery图片裁剪插件,可以结合后端程序快速的实现图像裁剪的功能,右侧有3个图像缩略图尺寸可选。

    基于jquery的图片裁剪插件

    在jQuery生态中,有许多图片裁剪插件可供选择,如Cropper.js、Jcrop等。这些插件通常具有良好的浏览器兼容性,支持主流的Chrome、Firefox、Safari、Edge以及IE9+。兼容性是选择插件时的重要考量因素,确保用户在各种...

    jquery-Jcrop实现图片裁剪截图上传和保存

    1. **jQuery插件**:jQuery Jcrop是一个JavaScript插件,它扩展了jQuery的功能,为图片裁剪提供了一套完整的解决方案。 2. **图像选择**:Jcrop允许用户通过鼠标拖动来选择图片的一部分,创建一个选区,这被称为...

    跨浏览器的jquery图片剪裁插件Jcrop

    总的来说,Jcrop是一款功能强大且灵活的图片裁剪插件,借助jQuery的强大功能,它在各种浏览器环境下表现出色,为开发者提供了丰富的选项来实现个性化的图片裁剪体验。无论你是初学者还是经验丰富的开发者,Jcrop都是...

    图片裁剪插件JqueryJcrop兼容大数浏览器

    **jQuery Jcrop 插件详解:打造跨浏览器的图片裁剪功能** 在Web开发中,图片裁剪功能常用于用户上传头像、编辑照片或进行个性化定制等场景。`jQuery Jcrop`是一款强大的JavaScript插件,它使得在浏览器中实现图片...

    jQuery的图片裁剪插件集合

    4. imgAreaSelect:一个简单但灵活的插件,允许用户通过鼠标绘制裁剪区域,可与其他jQuery插件配合使用。 5. Bootstrap Image Gallery with Cropper:基于Bootstrap框架,集成了Cropper.js,提供美观的图片预览和...

    Jcrop 基于jquery的图片裁剪插件.zip

    Jcrop是一款基于jQuery的图片裁剪插件,它允许用户在网页上自由选择图像的裁剪区域,从而实现自定义的图像裁剪功能。这款插件广泛应用于网站上的头像上传、图片预览和编辑等领域,为用户提供了一种简单易用的交互...

    PHP+jQuery+jCrop裁剪头像

    3. **jCrop**:jCrop是jQuery的一个插件,用于实现图像的选取和裁剪功能。它提供了一种直观的用户界面,允许用户通过拖动选择图像的一部分,然后将这些裁剪参数发送到服务器进行实际的裁剪操作。jCrop支持响应式设计...

    Jcrop官方的图片裁剪jQuery插件

    Jcrop是一款基于jQuery的开源图片裁剪插件,它为Web开发者提供了在浏览器端实现图片裁剪功能的强大工具。这款插件广泛应用于各种需要用户自定义选择图片区域的场景,如上传头像、图片预览和编辑等。下面将详细介绍...

    jQuery插件-Jcrop 对图片的截取 显示操作

    而Jcrop是基于jQuery的一个强大插件,专门用于实现...总之,Jcrop是一个强大且易用的jQuery插件,为网页图片裁剪提供了便捷的解决方案。通过灵活的配置和丰富的API,开发者可以轻松地集成图像裁剪功能到自己的项目中。

    jQuery Jcrop图像裁剪的插件结合java后台实现图片裁剪的功能

    jQuery Jcrop是一个在前端广泛应用的JavaScript插件,专门用于实现图像裁剪功能。它与后端技术如Java相结合,能够为Web应用提供完整的图片处理解决方案。Jcrop的强大之处在于其简单易用的API,允许开发者轻松地将...

    jQuery图像裁剪插件Jcrop.js

    此时,JavaScript库如jQuery的插件就显得尤为重要,其中Jcrop.js就是一款强大的图像裁剪工具,它允许用户在前端直接对图像进行选择和裁剪,提供了丰富的自定义选项和事件处理,使得图片裁剪功能的实现变得简单易行。...

    thinkphp +jquery +Jcrop+ajaxfileupload上传图片并裁剪保存到数据库

    `AjaxFileUpload`是一个jQuery插件,用于在不刷新页面的情况下上传文件。它允许我们在后台处理文件上传,同时提供进度指示和错误处理功能。 以下是实现这个功能的步骤: 1. **HTML页面准备**:创建一个HTML表单,...

    jcrop jquery 图片上传裁剪

    Jcrop 是一个基于 jQuery 的 JavaScript 图像裁剪插件,它允许用户在网页上选择并裁剪图像,常用于图片上传前的预览和编辑。这个插件为开发者提供了丰富的功能,包括动态调整选区、比例锁定、多边形裁剪等,极大地...

    适应各浏览器图片裁剪无刷新上传js插件-Jcrop

    适应各浏览器图片裁剪无刷新上传js插件-Jcrop Jcrop js jquery C# asp.net 文件包括: WebForm1.aspx myupload.html jquery.Jcrop.min.css jquery.min.js jquery.Jcrop.min.js imageCropperUpload.js

    jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享

    jQuery插件jcrop是一个功能强大的图片裁剪工具,它允许用户在页面上定义一个裁剪区域,并通过用户交互来裁剪图片。jcrop提供了丰富的API来调整裁剪框的大小和位置,同时它也支持多种参数配置,比如裁剪比例、裁剪框...

    jquery+Jcrop+servlet图片上传裁剪选择保存实例

    在本实例中,Servlet将接收来自前端的裁剪参数和原始图片数据,然后进行图片裁剪操作。以下是一些Servlet处理图片的关键步骤: 1. 接收数据:Servlet需要解析AJAX请求,获取上传的文件和裁剪参数。 2. 图片处理:...

Global site tag (gtag.js) - Google Analytics