头像截取图片上传 js插件

先看一下整体效果

页面html

                <div class="row">

                    <div class="tabs-container">

                        <ul class="nav nav-tabs">

                            <li>

                                <a style="color: #676a6c;padding: 10px 30px 10px 40px;"> 上传头像<span style="color:red;">*</span></a>

                            </li>

                            <li class="active">

                                <a data-toggle="tab" href="#tab-1" aria-expanded="true"> 本地上传</a>

                            </li>

                            <li class="">

                                <a data-toggle="tab" href="#tab-2" aria-expanded="false">相册选取</a>

                            </li>

                        </ul>

                        <div class="tab-content">

                            <div id="tab-1" class="tab-pane active">

                                <div class="panel-body" style="height:475px">

                                    <div class="container">

                                        <div class="imageBox">

                                            <div class="thumbBox"></div>

                                            <div class="spinner" style="display: none">Loading...</div>

                                        </div>

                                        <div class="cropped"></div>

                                        <div class="action">

                                            <div class="new-contentarea tc">

                                                <a href="javascript:void(0)" class="upload-img">

                                                    <label for="upload-file">上传图像</label>

                                                </a>

                                                <input type="file" class="" name="upload-file" id="upload-file" />

                                            </div>

                                            <input type="button" id="btnCrop" class="Btnsty_peyton" value="裁切">

                                            <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+">

                                            <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-">

                                        </div>

                                    </div>

                                </div>

                            </div>

                            <div id="tab-2" class="tab-pane">

                                <div class="panel-body" id="Album" style="height:475px;overflow: scroll;overflow-x: hidden;">

                                    <a class="fancybox" title="选取该照片">

                                        <img src="/assets/img/Inteall/HeadPortrait/user_Doctor_01.jpg" alt="图片" />

                                    </a>

                                    <a class="fancybox" title="选取该照片">

                                        <img src="/assets/img/Inteall/HeadPortrait/user_Doctor_02.jpg" alt="图片" />

                                    </a>

                                    <a class="fancybox" title="选取该照片">

                                        <img src="/assets/img/Inteall/HeadPortrait/user_Doctor_03.jpg" alt="图片" />

                                    </a>

                                    <a class="fancybox" title="选取该照片">

                                        <img src="/assets/img/Inteall/HeadPortrait/user_Doctor_04.jpg" alt="图片" />

                                    </a>

                                    <a class="fancybox" title="选取该照片">

                                        <img src="/assets/img/Inteall/HeadPortrait/user_Doctor_05.jpg" alt="图片" />

                                    </a>

                                    <a class="fancybox" title="选取该照片">

                                        <img src="/assets/img/Inteall/HeadPortrait/user_Doctor_06.jpg" alt="图片" />

                                    </a>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

页面js引用

<script src="/assets/js/jquery.js"></script>

<script src="~/assets/js/cropbox/cropbox.js"></script>

<script type="text/javascript">

    var HeaderImg = null, EditHeaderImg = null, cropper = null, options =

        {

            thumbBox: '.thumbBox',

            spinner: '.spinner',

            imgSrc: "/assets/img/Inteall/HeadPortrait/user_Doctor_01.jpg",

            loadAfter: function () { $('#btnCrop').click(); }

        };

    $(window).load(function () {

        cropper = $('.imageBox').cropbox(options)

        $('#upload-file').on('change', function () {

            var reader = new FileReader();

            reader.onload = function (e) {

                options.imgSrc = e.target.result;

                cropper = $('.imageBox').cropbox(options);

            }

            reader.readAsDataURL(this.files[]);

            this.files = null;

        });

        $('#btnCrop').on('click', function () {

            HeaderImg = cropper.getDataURL();

            $('.cropped').html('');

            //$('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');

            $('.cropped').append('<img src="' + HeaderImg + '" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');

        });

        $('#btnZoomIn').on('click', function () {

            cropper.zoomIn();

        });

        $('#btnZoomOut').on('click', function () {

            cropper.zoomOut();

        });

        $(".imageBox").autoScroll();

        $("#Album").autoScroll();

        $('.fancybox img').each(function () {

            $(this).click(function () {

                options.imgSrc = $(this).attr('src');

                cropper = $('.imageBox').cropbox(options);

                $('.nav-tabs li:nth(1) a').click();

                $('#btnCrop').click();

            });

        });

    });

