在线图片上传、预览、裁切、放大、缩小之 cropbox.js 的应用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/tangxiujiang/article/details/78564706

在线图片上传、预览、裁切、放大、缩小之 cropbox.js 的应用:cropbox.js 是一个实现了图像在线剪裁的 jQuery 、YUI 插件和 JavaScript 库

上传的图片可以使用滚轮放大与缩小当前选择的图片,也可以点击按钮“+”、“”-“实现放大缩小,”后点击“裁切”后显示裁减的图片

一:效果图如下:

1、页面初始化效果图:


2、点击”上传图像“之后显示的效果图,可以用滚轮实现放大与缩小,或者是点击“”+“”、“”-“”实现缩放功能:

3、点击“裁减“按钮显示的效果图:


二:html如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>明信片</title>
    <link rel="stylesheet" href="commonUtil.css">
    <link rel="stylesheet" href="cropbox.css"/>
    <!-- <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script> -->
    <script type="text/javascript" src='jquery-1.11.1.min.js'></script>
    <script src="cropbox.js"></script>
    <script type="text/javascript" src='postcard.js'></script>
</head>
<body>
    <p class='p_txt'>上传霸屏图片:</p>
    <form class="container" enctype="multipart/form-data" method="post" id=''>
        <!-- 裁减框 -->
        <div class="imageBox" id="imageBox">
            <div class="thumbBox"></div>
            <div class="spinner">+</div>
        </div>
        <!-- 裁减之后的图片 -->
        <div class="cropped" id="cropped">
            <input type="image" id="cropImg" alt='裁减之后的图片' name="裁减之后的图片"/>
        </div>
        <!-- 上传、放大、缩小、裁减 -->
        <div class="action">
            <a class="selectFileDiv uploadImg">
                上传图像
                <input type="file" id="image" name="图像">
            </a>
            <input type="button" id="btnCrop" value="裁减" name='裁减' class="selectFileDiv actionBtn"/>
            <input type="button" id="btnZoomIn" value="+" name='放大' class="selectFileDiv actionBtn"/>
            <input type="button" id="btnZoomOut" value="-" name="缩小" class="selectFileDiv actionBtn"/>
        </div>
        <p class="p_txt p_txt2">霸屏时间:</p>
        <div class="action paScreenTimeContainer">
            <div class="perTimeParent">
                <img src="checkIcon.png" id="checkIcon1" class="checkIcon">
                <input type="button" name="paScreentime1" id="1" value="8 s" class="selectFileDiv paScreentime">
            </div>
            <div class="perTimeParent">
                <img src="checkIcon.png" id="checkIcon2" class="checkIcon">
                <input type="button" name="paScreentime2" id="2" value="18 s" class="selectFileDiv paScreentime">
            </div>
            <div class="perTimeParent">
                <img src="checkIcon.png" id="checkIcon3" class="checkIcon">
                <input type="button" name="paScreentime3" id="3" value="58 s" class="selectFileDiv paScreentime">
            </div>
        </div>
        <p class="p_txt" id="feeContainer">您需支付:<strong id="totalFee"></strong>元</p>
        <input type="button" name="payBtn" id="payBtn" class="selectFileDiv payBtn" value="支付">
    </form>
</body>
</html>

三:css如下

body{
    background-color: #f5f5f5;
    margin: 0px;
    padding: 0px;
    font-size: 2vh;
}

.p_txt{
    font-family: 微软雅黑;
    font-size:2vh;
    color:#7bbbda;
    letter-spacing: 4px;
    margin-left: 2.5vh;
    margin-top: 3vh;
    font-weight: 700;
}

.p_txt2{
    margin-top: 5vh;
}

.container
{
    width:100%;
    height: 320px;
}

.imageBox
{
    position: relative;
    height: 320px;
    width: 100%;
    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: 320px;
    font-size: 8vh;
    color: #888585;
    display: none;
}

.cropped{
    height: 320px;
    width: 100%;
    background-color: #fff;
    text-align: center;
    margin: 0 auto;
    display: none;
}

#cropImg{
    margin-top: 60px;
}

.action
{
    width:100%;
    margin-top: 2vh;
    padding-left: 1vh;
    height: 6vh;
}

.selectFileDiv{
    height: 6vh;
    line-height: 6vh;
    text-align: center;
    letter-spacing: 1px;
    background: #27a027;
    color: #fff;
    border-radius: 5px;
    font-size: 2vh;

}

.uploadImg {
    position: relative;
    display: inline-block;
    overflow: hidden;
    text-decoration: none;
    width: 13vh;
}

.uploadImg input {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
}

.actionBtn{
    float: right;
    width: 10vh;
    padding: 0px;
    border-width: 0px;
    margin-right: 2vh;
}

.paScreenTimeContainer{
    padding-left:2vw;

}

.perTimeParent{
    position:relative;
    width:30vw;
    display: inline-block; 
    margin-right: 2vw;
}

.paScreentime{
    width: 30vw;
    padding: 0px;
    border-width: 0px;
    background: #dedede;
}

