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

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

 

一、选择，预览图片

思路：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 = $('<img src="' + this.url + '"/>');
                $("#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<byteString.length;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,
           });
        }