</script>

cropbox.js

/**

 * Created by ezgoing on 14/9/2014.

 */

"use strict";

(function (factory) {

    if (typeof define === 'function' && define.amd) {

        define(['jquery'], factory);

    } else {

        factory(jQuery);

    }

}(function ($) {

    var cropbox = function (options, el) {

        var el = el || $(options.imageBox),

            obj =

            {

                state: {},

                ratio: ,

                options: options,

                imageBox: el,

                thumbBox: el.find(options.thumbBox),

                spinner: el.find(options.spinner),

                image: new Image(),

                getDataURL: function () {

                    var width = this.thumbBox.width(),

                        height = this.thumbBox.height(),

                        canvas = document.createElement("canvas"),

                        dim = el.css('background-position').split(' '),

                        size = el.css('background-size').split(' '),

                        dx = parseInt(dim[]) - el.width() /  + width / ,

                        dy = parseInt(dim[]) - el.height() /  + height / ,

                        dw = parseInt(size[]),

                        dh = parseInt(size[]),

                        sh = parseInt(this.image.height),

                        sw = parseInt(this.image.width);

                    canvas.width = width;

                    canvas.height = height;

                    var context = canvas.getContext("2d");

                    context.drawImage(this.image, , , sw, sh, dx, dy, dw, dh);

                    var imageData = canvas.toDataURL('image/png');

                    return imageData;

                },

                getBlob: function () {

                    var imageData = this.getDataURL();

                    var b64 = imageData.replace('data:image/png;base64,', '');

                    var binary = atob(b64);

                    var array = [];

                    for (var i = ; i < binary.length; i++) {

                        array.push(binary.charCodeAt(i));

                    }

                    return new Blob([new Uint8Array(array)], { type: 'image/png' });

                },

                zoomIn: function () {

                    this.ratio *= 1.1;

                    setBackground();

                },

                zoomOut: function () {

                    this.ratio *= 0.9;

                    setBackground();

                },

                loadAfter: options.loadAfter || function () { }

            },

            setBackground = function (IsOnload) {

                var w = parseInt(obj.image.width) * obj.ratio;

                var h = parseInt(obj.image.height) * obj.ratio;

                var pw = (el.width() - w) / ;

                var ph = (el.height() - h) / ;

                el.css({

                    'background-image': 'url(' + obj.image.src + ')',

                    'background-size': w + 'px ' + h + 'px',

                    'background-position': pw + 'px ' + ph + 'px',

                    'background-repeat': 'no-repeat'

                });

            },

            imgMouseDown = function (e) {

                e.stopImmediatePropagation();

                obj.state.dragable = true;

                obj.state.mouseX = e.clientX;

                obj.state.mouseY = e.clientY;

            },

            imgMouseMove = function (e) {

                e.stopImmediatePropagation();

                if (obj.state.dragable) {

                    var x = e.clientX - obj.state.mouseX;

                    var y = e.clientY - obj.state.mouseY;

                    var bg = el.css('background-position').split(' ');

                    var bgX = x + parseInt(bg[]);

                    var bgY = y + parseInt(bg[]);

                    el.css('background-position', bgX + 'px ' + bgY + 'px');

                    obj.state.mouseX = e.clientX;

                    obj.state.mouseY = e.clientY;

                }

            },

            imgMouseUp = function (e) {

                e.stopImmediatePropagation();

                obj.state.dragable = false;

            },

            zoomImage = function (e) {

                e.originalEvent.wheelDelta >  || e.originalEvent.detail <  ? obj.ratio *= 1.1 : obj.ratio *= 0.9;

                setBackground();

            }

        obj.spinner.show();

        obj.image.onload = function () {

            obj.spinner.hide();

            setBackground('onload');

            el.bind('mousedown', imgMouseDown);

            el.bind('mousemove', imgMouseMove);

            $(window).bind('mouseup', imgMouseUp);

            el.bind('mousewheel DOMMouseScroll', zoomImage);

            obj.loadAfter();

        };

        obj.image.src = options.imgSrc;

        el.on('remove', function () { $(window).unbind('mouseup', imgMouseUp) });

        return obj;

    };

    jQuery.fn.cropbox = function (options) {

        return new cropbox(options, this);

    };

}));

