首页 > 代码库 > 利用 jQuery-photoClip插件 实现移动端裁剪功能并以Blob对象上传
利用 jQuery-photoClip插件 实现移动端裁剪功能并以Blob对象上传
最近客户要求实现论坛贴子附件裁剪功能，没有考虑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="http://www.mamicode.com/css/normalize.css" /> <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/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="http://www.mamicode.com/js/jquery-2.1.1.min.js"><\/script>‘)</script> <script src="http://www.mamicode.com/js/iscroll-zoom.js"></script> <script src="http://www.mamicode.com/js/hammer.js"></script> <script src="http://www.mamicode.com/js/jquery.photoClip.js"></script> <script> var one_obj = { /** * @param base64Codes * 图片的base64编码 */ funUploadFile: function(base64Codes){ var self = this; var formData = http://www.mamicode.com/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对象上传
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。