最近客户要求实现论坛贴子附件裁剪功能，没有考虑js与ios、android容器交互解决方案，单纯用js去实现它的。由于本来附件上传用的别的插件实现的，所以是在此基础上费了不少劲，才把jQuery-photoClip裁剪功能垒上去，但好再最后成功实现了。在实现过程中遇到了几个问题，记下来和大家一起学习研究。

由于安全原因，是不允许js操作文件的。所以jQuery-photoClip裁剪下来的是base64字符串，把此字符串上传后台解码为文件，就可以了。但是如果字符串过大，用post或geth上传就会超过浏览器传输最大量，后台就会接收失败，那看来用普通字符串上传行不通。接着又继续研究，不断查找资料，问题终于解决，js把base64字符串解码转成Blob对象再进行上传，效果和文件上传一样，php在用台用$_FILES接收就可以了。

http://www.htmleaf.com/jQuery/Image-Effects/201510292721.html  这里有jQuery-photoClip介绍与下载

<!doctype html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta name="format-detection" content="telephone=no, email=no" />

    <title>支持移动设备触摸手势的jQuery图片裁剪插件</title>

    <link rel="stylesheet" type="text/css" href="css/normalize.css" />

    <link rel="stylesheet" type="text/css" href="css/default.css">

    <style>

    #clipArea {

        margin: 20px;

        height: 300px;

    }

    #file,

    #clipBtn {

        margin: 20px;

    }

    #view {

        margin: 0 auto;

        width: 200px;

        height: 200px;

    }

    </style>

    <!--[if IE]>

        <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>

    <![endif]-->

</head>

<body ontouchstart="">

    <article class="htmleaf-container">

        <div id="clipArea"></div>

        <input type="file" id="file">

        <button id="clipBtn">截取</button>

        <div id="view"></div>

    </article>

    <script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

    <script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>

    <script src="js/iscroll-zoom.js"></script>

    <script src="js/hammer.js"></script>

    <script src="js/jquery.photoClip.js"></script>

    <script>

    var one_obj = {

        /**

         * @param base64Codes

         *        图片的base64编码

         */

        funUploadFile: function(base64Codes){

            var self = this;

            var formData = new FormData();

            //convertBase64UrlToBlob函数是将base64编码转换为Blob

            //append函数的第一个参数是后台获取数据的参数名,在php中用$FILES['imageName']接收，

            formData.append("imageName",self.convertBase64UrlToBlob(base64Codes));

            //ajax 提交form

            $.ajax({

                // 你后台的接收地址

                url : 'your_url',

                type : "POST",

                data : formData,

                dataType:"json",

                processData : false,         // 告诉jQuery不要去处理发送的数据

                contentType : false,        // 告诉jQuery不要去设置Content-Type请求头

                success:function(data){

                    console.log('上传成功');

                },

                xhr:function(){            //在jquery函数中直接使用ajax的XMLHttpRequest对象

                    var xhr = new XMLHttpRequest();

                    xhr.upload.addEventListener("progress", function(evt){

                        if (evt.lengthComputable) {

                            var percentComplete = Math.round(evt.loaded * 100 / evt.total);

                            console.log("正在提交."+percentComplete.toString() + '%');        //在控制台打印上传进度

                        }

                    }, false);

                    return xhr;

                }

            });

        },

        /**

         * 将以base64的图片url数据转换为Blob

         * @param urlData

         *            用url方式表示的base64图片数据

         */

        convertBase64UrlToBlob: function(urlData){

            //去掉url的头，并转换为byte

            var bytes=window.atob(urlData.split(',')[1]);        

            //处理异常,将ascii码小于0的转换为大于0

            var ab = new ArrayBuffer(bytes.length);

            var ia = new Uint8Array(ab);

            for (var i = 0; i < bytes.length; i++) {

                ia[i] = bytes.charCodeAt(i);

            }

            // 此处type注意与photoClip初始化中的outputType类型保持一致

            return new Blob( [ab] , {type : 'image/jpeg'});

        },

        init: function() {

            var self = this;

            $("#clipArea").photoClip({

                width: 200,

                height: 200,

                file: "#file",

                view: "#view",

                ok: "#clipBtn",

                outputType: 'jpg',

                loadStart: function() {

                    console.log("照片读取中");

                },

                loadComplete: function() {

                    console.log("照片读取完成");

                },

                clipFinish: function(dataURL) {

                    console.log('裁剪完成');

                    self.funUploadFile(dataURL);

                }

            });

        }

    };

    one_obj.init();

    </script>

</body>

</html>

