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/

时间: 2024-10-11 06:39:55

HTML5+Canvas手机拍摄,本地压缩上传图片的相关文章

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

今天跟大家分享一个前端裁剪图片的方法.许多网站都有设置用户头像的功能,用户可以选择一张本地的图片,然后用网站的裁剪工具进行裁剪,然后设置大小,位置合适的头像.当然,网上也有一些用js写的诸如此类裁剪的插件,但是有许多都是前端将图片的一些裁剪参数(如坐标)传给后台,有java程序员进行真正的图片裁剪.今天自己研究了一些,做了一个纯前端裁剪的demo,如下: 1.html部分:<div> <input type="file" id="imgFile"&

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

近日刚做的一个功能,要在app里使用内嵌页面进行图像的上传.从功能上看,原生的实现应该是最好的.毕竟页面上所有的东西都隔着一个浏览器,所有的实现都要依赖浏览器提供的接口,不同的浏览器对接口的实现又有差异……到最后又会陷入兼容性的大坑!吐槽归吐槽,但是折腾的劲头不能丢! 使用input file[camera]属性调用相机 简直So easy! <input type="file" accept="image/*;" capture="camera&q

html5 canvas 前端生成缩略图

html5 canvas 前端生成缩略图 更新: 2013/08/01: 解决了后面遇到的bug: 图片被压扁(IOS6); 图片被旋转; 整个源码放在: https://github.com/kairyou/html5-make-thumb 新方案需要后面实现的, 就是下面的旧版本里的功能(水印/是否强制拉伸以适应目标尺寸等功能). w3ctech长沙站交流会, 里面分享的PPT: http://www.slideshare.net/99leon/html5-create-thumbnail

HTML5 程序设计 - 使用HTML5 Canvas API

请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方便查看. 学习笔记,纯手工码字,有错别字什么的请指出,觉得好的请点个赞小小的支持下.谢谢亲们. 本篇,我们将探索如何使用HTML5和Canvas API.Canvas API很酷,可以通过它来动态生成和展示图形.图表.图像以及动画. 本篇将使用渲染API(Rendering API)的基本功能来创建

mui调本地相册上传图片

mui调用本地相册和拍照功能 图例 只用更改上传图片ajax部分代码即可 1.html <div class="headdiv"> <img src="" id="userImg"/> </div> 2.js <script> /*调相机本地相抵上传图片*/ mui.plusReady(function(){ document.getElementById('userImg').addEventLi

HTML5 canvas 绘制精美的图形

HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HTML 4.01 版本规范.它还引入了几个新元素和属性,它们适用许多使用 web 页面的领域 — 音频.视频.图形.数据存储.内容呈现,等等.本文主要关注图形方面的增强:canvas. 新的 HTML5 canvas 是一个原生 HTML 绘图簿,用于 JavaScript 代码,不使用第三方工具.跨

使用HTML5 -Canvas追踪用户,Chrome隐身模式阵亡

中国的一些精准营销公司又要偷着乐了= =从之前追踪Cookie到后面追踪FlashCookie,某些商家总在永无止境的追踪用户行为甚至是隐私,将其转化为所谓的“商业价值”.我们被迫面临“世风日下.道德沦亡”之窘境,不过笔者后来又释怀了,反正在中国上网本来就没有隐私嘛.毕竟国家机器还在合法工作呢...... 话说回来,HTML5-Canvas追踪用户的核心原理其实就是一句话:在绘制canvas图片时,同样的canvas绘制代码,不同机器和浏览器绘制的图片特征是相同并且独一无二的,这样以来,提取最简

HTML5 Canvas核心技术—图形、动画与游戏开发.pdf4

CanvasRenderingContext2D对象中用于平移.旋转坐标系的方法 镜像 scale(1,-1)绘制垂直镜像:scale(-1,1)绘制水平镜像 自定义的坐标变换 transform(),多次调用会叠加效果 setTransform(),每次调用都会清除上次的效果 两个方法都用于旋转.缩放.及平移坐标系(可以根据公式传入0或其他数据) x'=ax+cy+e y'=bx+dy+f 坐标系旋转公式(angle弧度) x'=x×cos(angle)-(y×sin(angle)) y'=y

用HTML5的File API做上传图片预览功能

用HTML5的File API做上传图片预览功能 前几天做了一个项目,涉及到上传本地图片的功能,正好之前了解过 html5 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(PS : 不得不承认我这个人有多懒,没有需求的时候我向来不主动去学习).移动端完全支持哦!已测试. 下面给大家看看代码吧怎么实现的 第一:HTLM部分(这里不去做漂亮的样式了我们注重学习功能) <input type="file" id="fileElem" mul