HTML5+Canvas手机拍摄,本地压缩上传图片
最近在折腾移动站的开发,涉及到了一个手机里面上传图片。于是经过N久的折腾,找到一个插件,用法如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<!DOCTYPE HTML> < html lang = "zh-CN" > < meta name = "viewport" content = "initial-scale=1.0, maximum-scale=1.0,user-scalable=no" /> < head > < meta charset = "UTF-8" > < title >LocalResizeIMG</ title > </ head > < style > body { margin: 20px 20%; color:#777; text-align: center; } </ style > < body > < h1 class = "text-center" >LocalResizeIMG-本地压缩 1.0</ h1 > < hr /> < input type = "file" /> < hr /> <!-- javascript ================================================== --> < script src = "/api/localResizeIMG-gh-pages/patch/jquery-2.1.1.min.js" type = "text/javascript" ></ script > < script src = "/api/localResizeIMG-gh-pages/LocalResizeIMG.js" type = "text/javascript" ></ script > <!-- mobileBUGFix.js 兼容修复移动设备 --> < script src = "/api/localResizeIMG-gh-pages/patch/mobileBUGFix.mini.js" type = "text/javascript" ></ script > < script type = "text/javascript" > $('input:file').localResizeIMG({ width: 500, quality: 0.8, success: function (result) { var img = new Image(); img.src = result.base64; $('body').append(img); //console.log(result); $.ajax({ url: './uploads.php', type: 'POST', data:{formFile:result.clearBase64}, dataType: 'HTML', timeout: 1000, error: function(){ alert('Error loading PHP document'); }, success: function(result){ //console.log(result); alert("Uploads success~") } }); } }); </ script > </ body > </ html > |
PHP代码:
1
2
3
4
5
6
|
<?php $base64 = $_POST [ 'formFile' ]; $IMG = base64_decode ( $base64 ); $path = './' ; file_put_contents ( $path .time(). '.jpg' , $IMG ); ?> |
在前端把图片压缩,然后转换成为Base64的编码,再把Base64的编码使用AJAX来POST到服务器,然后在PHP解开Base64,写入到一个文件去。
原插件地址:http://github.com/think2011/LocalResizeIMG
然后发现我朋友也写有一篇这个插件的使用的文章,地址在这里:http://a3147972.blog.51cto.com/2366547/1551066
最后,欢迎加Q群: 252799167
2015年04月11日12:23:10 Update:
这插件的作者已经对插件进行了升级,推荐使用新的插件:https://github.com/think2011/localResizeIMG3/
其他链接:
http://blog.csdn.net/renfufei/article/details/9836317
http://www.thinksaas.cn/group/topic/351088/
HTML5+Canvas手机拍摄,本地压缩上传图片的更多相关文章
- JavaScript+html5 canvas实现本地截图教程
这篇文章主要介绍了JavaScript+html5 canvas实现本地截图教程,对截图功能感兴趣的小伙伴们可以参考一下 最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canva ...
- 基于html5 canvas 的客户端异步上传图片的插件,支持客户端压缩图片尺寸
/** * Created by xx on 15-05-28. * 基于html5 canvas 的客户端异步上传画片的插件 * 在实际应用中,常常要用于上传图片的功能.在现在越来越多的手机weba ...
- HTML5 CANVAS 实现图片压缩和裁切
原文地址:http://leonshi.com/2015/10/31/html5-canvas-image-compress-crop/?utm_source=tuicool&utm_medi ...
- 利用html5 canvas实现纯前端上传图片的裁剪
今天跟大家分享一个前端裁剪图片的方法.许多网站都有设置用户头像的功能,用户可以选择一张本地的图片,然后用网站的裁剪工具进行裁剪,然后设置大小,位置合适的头像.当然,网上也有一些用js写的诸如此类裁剪的 ...
- HTML5 Canvas显示本地图片实例1、Canvas预览图片实例1
1.前台代码: <input id="fileOne" type="file" /> <canvas id="canvasOne&q ...
- HTML5 Canvas图片操作简单实例1
1.加载显示图片 <canvas id="canvasOne" class="myCanvas" width="500" height ...
- LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android
LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android jincon 发表于 2015-02-26 18:31:01 发表在: php开发 localresiz ...
- html5调用手机相机并压缩、上传
近日刚做的一个功能,要在app里使用内嵌页面进行图像的上传.从功能上看,原生的实现应该是最好的.毕竟页面上所有的东西都隔着一个浏览器,所有的实现都要依赖浏览器提供的接口,不同的浏览器对接口的实现又有差 ...
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
随机推荐
- php内置函数分析之strrev()
PHP_FUNCTION(strrev) { zend_string *str; char *e, *p; zend_string *n; if (zend_parse_parameters(ZEND ...
- php连接access
1.在控制面板中打开管理工具图标. 2.双击其中的数据源(ODBC)图标. 3.选择系统 DSN 选项卡. 4.点击系统 DSN 选项卡中的添加. 5.选择Microsoft Access Drive ...
- bzoj4408 [Fjoi 2016]神秘数 & bzoj4299 Codechef FRBSUM 主席树+二分+贪心
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4299 https://lydsy.com/JudgeOnline/problem.php?id ...
- 37行代码构建无状态组件通信工具-让恼人的Vuex和Redux滚蛋吧!
状态管理的现状 很多前端开发者认为,Vuex和Redux是用来解决组件间状态通信问题的,所以大部分人仅仅是用于达到状态共享的目的.但是通常Redux是用于解决工程性问题的,用于分离业务与视图,让结构更 ...
- super语句不必须放在方法第一行。
class A(object): pass class B(A): def __init__(self): self.__a = "B#a" super(B, self).__in ...
- 为啥HashMap的默认容量是16
集合是Java开发日常开发中经常会使用到的,而作为一种典型的K-V结构的数据结构,HashMap对于Java开发者一定不陌生. 在日常开发中,我们经常会像如下方式以下创建一个HashMap: Map& ...
- [洛谷P1514] NOIP2010 引水入城
问题描述 在一个遥远的国度,一侧是风景秀美的湖泊,另一侧则是漫无边际的沙漠.该国的行政区划十分特殊,刚好构成一个N 行×M 列的矩形,如上图所示,其中每个格子都代表一座城市,每座城市都有一个海拔高度. ...
- hdu 5963:朋友
刚看到这题时感觉是树上博弈,然后我开始用一维的数据找规律.发现在一维的树上,如果把各边的值合在一起当成一个二进制数,那么,ans只与奇偶性有关,于是,我提出了一个比较大胆的假设:若连接在root上的所 ...
- git怎样删除未监视的文件untracked files ?
git怎样删除未监视的文件untracked files 需要添加到.gitignore文件 # 删除 untracked files git clean -f # 连 untracked 的目录也一 ...
- Listary安装+破解
Listary 是 windows 下一个可以快速搜索所有程序,文件,并且可以快速启动程序和打开相应文件的这么一个工具,但这只是它的一个主要功能,还有其功能也是很屌的. 详细的介绍参考:[Listar ...