截取图片生成头像插件

来源：互联网发布：淘宝怎么绑定银行卡编辑：程序博客网时间：2024/05/21 11:23

上传头像插件

目的：帮助开发者快速开发上传头像功能点

背景：现在b，g能搜到的头像上传插件并不太好用，所以想提供一个比较自由度的上传并且可以剪切的插件。

资源：具体资源请查看这里

实现大致思路如下：

先有一个上传的（本地上传的功能），然后获取图片的地址。
获取图片地址之后，进行截取图片（这里推荐一个插件）点这里，具体怎么用就不再赘述。
等截取图片之后，需要将截取的文件转换为二进制大文件。$(‘#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');        }    });

阅读全文

0 0