업로드된 플러그인을 캡처하기 위한 프로필 사진 준비

그림 캡처 이미지 생성 플러그인
플러그인 이름은 [cropper.js](https://fengyuanchen.github.io/cropperjs/)
먼저 이 플러그인을 이해한 다음에 한층 더 응용하다
아바타 플러그인 업로드
목적: 개발자가 이미지 업로드 기능 포인트를 신속하게 개발하도록 돕는다
배경: 현재 b, g에서 찾을 수 있는 이미지 업로드 플러그인은 사용하기 어려워서 비교적 자유롭게 업로드하고 잘라낼 수 있는 플러그인을 제공하고 싶습니다.
리소스: 리소스는 여기를 참조하십시오.
실현의 대략적인 사고방식은 다음과 같다.

먼저 업로드(로컬 업로드 기능)가 있는 다음에 그림의 주소를 얻는다.

그림 주소를 얻은 후 사진 캡처(여기 플러그인 추천)를 누르면 구체적으로 어떻게 사용하는지 더 이상 설명하지 않습니다.

그림을 캡처한 후 캡처한 파일을 2진 파일로 변환해야 합니다. $('#image').cropper('getCroppedCanvas').toBlob();

인터페이스에서 바이너리 파일을 업로드하면 됩니다.

직접 부호:

먼저 다음과 같은 파일을 도입한다

cropper.js [   ](https://github.com/fengyuanchen/cropperjs)

구체적인 업무 코드

 $(function () {
        var URL = window.URL || window.webkitURL;
        var $image = $('#image');
        var $rotate = $('#userImg_rotate');
        var $reUpload = $('#userImg_reUpload');
        var $zoomOut = $('#userImg_zoomOut');
        var $zoomIn = $('#userImg_zoomIn');
        var $save = $('#userImg_save');
        var croppable = false;
        var $previews = $('.userImg_preview');
        var options = {
            aspectRatio: 1,
            viewMode: 1,
            built: function () {
                croppable = true;
            },
            build: function (e) {
                var $clone = $(this).clone();

                $clone.css({
                    display: 'block',
                    width: '100%',
                    minWidth: 0,
                    minHeight: 0,
                    maxWidth: 'none',
                    maxHeight: 'none'
                });

                $previews.css({
                    width: '100%',
                    overflow: 'hidden'
                }).html($clone);
            },
            crop: function (e) {
                var imageData = $(this).cropper('getImageData');
                var previewAspectRatio = e.width / e.height;

                $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
                    });
                });
            }
        };
        var originalImageURL = $scope.userInfo_imgUrl;
        var uploadedImageURL;

        $scope.initCropper = function(){
            // init
            $image.attr('src',$scope.userInfo_imgUrl).cropper(options);
        };

        // rotate
        $rotate.on('click', function(){
            $image.cropper('rotate', 90);
        });

        // zoomOut
        $zoomOut.on('click',function(){
            $image.cropper('zoom', -0.1);
        });

        // zoomIn
        $zoomIn.on('click',function(){
            $image.cropper('zoom', 0.1);
        });

        // Move
        /*$move.on('click',function(){
            $image.cropper('setDragMode');
        });*/

        // reUpload
        $reUpload.on('click',function(){
            $image.cropper('destroy').attr('src', $scope.userInfo_imgUrl).cropper(options);
            if (uploadedImageURL) {
                URL.revokeObjectURL(uploadedImageURL);
                uploadedImageURL = '';
            }
        });

        // Keyboard
        $(document.body).on('keydown', function (e) {

            if (!$image.data('cropper') || this.scrollTop > 300) {
                return;
            }

            switch (e.which) {
                case 37:
                    e.preventDefault();
                    $image.cropper('move', -1, 0);
                    break;

                case 38:
                    e.preventDefault();
                    $image.cropper('move', 0, -1);
                    break;

                case 39:
                    e.preventDefault();
                    $image.cropper('move', 1, 0);
                    break;

                case 40:
                    e.preventDefault();
                    $image.cropper('move', 0, 1);
                    break;
            }

        });

        //          
        $save.on('click',function(){
            common.Loading.show();
            $('#image').cropper('getCroppedCanvas').toBlob(function (blob) {
                var formData = new FormData();

                formData.append('photoFile', blob);

                //              
                $.ajax(API_URL+'', {
                    method: "POST",
                    data: formData,
                    headers: {
                        'auth-token' : common.Cookie.get('token')
                    },
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        common.Loading.hide();
                        common.Toast.show('      ！');
                        try{
                            $scope.$apply(function(){
                                $scope.isShowUnCompleteInfoBox = false;
                                $scope.isShowCompleteInfoBox = false;
                                $scope.userInfo_imgUrl = res.data;
                            })
                        }catch(err){
                            console.log(err)
                        }
                    },
                    error: function () {
                        common.Toast.show('      ！');
                    }
                });
            });
        })

        //     ，                     
        var $inputImage = $('#inputImage');
        if (URL) {
            $inputImage.change(function () {
                var files = this.files;
                var file;

                if (!$image.data('cropper')) {
                    return;
                }

                if (files && files.length) {
                    file = files[0];

                    if (/^image\/\w+$/.test(file.type)) {
                        if (uploadedImageURL) {
                            URL.revokeObjectURL(uploadedImageURL);
                        }

                        uploadedImageURL = URL.createObjectURL(file);
                        $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
                        $inputImage.val('');
                    } else {
                        common.Toast.show('        ！')
                    }
                }
            });
        } else {
            $inputImage.prop('disabled', true).parent().addClass('disabled');
        }
    });