最近在折腾移动站的开发，涉及到了一个手机里面上传图片。于是经过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手机拍摄，本地压缩上传图片的更多相关文章

  1. JavaScript+html5 canvas实现本地截图教程

    这篇文章主要介绍了JavaScript+html5 canvas实现本地截图教程,对截图功能感兴趣的小伙伴们可以参考一下 最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canva ...

  2. 基于html5 canvas 的客户端异步上传图片的插件，支持客户端压缩图片尺寸

    /** * Created by xx on 15-05-28. * 基于html5 canvas 的客户端异步上传画片的插件 * 在实际应用中,常常要用于上传图片的功能．在现在越来越多的手机weba ...

  3. HTML5 CANVAS 实现图片压缩和裁切

    原文地址:http://leonshi.com/2015/10/31/html5-canvas-image-compress-crop/?utm_source=tuicool&utm_medi ...

  4. 利用html5 canvas实现纯前端上传图片的裁剪

    今天跟大家分享一个前端裁剪图片的方法.许多网站都有设置用户头像的功能,用户可以选择一张本地的图片,然后用网站的裁剪工具进行裁剪,然后设置大小,位置合适的头像.当然,网上也有一些用js写的诸如此类裁剪的 ...

  5. HTML5 Canvas显示本地图片实例1、Canvas预览图片实例1

    1.前台代码: <input id="fileOne" type="file" /> <canvas id="canvasOne&q ...

  6. HTML5 Canvas图片操作简单实例1

    1.加载显示图片 <canvas id="canvasOne" class="myCanvas" width="500" height ...

  7. LocalResizeIMG前端HTML5本地压缩图片上传，兼容移动设备IOS,android

    LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android jincon 发表于 2015-02-26 18:31:01 发表在: php开发 localresiz ...

  8. html5调用手机相机并压缩、上传

    近日刚做的一个功能,要在app里使用内嵌页面进行图像的上传.从功能上看,原生的实现应该是最好的.毕竟页面上所有的东西都隔着一个浏览器,所有的实现都要依赖浏览器提供的接口,不同的浏览器对接口的实现又有差 ...

  9. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

随机推荐

  1. winsows CMD及Linux命令大全 欢迎补充

    CMD命令:开始->运行->键入cmd或command(在命令行里可以看到系统版本.文件系统版本) CMD命令锦集 1. gpedit.msc-----组策略 2. sndrec32--- ...

  2. 1142. Maximal Clique (25)

    A clique is a subset of vertices of an undirected graph such that every two distinct vertices in the ...

  3. openGL如何在改变窗口大小时，使自己的图形不被拉伸

    这里要注意两个概念:视口和视景体,当视口的纵横比和视景体的纵横比相同的时候,改变窗口大小,图像才不会变形: 视景体是指成像景物所在空间的集合.它是一个空间集合体. 单个的视景体,比如一个球体,若要完全 ...

  4. 股票交易 （单调队列优化DP）

    股票交易 $ solution: $ 这道题以前就写了,题目很好,但自己没有发题解,来补一篇: 首先,题目出得很有迷惑性,但我们不难想到状态要设天数,和自己手上的股票数目(因为这两个就是充要信息).而 ...

  5. django之模型类在视图中的应用

    一:模型类直接从把前端表单传入的值,进行存储. @csrf_exempt def regist(request): if request.method == 'POST': form = UserFo ...

  6. JAVA学习笔记--ClassLoader

    仅先摘要书中内容以记之,后续也许需要更深入的去探索.先推荐篇博文http://blog.csdn.net/xyang81/article/details/7292380 6.9 初始化和类装载 在许多 ...

  7. pyhive连接hive（失败）

    一.安装pyhive pip install sasl(需要来下载至本地安装:https://download.lfd.uci.edu/pythonlibs/q4hpdf1k/sasl-0.2.1-c ...

  8. 使用 pyenv 管理 Python 版本

    http://einverne.github.io/post/2017/04/pyenv.html   Posted on 04/22/2017 by Ein Verne | View revisio ...

  9. spring boot 1.视图解析器,2.开启静态资源访问

    1.spring boot 视图解析器 #视图解析器 #前缀spring.mvc.view.prefix=/pages/ #后缀..jsp.dospring.mvc.view.suffix=.jsp ...

  10. Drawer实现侧边栏布局

    在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏,传入 endDrawer 可以定义右侧边栏.侧边栏默认是隐藏的,我们可以通过手指滑动显示侧边栏,也可以通过点击按钮显示侧边栏.  ...