HTML5+Canvas手机拍摄，本地压缩上传图片

最新推荐文章于 2021-03-11 16:23:28 发布
最新推荐文章于 2021-03-11 16:23:28 发布
阅读量53 收藏
点赞数
原文链接：https://my.oschina.net/u/1538660/blog/496792
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

最近在折腾移动站的开发，涉及到了一个手机里面上传图片。于是经过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/

转载于:https://my.oschina.net/u/1538660/blog/496792

weixin_34227447
关注
HTML5+Canvas手机拍摄，本地压缩上传图片localResizeIMG3-master.zip
05-26
"HTML5+Canvas手机拍摄，本地压缩上传图片"是指利用HTML5的特性，在移动设备上实现照片拍摄，然后通过Canvas进行图片处理，包括压缩，最后将处理后的图片上传到服务器。这个过程涉及到多个技术点： 1. ** ...
html5调用手机拍照并压缩上传
pyzheng的专栏
06-24 638
[url]http://my.oschina.net/zyxchuxin/blog/700381[/url]
HTML5+Canvas手机拍摄，本地压缩上传图片，案例实测报告。
weixin_33700350的博客
09-12 76
为什么80%的码农都做不了架构师？>>> ...
HTML5图片上传本地预览
weixin_30781775的博客
12-04 237
在开发 H5 应用的时候碰到一个问题，应用只需要一张小的缩略图，而用户用手机上传的确是一张大图，手机摄像机拍的图片好几 M，这可要浪费很多流量。 我们可以通过以下方式来解决。 获取图片 通过File API获取图片。 var input = document.createElement('input'); input.type = 'file'; input.addEventL...
移动端h5拍照压缩即时上传后台并预览
weixin_30287169的博客
10-11 266
项目经理让迭代一个功能，实时预览并上传到后台的功能，听到这立马想起了几个第三方插件去实现，mui 和api cloude万万没想到的是这个app前面使用ios 和安卓原生写的，然后mui和api cloud里面都要配置文件，不能嵌入到app中，于是乎开始我的查询h5官方api之路。好在皇天不负有心人，终于让我弄出来了。 大致思路是这样的，首先用h5的input file 在拍照时或者...
html5手机上传相册图片
weixin_34109408的博客
02-04 300
<input type="file" accept="video/*;capture=camcorder"> <input type="file" accept="audio/*;capture=microphone"> <input type="file" accept="image/*;capture=c...
html5+php调用android手机图片,HTML5+Canvas+jQuery调用手机拍照功能实现图片上传
weixin_39550940的博客
03-11 263
[php]代码库HTML5+Canvas+jQuery调用手机拍照功能实现图片上传(一)因为最近一段时间，一直在弄微信项目，其中涉及到了证件上传的功能，刚开始的时候一点头绪都没有，上网查了很多资料，QQ群里面也问了不少人，很多人说如果是app程序，可以申请系统权限，然后再去调用系统底层的东西，但是微信是在浏览器里面操作的，我们自定义的页面也是通过微信内置浏览器打开的，而且微信浏览器在内部进行了很多...
HTML5+Canvas调用手机拍照功能实现图片上传（上）
10-19
HTML5+Canvas调用手机拍照功能实现图片上传是一种在现代网页应用中常见且实用的技术，尤其在移动设备上。此技术结合HTML5的文件API、Canvas元素和jQuery库，允许用户通过内置摄像头直接拍照并上传图片，从而提供更加...
HTML5+Canvas调用手机拍照功能实现图片上传（下）
12-10
上一篇只讲到前台操作，这篇专门涉及...HTML5+Canvas+jQuery调用手机拍照功能实现图片上传（上） ok，废话不多说了，直接贴代码吧。 1、前台js代码： $.ajax({ async:false,//是否异步 cache:false,//是否使用缓存
HTML5+jQuery+Canvas调用手机拍照功能上传图片
10-29
总结来说，HTML5+jQuery+Canvas的组合使得在网页上调用手机拍照功能并上传图片成为可能，同时还能进行图片的本地处理和压缩，大大提升了用户体验和效率。通过学习和掌握这些技术，开发者可以创建更加动态、交互性强...
毕业设计论文SpringBoot社区老人健康信息管理系统.docx
10-17
毕业设计论文
TEAM-NAVI-Requirements Specification Document
10-17
TEAM_NAVI_Requirements Specification Document
分析流体动力学中的混沌系统-解决混沌系统问题python源码+项目说明（课程作业）.zip
10-17
1.多数小白下载后，在使用过程，可能会遇到些小问题，若自己解决不了，请及时私信描述你的问题，我会第一时间提供帮助，也可以远程指导 2.项目代码完整可靠，谈不上高分、满分(多数为夸大其词），但难度适中，满足一些毕设、课设要求，且属于易上手的优质项目，项目内基本都有说明文档，按照操作即可，遇到困难也可私信交流 3.适用人群：各大计算机相关专业行业的在校学生、高校老师、公司程序员等下载使用 4.特别是那种爱钻研学习的学霸，强烈推荐此项目，可以二次开发提升自己。如果确定自己是学渣，拿来作毕设、课设直接用也无妨，但建议自己还是尽可能弄懂项目最好！ 项目名字和项目路径不要用中文，建议解压重命名为英文名字后再运行！项目易上手运行
毕业设计论文SpringBoot教学辅助系统.docx
10-17
毕业设计论文
关于练习三的图片资源素材
10-17
电影选座精灵图
Elasticsearch数据映射与类型的全面解析
最新发布
10-17
内容概要：本文详细介绍了Elasticsearch的数据映射和类型，涵盖了核心概念、工作原理、映射的基础与类型详解、动态映射、动态模板、映射元数据以及索引的最佳实践。通过具体示例，解释了如何创建索引、定义映射、索引和搜索文档，帮助读者更好地理解和使用Elasticsearch。 适合人群：具有一定Elasticsearch基础知识的数据工程师、系统管理员和开发者。 使用场景及目标：通过深入理解Elasticsearch的映射和类型，提升数据索引、搜索和分析的效率和准确性，特别是在复杂数据结构和高负载环境下的应用。 阅读建议：本文涉及较多的技术细节和实操步骤，建议边阅读边实践，结合官方文档进一步深入研究。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值