$.fn.extend({

    "preventScroll": function () {

        $(this).each(function () {

            var _this = this;

            if (navigator.userAgent.indexOf('Firefox') >= ) {   //firefox

                _this.addEventListener('DOMMouseScroll', function (e) { e.preventDefault(); }, false);

            } else {

                _this.onmousewheel = function (e) {

                    return false;

                };

            }

        })

    },

    "autoScroll": function () {

        $(this).each(function () {

            var _this = this;

            if (navigator.userAgent.indexOf('Firefox') >= ) {   //firefox

                _this.addEventListener('DOMMouseScroll', function (e) {

                    _this.scrollTop += e.detail >  ?  : -;

                    e.preventDefault();

                }, false);

            } else {

                _this.onmousewheel = function (e) {

                    e = e || window.event;

                    _this.scrollTop += e.wheelDelta >  ? - : ;

                    return false;

                };

            }

        })

    }

});

cropbox.css

@charset "utf-8";

.container {

    width: 400px;

    position: relative;

    font-family: 微软雅黑;

    font-size: 12px;

    margin-left: 0px;

}

    .container p {

        line-height: 12px;

        line-height: 0px;

        height: 0px;

        margin: 10px;

        color: #bbb;

    }

.action {

    width: 400px;

    height: 30px;

    margin: 10px ;

}

.cropped {

    position: absolute;

    right: -230px;

    top: ;

    width: 200px;

    /*border: 1px #ddd solid;*/

    height: 300px;

    padding: 4px;

    /* box-shadow: 0px 0px 12px #ddd;*/

    text-align: center;

}

.imageBox {

    position: relative;

    height: 400px;

    width: 400px;

    border: 1px solid #aaa;

    background: #fff;

    overflow: hidden;

    background-repeat: no-repeat;

    cursor: move;

    box-shadow: 4px 4px 12px #B0B0B0;

}

    .imageBox .thumbBox {

        position: absolute;

        top: %;

        left: %;

        width: 200px;

        height: 200px;

        margin-top: -100px;

        margin-left: -100px;

        box-sizing: border-box;

        border: 1px solid rgb(, , );

        box-shadow:    1000px rgba(, , , 0.5);

        background: none repeat scroll % % transparent;

    }

    .imageBox .spinner {

        position: absolute;

        top: ;

        left: ;

        bottom: ;

        right: ;

        text-align: center;

        line-height: 400px;

        background: rgba(,,,0.7);

    }

.Btnsty_peyton {

    float: right;

    width: 66px;

    display: inline-block;

    margin-bottom: 10px;

    height: 30px;

    line-height: 30px;

    font-size: 14px;

    color: #FFFFFF;

    margin: 0px 2px;

    background-color: #4dbec4;

    border-radius: 3px;

    text-decoration: none;

    cursor: pointer;

    box-shadow: 0px 0px 5px #B0B0B0;

    border: 0px #fff solid;

}

/*选择文件上传*/

.new-contentarea {

    width: 100px;

    overflow: hidden;

    margin:  auto;

    position: relative;

    float: left;

}

    .new-contentarea label {

        width: %;

        height: %;

        display: block;

    }

    .new-contentarea input[type=file] {

        width: 100px;

        height: 30px;

        background: #;

        margin:  auto;

        position: absolute;

        margin-right: -94px;

        top: ;

        right /*\**/: 0px\;

        margin-right /*\**/: 0px\;

        width /*\**/: 10px\;

        opacity: ;

        filter: alpha(opacity=);

        z-index: ;

    }

a.upload-img {

    width: 100px;

    display: inline-block;

    margin-bottom: 10px;

    height: 30px;

    line-height: 30px;

    font-size: 14px;

    color: #FFFFFF;

    background-color: #4dbec4;

    border-radius: 3px;

    text-decoration: none;

    border: 0px #fff solid;

    box-shadow: 0px 0px 5px #B0B0B0;

}

    a.upload-img:hover {

        background-color: #ec7e70;

    }

.tc {

    text-align: center;

}

巴特西

头像截取图片上传 js插件

最新文章

热门文章

巴特西

头像截取 图片上传 js插件

最新文章

热门文章

头像截取图片上传 js插件