.checkIcon{
    position: absolute;
    width:3vw;
    right:0.5vw;
    top:0.5vw;
    display: none;
    z-index: 2;
} 

.selectTimeCss{
    background: #fff;
    color: #27a027;
    border: 1px solid #27a027;
}

#feeContainer{
    height: 4vh;
    margin-top: 4vh;
    margin-bottom: -1vh;
    display: none;
}

.payBtn{
    width: 14vh;
    padding: 0px;
    border-width: 0px;
    display: block;
    margin: 5vh auto;
    letter-spacing: 1.6vh;
    font-size: 2.2vh;
}

四:js如下

$(function(){
	// 定义全局变量
	var globalVar = {
		viewFlag:0 ,    //0-显示裁减框,1-显示裁减之后的图片
		timeBtnArr:[$('#1'),$('#2'),$('#3')]
	};
	// 生成裁减对象的属性设置
    var options ={
        thumbBox: '.thumbBox',  //显示裁减的框内容
        spinner: '.spinner',    //裁减框要是没有图片,则显示
        // imgSrc: 'style1.png'
    };

    // 生成裁减对象
    var cropper = $('.imageBox').cropbox(options);

    // 上传图像
    $('#image').on('change', function(){
    	var reader = new FileReader();
    	globalVar.viewFlag = 0;
    	refreshImgView();
        reader.onload = function(e) {
            options.imgSrc = e.target.result;
            cropper = $('#imageBox').cropbox(options);
        }
        reader.readAsDataURL(this.files[0]);
    });

    // 点击裁减按钮,生成裁减之后的图片,并显示裁减之后的图片
    $('#btnCrop').on('click', function(){
    	// 裁减生成图片的url
        var imgSrc = cropper.getDataURL();
        $('#cropImg').attr('src',imgSrc);
        globalVar.viewFlag = 1;
    	refreshImgView();  
    });

    // 裁减框和裁减之后图片的显示于隐藏
    function refreshImgView(){
    	if( globalVar.viewFlag == 0 ){
    		// 显示裁剪框
    		$('#imageBox').show();
    		$('#cropped').hide();
    	}else{
    		// 显示裁减之后的图片
    		$('#imageBox').hide();
    		$('#cropped').show();
    	}
    }

    // 点击缩小按钮
    $('#btnZoomIn').on('click', function(){
        cropper.zoomIn();
    });

    // 点击放大按钮
    $('#btnZoomOut').on('click', function(){
        cropper.zoomOut();
    });

    
    $('#1').click(function(){
    	if( $(this).hasClass('selectTimeCss') ){

    	}else{
    		refreshTimeBtnView($('#1'));
    	}
    });

    // 点击paScreentime2
    $('#2').click(function(){
    	if( $(this).hasClass('selectTimeCss') ){

    	}else{
    		refreshTimeBtnView($('#2'));
    	}
    });

    // 点击paScreentime2
    $('#3').click(function(){
    	if( $(this).hasClass('selectTimeCss') ){

    	}else{
    		refreshTimeBtnView($('#3'));
    	}
    });

    // 给选中的时间添加样式,未选中的是默认样式
    function refreshTimeBtnView(obj){
    	var id = obj.attr('id');
    	var arr = globalVar.timeBtnArr;
    	var len = arr.length;
    	for(var i = 0;i<len; i++){
    		var oldId = '';
    		if( arr[i].hasClass('selectTimeCss') ){
    			oldId = arr[i].attr('id');
    			arr[i].removeClass('selectTimeCss');
    			$('#checkIcon'+ oldId).css('display','none');
    		} 
    	}
    	obj.addClass('selectTimeCss');
    	$('#checkIcon'+id).css('display','block');
    }
    
}); 

这里用的是Jquery来使用cropbox。在使用cropbox.js插件时,先引入jquery插件:

<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="cropbox.js"></script>

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.οnlοad=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)}});

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 : 1,
                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[0]) - el.width()/2 + width/2,
                        dy = parseInt(dim[1]) - el.height()/2 + height/2,
                        dw = parseInt(size[0]),
                        dh = parseInt(size[1]),
                        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, 0, 0, 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 = 0; 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();
                }
            },
            setBackground = function()
            {
                var w =  parseInt(obj.image.width)*obj.ratio;
                var h =  parseInt(obj.image.height)*obj.ratio;

                var pw = (el.width() - w) / 2;
                var ph = (el.height() - h) / 2;

                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[0]);
                    var bgY = y + parseInt(bg[1]);

                    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 > 0 || e.originalEvent.detail < 0 ? obj.ratio*=1.1 : obj.ratio*=0.9;
                setBackground();
            }

        obj.spinner.show();
        obj.image.onload = function() {
            obj.spinner.hide();
            setBackground();

            el.bind('mousedown', imgMouseDown);
            el.bind('mousemove', imgMouseMove);
            $(window).bind('mouseup', imgMouseUp);
            el.bind('mousewheel DOMMouseScroll', zoomImage);
        };
        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);
    };
}));









展开阅读全文

没有更多推荐了,返回首页