利用 jQuery-photoClip插件 实现移动端裁剪功能并以Blob对象上传的更多相关文章

  1. MVC文件上传04-使用客户端jQuery-File-Upload插件和服务端Backload组件实现多文件异步上传

    本篇使用客户端jQuery-File-Upload插件和服务端Badkload组件实现多文件异步上传.MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小  ...

  2. [插件] 如何在一个页面中使用多个SWFUpload对象上传文件

    首先需要引入相应的样式和JS文件,还需要借助jQuery的js 提供下载路径:http://pan.baidu.com/s/1EUzca ① 引入js <script type="te ...

  3. 通过jQuery Ajax使用FormData对象上传文件

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...

  4. js 利用iframe和location.hash跨域解决的方法，java图片上传回调JS函数跨域

    奶奶的:折腾了我二天,最终攻克了!网上有非常多样例. 但跟我的都不太一样,费话不多说了,上图   上代码: IE ,firefix,chrome 測试通过 js :这个主页面,部分代码, functi ...

  5. IT轮子系列（四）——使用Jquery+formdata对象 上传 文件

    前言 在MVC 中文件的上传,一般都采用控件: <h2>IT轮子四——文件上传</h2> <div> <input type="file" ...

  6. 通过jQuery Ajax使用FormData对象上传文件 （转载）

    XMLHttpRequest Level 2 添加了一个新的接口——FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件.jQuery 2.0+ ...

  7. [转] 通过jQuery Ajax使用FormData对象上传文件

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...

  8. 利用jQuery对插件进行扩展时，方法$.extend()、$.fn.extend()区别与联系

      利用JQ开发插件的方法: 1.jQuery.extend(); 2.jQuery.fn.extend(); 3.通过$.widget()应用jQuery UI的部件工厂方式创建. 由于第三种方式通 ...

  9. 使用jQuery.FileUpload插件和Backload组件裁剪上传图片

    □ 思路 1.自定义控制器继承Backload的默认控制器BackloadController2.自定义一个jQuery File Upload初始化js文件,使用自定义控制器的方法3.在视图页面调用 ...

随机推荐

  1. A-frame_02

    A-Frame 让我们能够仅仅通过几行HTML代码创建出可以运行在桌面, 虚拟眼镜, 以及手机上的VR场景. 而且因为这个框架是基于HTML的, 我们也可以像一般的HTML元素一样配合JavaScri ...

  2. 关于H5 storage 的一些注意事项以及用法

    在我们使用H5 storage之前,先了解一下storage的介绍吧: Storage模块管理应用本地数据存储,用于应用数据的保存和读取,应用本地数据localStorage,sessionStora ...

  3. Javascript中setTimeout和setInterval的区别和使用

    在javascript中,window对象有两个主要的定时方法,分别是setTimeout 和 setInterval,其语法基本上相同,但是完成的功能取有区别. setTimeout方法是定时程序, ...

  4. [CSS]white-space 属性详解

    实例 规定段落中的文本不进行换行: p { white-space: nowrap } 可能的值 值 描述 normal 默认.空白会被浏览器忽略. pre 空白会被浏览器保留.其行为方式类似 HTM ...

  5. 关于ASE日志空间示数不正常的解决办法

        最近某系统的ASE数据库出现了异常,经过各种努力,终于把数据库正常又起起来了.但是经过检查,发现在查看剩余日志空间的时候(sp_helpsegment 'logsegment'),发现显示出来 ...

  6. SIAlertView

    SIAlertView是AlertView的替代产品 的效果比较多 . 使用实例: SIAlertView *alertView = [[SIAlertView alloc] initWithTitl ...

  7. JLOI 2013 卡牌游戏

    问题描述: N个人坐成一圈玩游戏.一开始我们把所有玩家按顺时针从1到N编号.首先第一回合是玩家1作为庄家.每个回合庄家都会随机(即按相等的概率)从卡牌堆里选择一张卡片,假设卡片上的数字为X,则庄家首先 ...

  8. 微软职位内部推荐-ATG Engineer II

    微软近期Open的职位: ATG Engineer - GeneralistReady to work on some of the most advanced hardware on the pla ...

  9. POJ 2186 Popular Cows（Tarjan）

    http://poj.org/problem?id=2186 题意 :给你n头牛,m对关系,每对关系由两个编号组成,u和v代表着u认为v是受欢迎的,如果1认为2是受欢迎的,2认为3是受欢迎的,那1认为 ...

  10. POJ 1275 Cashier Employment（差分约束）

    http://poj.org/problem?id=1275 题意 : 一家24小时营业的超市,要雇出纳员,需要求出超市每天不同时段需要的出纳员数,午夜只需一小批,下午需要多些,希望雇最少的人,给出每 ...