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

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

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

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

一：效果图如下：

1、页面初始化效果图：

Center

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

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

二：html如下 

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  6.     <title>明信片</title>
  7.     <link rel="stylesheet" href="commonUtil.css">
  8.     <link rel="stylesheet" href="cropbox.css"/>
  9.     <!-- <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script> -->
  10.     <script type="text/javascript" src='jquery-1.11.1.min.js'></script>
  11.     <script src="cropbox.js"></script>
  12.     <script type="text/javascript" src='postcard.js'></script>
  13. </head>
  14. <body>
  15.     <p class='p_txt'>上传霸屏图片：</p>
  16.     <form class="container" enctype="multipart/form-data" method="post" id=''>
  17.         <!-- 裁减框 -->
  18.         <div class="imageBox" id="imageBox">
  19.             <div class="thumbBox"></div>
  20.             <div class="spinner">+</div>
  21.         </div>
  22.         <!-- 裁减之后的图片 -->
  23.         <div class="cropped" id="cropped">
  24.             <input type="image" id="cropImg" alt='裁减之后的图片' name="裁减之后的图片"/>
  25.         </div>
  26.         <!-- 上传、放大、缩小、裁减 -->
  27.         <div class="action">
  28.             <a class="selectFileDiv uploadImg">
  29.                 上传图像
  30.                 <input type="file" id="image" name="图像">
  31.             </a>
  32.             <input type="button" id="btnCrop" value="裁减" name='裁减' class="selectFileDiv actionBtn"/>
  33.             <input type="button" id="btnZoomIn" value="+" name='放大' class="selectFileDiv actionBtn"/>
  34.             <input type="button" id="btnZoomOut" value="-" name="缩小" class="selectFileDiv actionBtn"/>
  35.         </div>
  36.         <p class="p_txt p_txt2">霸屏时间:</p>
  37.         <div class="action paScreenTimeContainer">
  38.             <div class="perTimeParent">
  39.                 <img src="checkIcon.png" id="checkIcon1" class="checkIcon">
  40.                 <input type="button" name="paScreentime1" id="1" value="8 s" class="selectFileDiv paScreentime">
  41.             </div>
  42.             <div class="perTimeParent">
  43.                 <img src="checkIcon.png" id="checkIcon2" class="checkIcon">
  44.                 <input type="button" name="paScreentime2" id="2" value="18 s" class="selectFileDiv paScreentime">
  45.             </div>
  46.             <div class="perTimeParent">
  47.                 <img src="checkIcon.png" id="checkIcon3" class="checkIcon">
  48.                 <input type="button" name="paScreentime3" id="3" value="58 s" class="selectFileDiv paScreentime">
  49.             </div>
  50.         </div>
  51.         <p class="p_txt" id="feeContainer">您需支付:<strong id="totalFee"></strong>元</p>
  52.         <input type="button" name="payBtn" id="payBtn" class="selectFileDiv payBtn" value="支付">
  53.     </form>
  54. </body>
  55. </html>

