CI自定义图片剪裁类遇到的坑
闲的没事，想结合js和ci做一个文件剪裁的自定义类，在开发过程中，CI部分较为简单，主要是js部分，遇到了各种浏览器不兼容，苦逼的要死。
先做了功课，计划用cropper.js[1.3,非jquery插件版]来做客户端的裁剪工具。
项目地址：https://fengyuanchen.github.io/cropperjs/。
坑1：blob二进制上传，xhr方式多个浏览器不兼容，遂放弃。不清楚jquery的ajax能否顺利解决。
以下是放弃后的代码[仅供参考]：
|
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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
//进行裁剪 result = cropper.getCroppedCanvas({ width: 512, height: 512, minWidth: 128, minHeight: 128, maxWidth: 512, maxHeight: 512, fillColor: '#fff', imageSmoothingEnabled: false, imageSmoothingQuality: 'high', }); if (result.toBlob) { result.toBlob( function (blob) { var formData = new FormData(); var fileName = 'mypic.jpg'; formData.append('file', blob, fileName); formData.append('id', '123'); // Use ajax method var xhr = getHttpObj(); xhr.open('post', 'php上传接收文件'); // 监听上传进度 IE不支持 if (typeof(xhr.upload) !== 'object') { // upload progress event not supported } else { xhr.upload.onprogress = function (ev) { // 事件对象 console.log(ev); var percent = (ev.loaded / ev.total) * 100 + '%'; console.log(percent); //progress是进度条Html元素//progress.style.width = percent; }; } xhr.send(formData); xhr.onreadystatechange = function () { if(xhr.readyState == 4 && xhr.status == 200) { //上传成功 console.log(xhr.responseText); alert("上传成功"); } else { console.log(xhr.status); alert('NO'); } } }, 'image/jpeg', 1 ); } function getHttpObj() { var httpobj = null; try { httpobj = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { httpobj = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e1) { httpobj = new XMLHttpRequest(); } } return httpobj; } |
噢！评论已关闭。