重装农药第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. python数据结构之冒泡排序

    冒泡排序是一种基础排序算法,在python中,我们利用列表的的方式来完成,它对列表中的元素进行重复的遍历,在遍历的同时进行比较,如果两个数没有按照我们规定的顺序进行排列,就按照我们预先设定好的是顺序或 ...

  2. express框架中如何只执行一次res响应操作

    在做东西时候遇到一个可能会重复输出res.json的地方,重复输出会产生Error:Cannot set header after they are sent. Node.js不像c++里可以直接通过 ...

  3. Codeforces.209C.Trails and Glades(构造 欧拉回路)

    题目链接 \(Description\) 给定一张\(n\)个点\(m\)条边的无向图,允许有自环重边.求最少加多少条边后,其存在从\(1\)出发最后回到\(1\)的欧拉回路. 注意,欧拉回路是指要经 ...

  4. 2017-9-7-Linux Mint TFTP服务安装开启

    Linux Mint端安装tftp软件 sudo apt-get install tftpd-hpa // tftpd-hpa是服务器端 sudo apt-get install tftp-hpa / ...

  5. 潭州课堂25班:Ph201805201 爬虫高级 第九课 scrapyd 部署 (课堂笔记)

    c rapyd是 scrapy 的部署, 是官方提供的一个爬虫管理工具, 通过他可以非常方便的上传控制爬虫的运行, 安装 : pip install scapyd 他提供了一个json ,web, s ...

  6. BZOJ2828 : 火柴游戏

    设$f[i][j][k]$表示考虑了前$i$个数字,增加了$j$根火柴,删掉了$k$根火柴是否可能,用bitset加速DP. 然后设$g[i][j]$表示增加了$i$根火柴,删掉了$j$根火柴的最小代 ...

  7. day8网络编程,面向对象1

    一.只是回顾 1.导入模块的顺序,首先从当前目录下找,再从环境变量里面找,使用"sys.path.insert(0,'需要导入的环境变量')"加入需要导入文件的环境变量; 2.如果 ...

  8. django实战模拟博客系统

    数据库代码块 from django.db import models from django.utils import timezone from django.contrib.auth.model ...

  9. Node_初步了解(3)回调,作用域,上下文

    1. //回调:回调是异步编程最基本的方法,node.js需要按顺序执行异步逻辑的时候,一般采用后续传递的方式,将后续逻辑封装在回调函数中,作为起始函数的参数. //具名函数 function lea ...

  10. Docker 常用命令(二)

    4. 查看Docker镜像创建历史: docker history flaskhello 3. Docker提交镜像 docker build -t flaskhello . docker run - ...