官网地址: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>
分享到:
相关推荐
jQuery图像裁剪插件Jcrop.js是一款功能强大的jQuery图像裁剪插件,可以结合后端程序快速的实现图片裁剪的功能。
<... <head> <meta charset="utf-8" />...jQuery图片裁剪插件Jcrop.js<... Jcrop.js实现的一款功能强大的jQuery图片裁剪插件,可以结合后端程序快速的实现图像裁剪的功能,右侧有3个图像缩略图尺寸可选。
Jcrop.js实现的一款功能强大的jQuery图片裁剪插件,可以结合后端程序快速的实现图像裁剪的功能,右侧有3个图像缩略图尺寸可选。
Jcrop 基于jquery的图片裁剪插件.zip
图片裁剪插件JqueryJcrop兼容大数浏览器,测试无误,链接了中文参数说明详情见页面
Jcrop (官方的) - 图片裁剪jQuery插件
jQuery图像裁剪插件Jcrop js是一款功能强大的jQuery图像裁剪插件,可以结合后端程序快速的实现图片裁剪的功能。
jquery Jcrop 是一个功能强大的 jQuery 图像裁剪插件,结合后端程序(例如:java)可以快速的实现图片裁剪的功能
适应各浏览器图片裁剪无刷新上传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.js是一款功能强大的jQuery图像裁剪插件,可以结合后端程序快速的实现图片裁剪的功能。
今天从官方网址下载Jcrop插件使用,发现PHP那个截图页面运行错误,截得的图是黑黑的,经过一会儿,把问题修正了,现把修正版拿出来分享给大家,多多支持哦!
js 的 jCrop 插件 配合 php 进行图片剪切以及上传!
目前做的这个项目中要用到用户头像功能,领导说最好是做成用户上传一个图片后可以用图像裁剪的方法自己选择头像。
php结合jquery ajaxfileupload及jcrop插件实现无刷新上传,裁剪
一个基于和的本地图片裁剪插件。 ####License: ###为什么需要这玩意 目前很多的图片上传、裁剪都是基于服务器端的。比如Jcrop,在选择好图片后仅仅是做了一个裁剪的UI,然后发给后端起始位置、大小等参数,由后端来...
非常不错的模拟 图片裁剪效果的实现代码,文件都是脚本之家本地的,大家可以直接另存为就可以了。
本文介绍了头像裁剪上传功能,用到的技术有 jQuery,springmvc,裁剪插件用的是jcrop(中间遇到很多坑,最终跨越)。 图片上传步骤: 1.用户选择图片 2.将图片传入后台:用户选择图片的时候选择的是各种各样的,...
网页端 裁剪图片,不需要经过服务器。 这个是用 https://github.com/mailru/FileAPI 框架实现的。配合jcrop. 高级浏览器 使用 canvas 裁剪,ie6 7 8使用 flash过度。 核心代码: var el = $('input').get(0); ...