三：css如下

  1. body{
  2.     background-color: #f5f5f5;
  3.     margin: 0px;
  4.     padding: 0px;
  5.     font-size: 2vh;
  6. }
  8. .p_txt{
  9.     font-family: 微软雅黑;
  10.     font-size:2vh;
  11.     color:#7bbbda;
  12.     letter-spacing: 4px;
  13.     margin-left: 2.5vh;
  14.     margin-top: 3vh;
  15.     font-weight: 700;
  16. }
  18. .p_txt2{
  19.     margin-top: 5vh;
  20. }
  22. .container
  23. {
  24.     width:100%;
  25.     height: 320px;
  26. }
  28. .imageBox
  29. {
  30.     position: relative;
  31.     height: 320px;
  32.     width: 100%;
  33.     overflow: hidden;
  34.     background-repeat: no-repeat;
  35.     cursor:move;
  36. }
  38. .imageBox .thumbBox
  39. {
  40.     position: absolute;
  41.     top: 50%;
  42.     left: 50%;
  43.     width: 200px;
  44.     height: 200px;
  45.     margin-top: -100px;
  46.     margin-left: -100px;
  47.     box-sizing: border-box;
  48.     border: 1px solid rgb(102, 102, 102);
  49.     box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
  50.     background: none repeat scroll 0% 0% transparent;
  51. }
  53. .imageBox .spinner
  54. {
  55.     position: absolute;
  56.     top: 0;
  57.     left: 0;
  58.     bottom: 0;
  59.     right: 0;
  60.     text-align: center;
  61.     line-height: 320px;
  62.     font-size: 8vh;
  63.     color: #888585;
  64.     display: none;
  65. }
  67. .cropped{
  68.     height: 320px;
  69.     width: 100%;
  70.     background-color: #fff;
  71.     text-align: center;
  72.     margin: 0 auto;
  73.     display: none;
  74. }
  76. #cropImg{
  77.     margin-top: 60px;
  78. }
  80. .action
  81. {
  82.     width:100%;
  83.     margin-top: 2vh;
  84.     padding-left: 1vh;
  85.     height: 6vh;
  86. }
  88. .selectFileDiv{
  89.     height: 6vh;
  90.     line-height: 6vh;
  91.     text-align: center;
  92.     letter-spacing: 1px;
  93.     background: #27a027;
  94.     color: #fff;
  95.     border-radius: 5px;
  96.     font-size: 2vh;
  98. }
  100. .uploadImg {
  101.     position: relative;
  102.     display: inline-block;
  103.     overflow: hidden;
  104.     text-decoration: none;
  105.     width: 13vh;
  106. }
  108. .uploadImg input {
  109.     position: absolute;
  110.     right: 0;
  111.     top: 0;
  112.     opacity: 0;
  113. }
  115. .actionBtn{
  116.     float: right;
  117.     width: 10vh;
  118.     padding: 0px;
  119.     border-width: 0px;
  120.     margin-right: 2vh;
  121. }
  123. .paScreenTimeContainer{
  124.     padding-left:2vw;
  126. }
  128. .perTimeParent{
  129.     position:relative;
  130.     width:30vw;
  131.     display: inline-block; 
  132.     margin-right: 2vw;
  133. }
  135. .paScreentime{
  136.     width: 30vw;
  137.     padding: 0px;
  138.     border-width: 0px;
  139.     background: #dedede;
  140. }
  142. .checkIcon{
  143.     position: absolute;
  144.     width:3vw;
  145.     right:0.5vw;
  146.     top:0.5vw;
  147.     display: none;
  148.     z-index: 2;
  149. } 
  151. .selectTimeCss{
  152.     background: #fff;
  153.     color: #27a027;
  154.     border: 1px solid #27a027;
  155. }
  157. #feeContainer{
  158.     height: 4vh;
  159.     margin-top: 4vh;
  160.     margin-bottom: -1vh;
  161.     display: none;
  162. }
  164. .payBtn{
  165.     width: 14vh;
  166.     padding: 0px;
  167.     border-width: 0px;
  168.     display: block;
  169.     margin: 5vh auto;
  170.     letter-spacing: 1.6vh;
  171.     font-size: 2.2vh;
  172. }

