之前,项目经理为了提升用户体验让我在之前图片上传功能的基础上实现图片的裁切功能,作为一个前端小白来说听了这个需求心里一紧,毕竟没有做过,于是跟项目经理商量要先做下调研。在一上午的调研中发现了jCrop这个插件出现的概率最高而且也比较符合项目的要求并且网上的教程也很多,于是果断开始了对这个插件的实践。

先上做好的图片吧

首先,我是先看了一些网上的教程,这里列出一些网址,大家可以去参考。

http://code.ciaoca.com/jquery/jcrop/

http://www.zhangxinxu.com/jq/jcrop_zh/

基本上看了这两篇文章就能了解的差不多了,一个是API,一个是demo。

第一篇文章就当做一个简单的介绍吧,我不喜欢一篇文章里写太多内容,所以我将分几篇文章来写。

图片裁切插件jCrop的使用心得(一)的更多相关文章

  1. 图片裁切插件jCrop的使用心得(三)

    在这一篇里,我来具体讲讲代码该如何写. 下面是jCrop的初始化代码 //图片裁剪插件Jcrop初始化 function initJcrop() { // 图片加载完成 document.getEle ...

  2. 图片裁切插件jCrop的使用心得(四)

    在本篇中我来介绍一下jcrop如何实时展现用户裁切的效果图以及在项目中使用该插件注意的问题. 首先,你们在创建头像时,都可以在旁边实时的看到我裁切后的效果图,就如博客园. 这个是如何实现的呢,其实并不 ...

  3. 图片裁切插件jCrop的使用心得(二)

    上一篇简单的介绍了一下开发的背景以及一些学习资料,下面开始介绍如何上手. 一.下载jCrop http://deepliquid.com/content/Jcrop_Download.html 直接去 ...

  4. jQuery 图片裁剪插件 Jcrop

    Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定 支持 ...

  5. 网站开发常用jQuery插件总结(14)图片修剪插件Jcrop

    一.插件功能 用于对图片进行修剪.但是在使用Jcrop时,还需要配合服务器端开发语言(如asp.net,php等)使用. 二.官方地址 http://deepliquid.com/content/Jc ...

  6. 支持移动端裁剪图片插件Jcrop(结合WebUploader上传)

    (此教程包括前端实现图片裁剪,后端进行获取裁剪区并保存) 最近有一个需求,微信公众号上传图片,支持自定义裁剪. 以前用过一款裁剪插件cropper,很久没用了,不知道对移动端操作兼容如何,重新从网上搜 ...

  7. 开源JS图片裁剪插件

    开源JS图片裁剪插件 一.总结 一句话总结: 要用点赞最高的插件,这样适用性最好,效果最好,出问题的概率也最低,这里电脑端和手机端都可以用的建议用 cropper.js 二.5款好用的开源JS图片裁剪 ...

  8. 推荐几款jquery图片切换插件

    一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...

  9. Cropper – 简单的 jQuery 图片裁剪插件

    Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...

随机推荐

  1. 一个GCC4.6.3的奇妙问题的糊涂解决方案

    因为工作中需要OpenCV,又不想用Windows,所以我就在Linux下编译安装OpenCV了.一开始,由于我的计算机不能安装ubuntu12.04,所以我安装了ubuntu13.04,opencv ...

  2. 眼下最好的JSP分页技术

     2005-08-24   来源:CSDN  作者:wanchao2001 前言     在使用数据库的过程中,不可避免的须要使用到分页的功能,但是JDBC的规范对此却没有非常好的解决.对于这个需求非 ...

  3. Vim文本编辑器 指令簿(二)

    常常处理文本以及常常须要写代码的人,都会有自己比較常常使用的编辑器,本人喜欢用Vim.理由就是Vim编辑器灵活,而且能够达到纯键盘操作,使用纯熟情况下,根本不须要鼠标操作.听起来是不是非常酷的?只是别 ...

  4. innobackupex --slave-info参数的含义和适用场景

    http://blog.itpub.net/28916011/viewspace-1969135/       我有个问题一直没弄明白,就是innobackupex里面的--slave-info这个参 ...

  5. View绘制详解,从LayoutInflater谈起

    自定义View算是Android开发中的重中之重了,很多小伙伴可能或多或少都玩过自定义View,对View的绘制流程也有一定的理解.那么现在我想通过几篇博客来详细介绍View的绘制流程,以便使我们更加 ...

  6. oracle学习总结2

    1:常用的函数 to_date()函数,将字符串转换为日期格式select to_date('2015-09-12','yyyy-MM-dd') from dual; --其中后面的日期格式要和前面要 ...

  7. [引]MSDN Visual Basic 和 C# 中都会用到的编程概念

    本文转自:http://msdn.microsoft.com/zh-cn/library/dd460655.aspx 本节介绍 Visual Basic 和 C# 中都会用到的编程概念. 本节内容   ...

  8. 关于Eclipse平台的使用和开发第一个SWT程序

    IBM把投入巨资开发的Eclipse作为一个开源项目捐献给了开源组织Eclipse.org Eclipse出色而有独创的平台特性,现在仍由IBM子公司OTI(主要从事Eclipse开发的人)继续领导着 ...

  9. 关于Git的stash命令

    add 添加新文件到 Git 代码仓库的索引中 $ git add filename mv 移动或重命名文件 $ git mv old-filename new-filename rm 从工作目录和 ...

  10. 信号量 Semaphore

    一.简介         信号量(Semaphore),有时被称为信号灯,是在多线程环境下使用,负责协调各个线程, 以保证它们能够正确.合理的使用公共资源. Semaphore可以控制某个资源可被同时 ...