jQuery头像裁剪插件cropbox js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery头像裁剪插件cropbox js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="gb2312">
    <title>jQueryͷ��ü���cropbox</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <style>
        .container
        {
            position: absolute;
            top: 5%; left: 36%; right: 0; bottom: 0;
        }
        .action
        {
            width: 400px;
            height: 30px;
            margin: 10px 0;
        }
        .cropped>img
        {
            margin-right: 10px;
        }
    </style>
</head>
<body>

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/cropbox.js"></script>
<div class="container">
    <div class="imageBox">
        <div class="thumbBox"></div>
        <div class="spinner" style="display: none">Loading...</div>
    </div>
    <div class="action">
        <input type="file" id="file" style="float:left; width: 250px">
        <input type="button" id="btnCrop" value="Crop" style="float: right">
        <input type="button" id="btnZoomIn" value="+" style="float: right">
        <input type="button" id="btnZoomOut" value="-" style="float: right">
    </div>
    <div class="cropped">

    </div>
</div>
<script type="text/javascript">
    $(window).load(function() {
        var options =
        {
            thumbBox: '.thumbBox',
            spinner: '.spinner',
            imgSrc: 'images/avatar.png'
        }
        var cropper = $('.imageBox').cropbox(options);
        $('#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[0]);
            this.files = [];
        })
        $('#btnCrop').on('click', function(){
            var img = cropper.getDataURL();
            $('.cropped').append('<img src="'+img+'">');
        })
        $('#btnZoomIn').on('click', function(){
            cropper.zoomIn();
        })
        $('#btnZoomOut').on('click', function(){
            cropper.zoomOut();
        })
    });
</script>
</body>
</html>

JS代码(cropbox-min.js):

"use strict";
	!function(t){
	"function"==typeof define&&define.amd?define(["jquery"],t):t(jQuery)}
(function(t){
	var e=function(e,n){
	var n=n||t(e.imageBox),i={
	state:{
}
,ratio:1,options:e,imageBox:n,thumbBox:n.find(e.thumbBox),spinner:n.find(e.spinner),image:new Image,getDataURL:function(){
	var t=this.thumbBox.width(),e=this.thumbBox.height(),i=document.createElement("canvas"),a=n.css("background-position").split(" "),o=n.css("background-size").split(" "),s=parseInt(a[0])-n.width()/2+t/2,r=parseInt(a[1])-n.height()/2+e/2,u=parseInt(o[0]),g=parseInt(o[1]),c=parseInt(this.image.height),m=parseInt(this.image.width);
	i.width=t,i.height=e;
	var p=i.getContext("2d");
	p.drawImage(this.image,0,0,m,c,s,r,u,g);
	var d=i.toDataURL("image/png");
	return d}
,getBlob:function(){
	for(var t=this.getDataURL(),e=t.replace("data:image/png;
	base64,",""),n=atob(e),i=[],a=0;
	a<n.length;
	a++)i.push(n.charCodeAt(a));
	return new Blob([new Uint8Array(i)],{
	type:"image/png"}
)}
,zoomIn:function(){
	this.ratio*=1.1,a()}
,zoomOut:function(){
	this.ratio*=.9,a()}
}
,a=function(){
	var t=parseInt(i.image.width)*i.ratio,e=parseInt(i.image.height)*i.ratio,a=(n.width()-t)/2,o=(n.height()-e)/2;
	n.css({
	"background-image":"url("+i.image.src+")","background-size":t+"px "+e+"px","background-position":a+"px "+o+"px","background-repeat":"no-repeat"}
)}
,o=function(t){
	t.stopImmediatePropagation(),i.state.dragable=!0,i.state.mouseX=t.clientX,i.state.mouseY=t.clientY}
,s=function(t){
	if(t.stopImmediatePropagation(),i.state.dragable){
	var e=t.clientX-i.state.mouseX,a=t.clientY-i.state.mouseY,o=n.css("background-position").split(" "),s=e+parseInt(o[0]),r=a+parseInt(o[1]);
	n.css("background-position",s+"px "+r+"px"),i.state.mouseX=t.clientX,i.state.mouseY=t.clientY}
}
,r=function(t){
	t.stopImmediatePropagation(),i.state.dragable=!1}
,u=function(t){
	i.ratio*=t.originalEvent.wheelDelta>0||t.originalEvent.detail<0?1.1:.9,a()}
;
	return i.spinner.show(),i.image.onload=function(){
	i.spinner.hide(),a(),n.bind("mousedown",o),n.bind("mousemove",s),t(window).bind("mouseup",r),n.bind("mousewheel DOMMouseScroll",u)}
,i.image.src=e.imgSrc,n.on("remove",function(){
	t(window).unbind("mouseup",r)}
),i}
;
	jQuery.fn.cropbox=function(t){
	return new e(t,this)}
}
);

CSS代码(style.css):

.imageBox{position:relative;height:400px;width:400px;border:1px solid #aaa;background:#fff;overflow:hidden;background-repeat:no-repeat;cursor:move;}
.imageBox .thumbBox{position:absolute;top:50%;left:50%;width:200px;height:200px;margin-top:-100px;margin-left:-100px;box-sizing:border-box;border:1px solid rgb(102,102,102);box-shadow:0 0 0 1000px rgba(0,0,0,0.5);background:none repeat scroll 0% 0% transparent;}
.imageBox .spinner{position:absolute;top:0;left:0;bottom:0;right:0;text-align:center;line-height:400px;background:rgba(0,0,0,0.7);}

附件:下载该文件资源,减少时间成本(增值服务)