最近由于项目需要，所以做了一个上传头像预览并且可以预览裁剪的功能，大概思路是上传的图片先保存到服务器，然后通过ajax从服务器获取到图片信息，再利用Jcrop插件进行裁剪，之后通过PHP获取到的四个裁切点的坐标进行裁剪。 首先看一下uploadify上传插件的API： uploader ： uplo ...
分类：
Web程序 时间：
2016-05-25 20:23:12
阅读次数：
244
file API，直接读取本地文件。fileAPI和JCrop的结合使用上传头像。 1、html部分 <input id="demo" type="file" name="file" onchange="showPic();"/> <img id="avatar" src="" style="wid ...
分类：
Web程序 时间：
2016-05-10 02:05:44
阅读次数：
518
file API作为html5的新特性，解决了js不能直接读取本地文件的问题，虽然是只读，但绕过了后台处理再返回前台的过程，仍旧给编程人员带来了不少方便。fileAPI和JCrop的结合使用上传头像的方案，被很多网站采用。 目前为止，fileAPI应该已经被各浏览器支持得很好,不用引入多余插件。 1 ...
1、页面结构 js逻辑处理 完整代码如下 附件下载地址：兼容IE6+ 以上大部分浏览器，特殊浏览器没有测试！ 下载 ...
分类：
Web程序 时间：
2016-05-04 17:11:59
阅读次数：
173
一、我在写一个头像上传剪切的demo时遇到了这个问题，正常大小的图片通过maxwidth设置后不会有问题，但是当上传图片太大时，由于被缩放导致Jcrop剪切时获取的不是实际剪切位置，因此需要按比例计算所剪切的图片大小 html代码 1 <%@ page language="java" content
分类：
Web程序 时间：
2016-03-08 16:22:32
阅读次数：
329
在这一篇里，我来具体讲讲代码该如何写。 下面是jCrop的初始化代码 //图片裁剪插件Jcrop初始化 function initJcrop() { // 图片加载完成 document.getElementById('originalImg').onload = function () { var
分类：
其他好文 时间：
2016-02-03 16:32:55
阅读次数：
160
上一篇简单的介绍了一下开发的背景以及一些学习资料，下面开始介绍如何上手。 一、下载jCrop http://deepliquid.com/content/Jcrop_Download.html 直接去官网下载就好了。 二、将插件部署到项目中。 一般引入这两个文件就可以了。 三、开始初始化插件。 最简
分类：
其他好文 时间：
2016-02-03 16:31:28
阅读次数：
147
之前，项目经理为了提升用户体验让我在之前图片上传功能的基础上实现图片的裁切功能，作为一个前端小白来说听了这个需求心里一紧，毕竟没有做过，于是跟项目经理商量要先做下调研。在一上午的调研中发现了jCrop这个插件出现的概率最高而且也比较符合项目的要求并且网上的教程也很多，于是果断开始了对这个插件的实践。
分类：
其他好文 时间：
2016-02-03 16:27:52
阅读次数：
127
（源码下载链接: http://pan.baidu.com/s/1pJVxMAn 密码: gbuz） 个人习惯，代码不贴出来，自己去云盘下。 我们先看一下百度上传头像的页面。如下图。 再 看看我做的效果。 图1 图2 上面是我做出的效果，灰色是一个400X400的背景，图片会自动适应 （图1和图2
分类：
Web程序 时间：
2016-02-02 16:31:51
阅读次数：
163
Jcrop是一个jQuery图片裁剪插件，它能为你的WEB应用程序快速简单地提供图片裁剪的功能。特点如下：对所有图片均unobtrusively（无侵入的，保持DOM简洁）支持宽高比例锁定支持 minSize/maxSize设置支持改变选区或移 动选区时的回调（Callback）支持用键盘微调选区通...
