Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定 支持 minSize/maxSize设置 支持改变选区或移 动选区时的回调(Callback) 支持用键盘微调选区 通过API创建互动,比如动画效果 支持CSS样式 版本及Demo jQuery v1.5.1+ Jcrop v0.9.9 Demo地址:http://code.ciaoca.com/jque…
在网上找,发现都是不全的,要么没获取图片路径,要么没后台等等,今天就来个全的 一:总体步骤 =>页面上传图片 =>获取上传图片剪切的四个值x,y,w,h =>后天进行剪切 接下来就开始飞吧 页面上传图片,这个大家都懂的 <form action="bookpicture.action" enctype="multipart/form-data" method="post">   <input type=&quo…
<1> 使用html标签上传需要裁剪的大图. <2> 在页面呈现大图,使用Jcrop(Jquery)对大图进行裁剪,并且可以进行预览. <3> 选择好截取部分之后发送数据给Action,在服务器端使用 Java API 对大图进行裁剪. <4> 保存大图裁剪好的头像到指定目录,完成业务. 下面一步一步做: 第一步:使用html标签上传需要裁剪的大图. 这一步说白了也就是使用Struts2自带的FileUpload功能,把图片进行上传具体代码如下: html页…
需求是:上传一个图片,然后将上传的这个图片进行切割........ 首先是jsp页面.页面需要引入js  <script src="${fileUrlPrx}/scripts/wap/jquery.min.js"></script>  <script src="${fileUrlPrx}/scripts/wap/jquery.Jcrop.min.js"></script> 注意几个隐藏域,这些是选中区域的点坐标,与长宽…
---恢复内容开始--- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&q…
/** Jcrop version: 0.9.12 jQuery version: 1.9.0 Author: 小dee Date: 2014.10.30 */ 先看看他山之石:博客园的头像模块也是使用的 Jcrop 插件,处理方式如图 博客园图1: 高度大于宽度时 博客园图2: 再看看新浪微博( http://account.weibo.com/set/photo ),它使用的是 flash,如图: 最后看豆瓣( http://www.douban.com/accounts/user_icon…
Google Chart API 参考 中文版 文档信息 翻译: Cloudream ,最后修改:02/22/2008 06:11:08 英文版版权归 Google , 转载此中文版必须以链接形式注明原文地址.译者信息及本声明. API 参考:http://labs.cloudream.name/google/chart/api.html 常见问题:http://labs.cloudream.name/google/chart/faq.html 简介 Google Chart API 为您提供动…
JCrop用来裁剪图片,本篇想体验的是: 在视图页上传图片: 上传成功,跳转到另外一个编辑视图页,使用JCrop对该图片裁剪,并保存图片到指定文件夹: 裁剪成功后,在主视图页显示裁剪图片: 当然,实际项目中最有可能的做法是:在本页上传.裁剪并保存. □ 思路 →在上传图片视图页,把图片上传保存到一个临时文件夹Upload→在编辑裁剪视图页,点击"裁剪"按钮,把JCrop能提供的参数,比如宽度.高度.离顶部距离,离底部距离,离左右端距离等封装成类,传递给控制器方法→控制器方法根据接收到的…
jQuery的一个图片剪切的一个插件, 使用插件必须条件:引入jQuery.js文件,引入jQuery.Jcrop.js文件,引入JQuery.Jcrop.css文件   1.最基本的使用方法: <img src="demo_files/flowers.gif" id="demoImage"/> js部分: $( function() { $("#demoImage").Jcrop(); } )  2.得到选中区域的坐标以及回调函数…
用户上传头像然后截图的需求很常见,很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延.最近正好学习了HTML5里的canvas,发现它的图片处理功能比较强大,就打算用canvas提供的API实现纯前端的剪切.这里头关键有三步:显示未经处理的图片,得到裁剪区域,显示裁剪后的区域.我们分别讨论: 1. 显示未经处理的图片 创建一个canvas,用drawImage(img,0,0,canvas.width,canvas.height)就可以.主要这里的img是一个Imag…