Capture the image to generate the avatar plug-in

Upload profile picture plug-in

Objective: To help developers quickly develop upload profile picture function points

Background: at present, the profile picture uploading plug-in that B and G can search is not very useful, so WE want to provide a relatively free uploading and clipping plug-in.

Resources: See here for more resources

The general idea is as follows:

1. First there is an upload (local upload function) and then get the address of the image.
2. After obtaining the image address, capture the image (a plug-in is recommended here) click here, the specific how to use will not be described again.
3. After capturing images, you need to convert the captured files into binary large files. $(‘#image’).cropper(‘getCroppedCanvas’).toBlob();
4. Call the interface, the binary large file can be uploaded.

Directly on the code:

1. Start with the following files

Cropper. Js [here] (https://github.com/fengyuanchen/cropperjs)Copy the code

1. Specific business code

 $(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; }}); // Cut and confirm the upload image$save.on('click'.function(){
            common.Loading.show();
            $('#image').cropper('getCroppedCanvas').toBlob(function (blob) {
                var formData = new FormData();

                formData.append('photoFile', blob); // Write the backend to your upload interface $.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('Avatar uploaded successfully! ');
                        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('Avatar upload failed! '); }}); }); }) // Upload a local image and get a local image path 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('Please select the image and upload again! ')}}}); }else {
            $inputImage.prop('disabled'.true).parent().addClass('disabled'); }});Copy the code