【裁剪，預覽，上傳】圖片處理

整個過程分爲三個部分【選擇，預覽圖片】【裁剪】【發送到服務器】

 

1、選擇，預覽圖片

思路：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);
            }
        }
    })

 

 2、裁剪

思路：裁剪採用的插件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;
    }
});

 

 3、預處理，上傳

思路：上傳前，須要將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,
           });
        }