四：js如下

  1. $(function(){
  2.     // 定义全局变量
  3.     var globalVar = {
  4.         viewFlag:0 ,    //0-显示裁减框，1-显示裁减之后的图片
  5.         timeBtnArr:[$('#1'),$('#2'),$('#3')]
  6.     };
  7.  // 生成裁减对象的属性设置 var options ={ thumbBox: '.thumbBox', //显示裁减的框内容 spinner: '.spinner', //裁减框要是没有图片，则显示 // imgSrc: 'style1.png' }; // 生成裁减对象 var cropper = $('.imageBox').cropbox(options);
  9.     // 上传图像
  10.     $('#image').on('change', function(){
  11.         var reader = new FileReader();
  12.         globalVar.viewFlag = 0;
  13.         refreshImgView();
  14.         reader.onload = function(e) {
  15.             options.imgSrc = e.target.result;
  16.             cropper = $('#imageBox').cropbox(options);
  17.         }
  18.         reader.readAsDataURL(this.files[0]);
  19.     });
  21.     // 点击裁减按钮,生成裁减之后的图片,并显示裁减之后的图片
  22.     $('#btnCrop').on('click', function(){
  23.         // 裁减生成图片的url
  24.         var imgSrc = cropper.getDataURL();
  25.         $('#cropImg').attr('src',imgSrc);
  26.         globalVar.viewFlag = 1;
  27.         refreshImgView();  
  28.     });
  30.     // 裁减框和裁减之后图片的显示于隐藏
  31.     function refreshImgView(){
  32.         if( globalVar.viewFlag == 0 ){
  33.             // 显示裁剪框
  34.             $('#imageBox').show();
  35.             $('#cropped').hide();
  36.         }else{
  37.             // 显示裁减之后的图片
  38.             $('#imageBox').hide();
  39.             $('#cropped').show();
  40.         }
  41.     }
  43.     // 点击缩小按钮
  44.     $('#btnZoomIn').on('click', function(){
  45.         cropper.zoomIn();
  46.     });
  48.     // 点击放大按钮
  49.     $('#btnZoomOut').on('click', function(){
  50.         cropper.zoomOut();
  51.     });
  54.     $('#1').click(function(){
  55.         if( $(this).hasClass('selectTimeCss') ){
  57.         }else{
  58.             refreshTimeBtnView($('#1'));
  59.         }
  60.     });
  62.     // 点击paScreentime2
  63.     $('#2').click(function(){
  64.         if( $(this).hasClass('selectTimeCss') ){
  66.         }else{
  67.             refreshTimeBtnView($('#2'));
  68.         }
  69.     });
  71.     // 点击paScreentime2
  72.     $('#3').click(function(){
  73.         if( $(this).hasClass('selectTimeCss') ){
  75.         }else{
  76.             refreshTimeBtnView($('#3'));
  77.         }
  78.     });
  80.     // 给选中的时间添加样式，未选中的是默认样式
  81.     function refreshTimeBtnView(obj){
  82.         var id = obj.attr('id');
  83.         var arr = globalVar.timeBtnArr;
  84.         var len = arr.length;
  85.         for(var i = 0;i<len; i++){
  86.             var oldId = '';
  87.             if( arr[i].hasClass('selectTimeCss') ){
  88.                 oldId = arr[i].attr('id');
  89.                 arr[i].removeClass('selectTimeCss');
  90.                 $('#checkIcon'+ oldId).css('display','none');
  91.             } 
  92.         }
  93.         obj.addClass('selectTimeCss');
  94.         $('#checkIcon'+id).css('display','block');
  95.     }
  97. });

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

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

