重装农药第16天！！

jquery裁剪图片插件cropit示例

背景：做的手机网页项目，用html file控件上传图片，有些手机拍照后图片会很大，20M以上的，用之前的H5 formdata上传的话有时会非常慢的，就想着能不能在选择图片的时候直接在客户端处理下，把选择的图片按规格的大小裁剪掉，上网搜索了一下，发现cropit这个玩意，自己FQ进官网下载示例弄了下，成功实现想要的功能

原图：25M

裁剪后：175K

http://blog.niunan.net/jquery_caijian/index.html
源码下载：
http://image.niunan.net/jq%E8%A3%81%E5%89%AA%E6%8F%92%E4%BB%B6cropit%E7%A4%BA%E4%BE%8B.7z

jquery裁剪图片插件cropit示例的更多相关文章

  1. cropper(裁剪图片)插件使用（案例）

    公司发布微信H5前端阵子刚刚弄好的H5端的图片上传插件,现在有需要裁剪图片.前端找了一个插件---cropper 本人对这插件不怎么熟悉,这个案例最好用在一个页面只有一个上传图片的功能上而且只适合单个 ...

  2. 支持移动端裁剪图片插件Jcrop（结合WebUploader上传）

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

  3. jquery压缩图片插件

    imageCompress 只有图片压缩功能,比较简单jquery.imageCompress.js 使用说明: el:为上传框 quality:压缩图片质量,单位为% onloadStart:读取图 ...

  4. jquery.query.js 插件（示例及简单应用）

    帮助文档 var url = location.search; > "?action=view&section=info&id=123&debug&te ...

  5. jquery.query.js 插件（示例及简单应用） —— html之间传值

    帮助文档 var url = location.search; > "?action=view&section=info&id=123&debug&te ...

  6. Java+jquery实现裁剪图片上传到服务器

    大体分两步: 1.利用jquery裁剪图片,把裁剪到的几个点传入后端 2.利用前端传入的几个点,来裁剪图片 首先,用到一个jquery的插件 imgAreaSelect 实例及插件下载地址:http: ...

  7. 18款 非常实用 jquery幻灯片图片切换

    1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...

  8. 利用jquery的imgAreaSelect插件实现图片裁剪示例

    http://www.cnblogs.com/mizzle/archive/2011/10/13/2209891.html 将用户上传的图片进行裁剪再保存是现在web2.0应用中常常处理的工作,现在借 ...

  9. jquery photoClip支持手机端,PC端 本地裁剪图片后上传插件

    支持手机,PC最好的是jquery photoClip插件,下载地址&示例:https://github.com/topoadmin/photoClip demo.html 代码: <! ...

随机推荐

  1. Wan Android 项目总结

    Wan Android 项目总结 项目的由来 这个项目也算是自己学习了一段时间的Android以后的一个总结和学习吧,项目采用了Kotlin语言,Api采用的hongyang大神的WanAndroid ...

  2. SpringBoot使用Mybatis-PageHelper

    前言 之前一篇文章介绍了<SpringBoot+Mybatis+MySql学习>的整合,这一片扩展一下Mybatis的分页插件-Mybatis-PageHelper. 新建项目 首先,po ...

  3. Kotlin基础（一）Kotlin快速入门

    Kotlin快速入门 一.函数 /* * 1.函数可以定义在文件最外层,不需要把它放在类中 * 2.可以省略结尾分号 * */ fun main(args: Array<String>) ...

  4. [BZOJ1814]Formula 1

    Description: 一个 m * n 的棋盘,有的格子存在障碍,求经过所有非障碍格子的哈密顿回路个数 Hint: \(n,m<=12\) Solution: 插头dp模板题,注意要讨论多种 ...

  5. （转）java创建对象的步骤

    关于对象的创建过程一般是从new指令(我说的是JVM的层面)开始的(具体请看图1),JVM首先对符号引用进行解析,如果找不到对应的符号引用,那么这个类还没有被加载,因此JVM便会进行类加载过程.符号引 ...

  6. [POJ2287][Tyvj1048]田忌赛马 (贪心+DP)

    瞎扯 很经典的一道题 考前才打 我太菜了QAQ 就是先贪心排序了好 然后在DP 这样比直接DP更容易理解 (其实这题做法还有很多) 代码 #include<cstdio> #include ...

  7. python网络编程（四）

    TFTP客户端 1. TFTP协议介绍 TFTP(Trivial File Transfer Protocol,简单文件传输协议) 是TCP/IP协议族中的一个用来在客户端与服务器之间进行简单文件传输 ...

  8. BZOJ4012[HNOI2015]开店——树链剖分+可持久化线段树/动态点分治+vector

    题目描述 风见幽香有一个好朋友叫八云紫,她们经常一起看星星看月亮从诗词歌赋谈到 人生哲学.最近她们灵机一动,打算在幻想乡开一家小店来做生意赚点钱.这样的 想法当然非常好啦,但是她们也发现她们面临着一个 ...

  9. NodeJS Web模块

    NodeJS Web模块 本文介绍nodeJS的http模块的基本用法,实现简单服务器和客户端 经典Web架构 Client:客户端一般指浏览器,通过HTTP协议向服务器发送请求(request) S ...

  10. Grok patterns 汇总

    S3_REQUEST_LINE (?:%{WORD:verb} %{NOTSPACE:request}(?: HTTP/%{NUMBER:httpversion})?|%{DATA:rawreques ...