H5移动端图片压缩上传开发流程(2)

/** * 上传图片到NOS * @param {Object} _blog Blob格式的图片 * @return {Void} */ function uploadPhoto(_data) { //4.获取canvas中的图片信息 //window.atob方法将其中的base64格式的图片转换成二进制字符串;若将转换后的值直接赋值给Blob会报错,需Uint8Array转换:最后创建Blob对象; _data = _data.split(',')[1]; _data = window.atob(_data); //如果不用ArrayBuffer,发送给服务器的图片格式是[object Uint8Array],上传失败... var _buffer = new ArrayBuffer(_data.length); var _ubuffer = new Uint8Array(_buffer); for (var i = 0; i < _data.length; i++) { _ubuffer[i] = _data.charCodeAt(i); } // 安卓 UC浏览器不支持 new Blob(),使用BlobBuilder var _blob; try { _blob = new Blob([_buffer], {type:'image/jpeg'}); } catch(ee) { window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder; if (ee.name == 'TypeError' && window.BlobBuilder) { var _bb = new BlobBuilder(); _bb.append(_buffer); _blob = _bb.getBlob('image/jpeg'); } } var _suffix = 'jpg'; if(_blob.type === 'image/jpeg') { _suffix = 'jpg'; } //获取NOStoken this.__cache._$requestDWRByGet({url: 'ImageBean.genTokens',param: [_suffix,'','','','1'],onload: function(_tokens) { _tokens = _tokens || []; var _token = _tokens[0]; if(!_token || !_token.objectName || !_token.uploadToken){ alert('token获取失败!'); return false; } //上传图片到NOS var _objectName = _token.objectName, _uploadToken = _token.uploadToken, _bucketName = _token.bucketName; var _formData = new FormData(); _formData.append('Object', _objectName); _formData.append('x-nos-token', _uploadToken); _formData.append('file',_blob); var _xhr; if (window.XMLHttpRequest) { _xhr = new window.XMLHttpRequest(); } else if (window.ActiveXObject) { _xhr = new ActiveXObject("Microsoft.XMLHTTP"); } _xhr.onreadystatechange = function() { if(_xhr.readyState === 4) { if((_xhr.status >= 200 && _xhr.status < 300) || _xhr.status === 304) { var _imgurl = "http://nos.netease.com/" + _bucketName + "https://www.jb51.net/" + _objectName + "?imageView"; var _newUrl = mb.x._$imgResize(_imgurl, 750, 750, 1, true); window.location.href = 'http://www.lofter.com/act/taxiu?op=effect&originImgUrl=' + _newUrl; } } }; _xhr.open('POST', 'http://nos.netease.com/' + _bucketName, true); _xhr.send(_formData); }}); }

判断iphone拍摄图片方向的插件:exif

至此H5图片压缩上传的流程结束。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzzpjj.html