cropbox-min.js的压缩源代码如下：

  1. "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源代码如下：

  1. /**
  2.  * Created by ezgoing on 14/9/2014.
  3.  */
  5. "use strict";
  6. (function (factory) {
  7.     if (typeof define === 'function' && define.amd) {
  8.         define(['jquery'], factory);
  9.     } else {
  10.         factory(jQuery);
  11.     }
  12. }(function ($) {
  13.     var cropbox = function(options, el){
  14.         var el = el || $(options.imageBox),
  15.             obj =
  16.             {
  17.                 state : {},
  18.                 ratio : 1,
  19.                 options : options,
  20.                 imageBox : el,
  21.                 thumbBox : el.find(options.thumbBox),
  22.                 spinner : el.find(options.spinner),
  23.                 image : new Image(),
  24.                 getDataURL: function ()
  25.                 {
  26.                     var width = this.thumbBox.width(),
  27.                         height = this.thumbBox.height(),
  28.                         canvas = document.createElement("canvas"),
  29.                         dim = el.css('background-position').split(' '),
  30.                         size = el.css('background-size').split(' '),
  31.                         dx = parseInt(dim[0]) - el.width()/2 + width/2,
  32.                         dy = parseInt(dim[1]) - el.height()/2 + height/2,
  33.                         dw = parseInt(size[0]),
  34.                         dh = parseInt(size[1]),
  35.                         sh = parseInt(this.image.height),
  36.                         sw = parseInt(this.image.width);
  38.                     canvas.width = width;
  39.                     canvas.height = height;
  40.                     var context = canvas.getContext("2d");
  41.                     context.drawImage(this.image, 0, 0, sw, sh, dx, dy, dw, dh);
  42.                     var imageData = canvas.toDataURL('image/png');
  43.                     return imageData;
  44.                 },
  45.                 getBlob: function()
  46.                 {
  47.                     var imageData = this.getDataURL();
  48.                     var b64 = imageData.replace('data:image/png;base64,','');
  49.                     var binary = atob(b64);
  50.                     var array = [];
  51.                     for (var i = 0; i < binary.length; i++) {
  52.                         array.push(binary.charCodeAt(i));
  53.                     }
  54.                     return  new Blob([new Uint8Array(array)], {type: 'image/png'});
  55.                 },
  56.                 zoomIn: function ()
  57.                 {
  58.                     this.ratio*=1.1;
  59.                     setBackground();
  60.                 },
  61.                 zoomOut: function ()
  62.                 {
  63.                     this.ratio*=0.9;
  64.                     setBackground();
  65.                 }
  66.             },
  67.             setBackground = function()
  68.             {
  69.                 var w =  parseInt(obj.image.width)*obj.ratio;
  70.                 var h =  parseInt(obj.image.height)*obj.ratio;
  72.                 var pw = (el.width() - w) / 2;
  73.                 var ph = (el.height() - h) / 2;
  75.                 el.css({
  76.                     'background-image': 'url(' + obj.image.src + ')',
  77.                     'background-size': w +'px ' + h + 'px',
  78.                     'background-position': pw + 'px ' + ph + 'px',
  79.                     'background-repeat': 'no-repeat'});
  80.             },
  81.             imgMouseDown = function(e)
  82.             {
  83.                 e.stopImmediatePropagation();
  85.                 obj.state.dragable = true;
  86.                 obj.state.mouseX = e.clientX;
  87.                 obj.state.mouseY = e.clientY;
  88.             },
  89.             imgMouseMove = function(e)
  90.             {
  91.                 e.stopImmediatePropagation();
  93.                 if (obj.state.dragable)
  94.                 {
  95.                     var x = e.clientX - obj.state.mouseX;
  96.                     var y = e.clientY - obj.state.mouseY;
  98.                     var bg = el.css('background-position').split(' ');
  100.                     var bgX = x + parseInt(bg[0]);
  101.                     var bgY = y + parseInt(bg[1]);
  103.                     el.css('background-position', bgX +'px ' + bgY + 'px');
  105.                     obj.state.mouseX = e.clientX;
  106.                     obj.state.mouseY = e.clientY;
  107.                 }
  108.             },
  109.             imgMouseUp = function(e)
  110.             {
  111.                 e.stopImmediatePropagation();
  112.                 obj.state.dragable = false;
  113.             },
  114.             zoomImage = function(e)
  115.             {
  116.                 e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0 ? obj.ratio*=1.1 : obj.ratio*=0.9;
  117.                 setBackground();
  118.             }
  120.         obj.spinner.show();
  121.         obj.image.onload = function() {
  122.             obj.spinner.hide();
  123.             setBackground();
  125.             el.bind('mousedown', imgMouseDown);
  126.             el.bind('mousemove', imgMouseMove);
  127.             $(window).bind('mouseup', imgMouseUp);
  128.             el.bind('mousewheel DOMMouseScroll', zoomImage);
  129.         };
  130.         obj.image.src = options.imgSrc;
  131.         el.on('remove', function(){$(window).unbind('mouseup', imgMouseUp)});
  133.         return obj;
  134.     };
  136.     jQuery.fn.cropbox = function(options){
  137.         return new cropbox(options, this);
  138.     };
  139. }));

发表评论

表情：
评论列表 （有 0 条评论，394人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Ext图片上传之预览 .

    在进行图片上传时，通常需要进行预览。而这种预览的行为通常是预览客户端的本地资源。下面就讲一下在Ext中是如何实现图片上传预览的。 首先，创建为预览图片创建一个控件： xty

    Myth丶恋晨Myth丶恋晨/ 0 赞/ 439 阅读

    相关 图片预览与上传

    > 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

    小鱼儿小鱼儿/ 0 赞/ 698 阅读

    相关 一个图片上传预览

    一、一个按钮上传文件操作 前台选择文件，只能通过input的file类型的文件选择框操作。但有时却为了界面的美观，要求用按钮来完成。 第一步、隐藏文件选择框 第二步、

    ╰半橙微兮°╰半橙微兮°/ 0 赞/ 713 阅读