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

分手后的思念是犯贱 2022-06-05 04:53 343阅读 0赞

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

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

一：效果图如下：

1、页面初始化效果图：

![Center][]

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

3、点击“裁减“按钮显示的效果图：  
![Center 2][]

二：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 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插件：

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);
        };
    }));

[Center]: /images/20220605/a81d2b38d4e7479bbc9b5b652cdfaa34.png
[Center 1]: /images/20220605/13a6c5860f70478982cae20d541b5c95.png
[Center 2]: /images/20220605/7a7239fac3934f4988ef85394ffb3f6f.png