【裁剪，预览，上传】图片处理

整个过程分为三个部分【选择，预览图片】【裁剪】【发送到服务器】

一、选择，预览图片

思路：input[type=file]来触发选择，监听input的change事件，和H5的属性来获得url，通过url将img_dom append进来

代码：

$("#inputs").on('change', function(e) {
var files;
var file;
files = $(this).prop('files');
if (files.length > 0) {
file = files[0];
if (isImageFile(file)) {
if (this.url) {
URL.revokeObjectURL(this.url);
}
console.log(URL);
this.url = URL.createObjectURL(file);
this.$img = $('');
$("#PhotoView").empty().html(this.$img);
}
}
})

 二、裁剪

思路：裁剪采用的插件cropper.js

代码：

var avatar188;

var avatar120;

var $previews = $('.preview');
var companyName;
var companyCoor;
var companyAddr;
var CompanyType = 1;
var lastLogoType = 1;
var localLogoPath;
var logofileType = 1;//1代表默认logo 2代表用户上传 默认1

this.$img.cropper({
viewMode : 1,
dragMode : 'move',
autoCropArea : 0.9,
aspectRatio : 1.0,
restore : false,
guides : false,
highlight : false,
cropBoxMovable : false,
cropBoxResizable : false,
build : function(e) {
var $clOne= $(this).clone();
$previews.html($clone);
},
crop : function(e) {
var imageData = $(this).cropper('getImageData');
var previewAspectRatio = e.width / e.height;
//调节preview
$previews.each(function() {
var $preview = $(this);
var previewWidth = $preview.width();
var previewHeight = previewWidth / previewAspectRatio;
var imageScaledRatio = e.width / previewWidth;
$preview.height(previewHeight).find('img').css({
width : imageData.naturalWidth / imageScaledRatio,
height : imageData.naturalHeight / imageScaledRatio,
marginLeft : -e.x / imageScaledRatio,
marginTop : -e.y / imageScaledRatio
});
});
//保存图片
avatar188 = $(this).cropper('getCroppedCanvas', {
width : 188,
height : 188
});
avatar120 = $(this).cropper('getCroppedCanvas', {
width : 120,
height : 120
});
logofileType = 2;
}
});

 三、预处理，上传

思路：上传前，需要将URL转化为二进制流，然后在封装进H5的FORM对象中，提交到服务器才能被识别

代码:

function isImageFile(file) {
if (file.type) {
return /^image\/\w+$/.test(file.type);
} else {
return /\.(jpg|jpeg|png)$/.test(file);
}
}
//url 转化成blob二进制数据流
function dataURLToBlob(dataURL){
var byteString = atob(dataURL.split(',')[1]);
var mimeString = dataURL.split(',')[0].split(':')[1].split(';')[0];
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for(var i = 0;i){
ia[i] = byteString.charCodeAt(i);
}
var blob = new Blob([ab],{type:mimeString});
return blob;
}

//post headImage to server
function postImage(vm){
//图片数据处理
var canvas = avatar188.toDataURL("image/png");
var imgfile = dataURLToBlob(canvas);
var Form = new FormData();
Form.append('pictureFile',imgfile);
Form.append('body',1);
$.ajax({
url:path_+'/picServerCtrl/uploadPicture',
type:'post',
dataType:'json',
contentType:'multipart/form-data',
data:Form,
success : function(res){
if(res.status){
zuiMessager(res.message);
addStaff.addStaffForm.headPicUrl=res.result.netWorkPath;
closeAllSwitch();
vm.showForm=true;
}
},
cache:false,
contentType:false,
processData:false,
});
}