图片的上传和裁剪

Posted 2020-12-31 zxcc

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片的上传和裁剪相关的知识，希望对你有一定的参考价值。

1.html，我添加了bootstrap模态框

 <li > <span >封面美照*</span><!--<img src="img/signup/u765.png"  class="add1">（可以上传1张图片哦~）-->
                      <!-- 裁剪框Modal -->
                      <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                          <div class="modal-dialog" role="document">
                              <div class="modal-content">
                                  <div class="modal-header">
                                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                          <span aria-hidden="true">&times;</span>
                                      </button>
                                  </div>
                                  <div class="modal-body">

                                      <div class="imageBox1">
                                          <div class="thumbBox1"></div>
                                          <div class="spinner1" style="display: none">Loading...</div>
                                      </div>
                                  </div>
                                  <div class="modal-footer">
                                      <input type="button" id="btnCrop1" value="裁剪" style="float: right" data-dismiss="modal">
                                  </div>
                              </div>
                          </div>
                      </div>

                               <!--
                                  <div class="imageBox1">
                                      <div class="thumbBox1"></div>
                                      <div class="spinner1" style="display: none">Loading...</div>
                                  </div>
                                 <input type="button" id="btnCrop1" value="裁剪" style="float: right">-->
                      <!-- 裁剪框结束 -->
                      <div class="action1">
                          <div class="cropped1"> <!--展示图片-->
                          </div>
                          <!-- accept="image/*;capture=camera" 直接调用相机
                           accept="image/*" 调用相机 图片或者相册-->
                          <!--1张-->
                          <label for="file1" >
                              <img src="img/signup/u749.png" alt="" class="file-img1">
                              <p>（仅可以上传1张png/jpg格式的图片哦~）</p>
                          </label>
                          <input type="file" id="file1" style="float:left"  accept="image/*"  data-toggle="modal"
                                 data-target="#myModal1">

                      </div>

                  </li>
                  <li > <span>参赛作品*</span>

                      <!-- 裁剪框Modal -->
                      <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                          <div class="modal-dialog" role="document">
                              <div class="modal-content">
                                  <div class="modal-header">
                                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                          <span aria-hidden="true">&times;</span>
                                      </button>
                                  </div>
                                  <div class="modal-body">
                                      <div class="imageBox2">
                                          <div class="thumbBox2"></div>
                                          <div class="spinner2" style="display: none">Loading...</div>
                                      </div>
                                  </div>
                                  <div class="modal-footer">
                                      <input type="button" id="btnCrop2" value="裁剪" style="float: right" data-dismiss="modal"
                                             data-toggle="modal" data-target=".bs-example-modal-sm">
                                  </div>
                              </div>
                          </div>
                      </div>
                      <!-- 裁剪框Modal结束 -->


                      <!--<div class="imageBox2">
                          <div class="thumbBox2"></div>
                          <div class="spinner2" style="display: none">Loading...</div>

                      </div>
                      <input type="button" id="btnCrop2" value="裁剪" style="float: right">
-->


                      <div class="action2">
                          <div class="cropped2"><!--展示图片页面-->

                          </div>

                          <!-- accept="image/*;capture=camera" 直接调用相机
                           accept="image/*" 调用相机 图片或者相册
                            accept="image/png, image/jpeg, image/gif, image/jpg"-->
                          <!--9张-->
                          <label for="file2" class="label2">
                              <img src="img/signup/u765.png" alt="" class="file-img2">
                              <p>（最多上传9张png/jpg格式的图片哦~）</p>
                          </label>
                          <input type="file" id="file2" style="float:left"
                                 accept="image/png,image/jpg;capture=camera"
                                 data-toggle="modal"
                                 data-target="#myModal2">
                      </div>
                  </li>

2.css部分

/*弹出剪裁部分*/
.imageBox1
{
    display:none;
    position: relative;
    height: 20rem;
    width: 20rem;
    border:1px solid #aaa;
    background: #fff;
    overflow: hidden;
    background-repeat: no-repeat;
    cursor:move;
}
/*裁剪按键*/
#btnCrop1{
    display:none;
    width:5rem;height:auto;
}
/*input上传图片*/
#file1{
   display:none;
}

/*剪裁限制的高宽*/
.imageBox1 .thumbBox1
{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10rem;/*剪裁限制的高宽*/
    height: 10rem;
    margin-top: -5rem;
    margin-left: -5rem;
    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;
}

.imageBox1 .spinner1
{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    line-height: 400px;
    background: rgba(0,0,0,0.7);
}
/*页面本来展示的图片*/
.file-img1{
    width: 10rem;
    height: 10rem;
}
/*展示图片*/
.image1{
   /* margin-top:3rem;*/
    position:relative;
    width: 10rem;/*剪裁限制的高宽*/
    height: 10rem;
}
/*删除图片*/
.delete1{
    position:absolute;top:0.2rem;right:0.2rem;
    height:auto;
    width:1.3rem;
    border-radius: 1.3rem;
    background:black;
    opacity: 0.6;
    color: white;
    z-index: 60;
    text-align: center;
}

.action1{
    margin-top:2rem;
}

.action2{
    margin-top:2rem;
}






/*公共的thumbnail框*/
.thumbnail{
    margin-left:0.5rem;
}

label p{
    color: #999999;
    font-size: 1rem;
}

.close{
    font-size: 1rem;
}




/*第二个剪切*/
.imageBox2
{
    display:none;
    position: relative;
    height: 20rem;
    width:20rem;
    border:1px solid #aaa;
    background: #fff;
    overflow: hidden;
    background-repeat: no-repeat;
    cursor:move;
}
#btnCrop2{
    display:none;
    width:5rem;height:auto;
}
#file2{
    display:none;
}
.imageBox2 .thumbBox2
{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10rem;/*剪裁限制的高宽*/
    height: 10rem;
    margin-top: -5rem;
    margin-left: -5rem;
    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;
}

.imageBox2 .spinner2
{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    line-height: 400px;
    background: rgba(0,0,0,0.7);
}

/*页面本来展示的图片*/
.file-img2{
    width: 10rem;
    height: 10rem;
}

.image2{
    position:relative;
    width:10rem;
    height:10rem;
}
.delete2{
    position:absolute;top:0.2rem;right:0.2rem;
    height:auto;
    width:1.3rem;
    border-radius: 1.3rem;
    background:black;
/*    background:#4fccb2;*/
    opacity: 0.6;
    color: white;
    z-index: 60;
    text-align: center;
}
.modal-content{
    text-align: center;
}

3.js部分，1张赫9张

    $(window).load(function() {
        function file1(){
            //剪裁框部分隐藏
            $(‘.imageBox1‘).hide();
            $(‘#btnCrop1‘).hide();
            var options = {
                thumbBox: ‘.thumbBox1‘,
                spinner: ‘.spinner1‘,
                imgSrc: ‘avatar.png‘
            };
            var cropper = $(‘.imageBox1‘).cropbox(options);


            $(‘#file1‘).on(‘change‘, function(){
                //点击上传文件时候剪裁框部分显示
                $(‘.imageBox1‘).show();
                $(‘#btnCrop1‘).show();
                var reader = new FileReader();
                reader.onload = function(e) {
                    options.imgSrc = e.target.result;
                    cropper = $(‘.imageBox1‘).cropbox(options);
                };
                reader.readAsDataURL(this.files[0]);
                this.files = [];
            });


            //点击上剪裁展示在页面中。限制一张！！
            $(‘#btnCrop1‘).on(‘click‘, function(){
                var img = cropper.getDataURL();
                $(‘.cropped1‘).html(‘<div class="image1 thumbnail col-xs-3">‘+‘<img src="‘+img+‘" class="img1 img-responsive">‘+
                    ‘<div class="delete1">‘+"X"+‘</div>‘+
                    ‘</div>‘);
                $(‘.imageBox1‘).hide();
                $(‘#btnCrop1‘).hide();
              /*  $(‘.file1‘).hide();*/
                $(‘.delete1‘).click(function () {
                    $(this).parent().remove();
                    /*$(‘.file-img1‘).show();*/
                })
            });
        }
        file1();



        function file2(){
            //剪裁框部分隐藏
            $(‘.imageBox2‘).hide();
            $(‘#btnCrop2‘).hide();
            var options = {
                thumbBox: ‘.thumbBox2‘,
                spinner: ‘.spinner2‘,
                imgSrc: ‘../img/signup/u749.png‘
            };
            var cropper = $(‘.imageBox2‘).cropbox(options);

            $(‘#file2‘).on(‘change‘, function(){
                    //点击上传文件时候剪裁框部分显示
                    $(‘.imageBox2‘).show();
                    $(‘#btnCrop2‘).show();
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        options.imgSrc = e.target.result;
                        cropper = $(‘.imageBox2‘).cropbox(options);
                    };
                    reader.readAsDataURL(this.files[0]);
                    this.files = [];


                });






            //点击上剪裁展示在页面中。限制9张！！
            $(‘#btnCrop2‘).on(‘click‘, function(){
                var img = cropper.getDataURL();
                var num=$(".img2").length+1;
                if(num>9){
                    $(‘.action2‘).append(‘<div class="modal fade bs-example-modal-sm tishi" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
‘ +
                        ‘<div class="modal-dialog modal-sm" role="document">
‘ +
                        ‘<div class="modal-content ">
‘ +
                        ‘最多上传9张png/jpg格式的图片哦~
‘ +
                        ‘<div class="modal-header">
‘ +
                        ‘<button type="button" class="btn btn-info close" data-dismiss="modal" aria-label="Close">
‘ +
                        ‘<span aria-hidden="true">确定</span>
‘ +
                        ‘</button>
‘ +
                        ‘</div>
‘ +
                        ‘</div>
‘ +
                        ‘</div>
‘ +
                        ‘</div>‘);

                }else{
                    $(‘.cropped2‘).append(‘<div class="image2 thumbnail col-xs-4">‘+‘<img src="‘+img+‘" class="img2 img-responsive">‘+
                        ‘<div class="delete2">‘+"X"+‘</div>‘+
                        ‘</div>‘);
                    $(‘.btn-default‘).hide();
                    $(‘.tishi‘).remove();
                    /*console.log( $(‘.img2‘).attr("src"));*/
                }
                $(‘.imageBox2‘).hide();
                $(‘#btnCrop2‘).hide();
                $(‘.delete2‘).click(function () {
                   /* console.log( $(this).parent().find(‘img‘).attr("src"));*/  //输出获取的src地址
                    $(this).parent().remove();
                    $(this).parent().find(‘img‘).removeAttr("src");

                })
            });

          /*  点击input上传图片时也要限制
            */


        }
        file2();



    });

技术分享图片

以上是关于图片的上传和裁剪的主要内容，如果未能解决你的问题，请参考以下文章

图片裁剪

基于cropper和sweetalert的简单图片/头像裁剪上传

移动端图片裁剪解决方案

通过外部图片链接上传和裁剪图片

php图片上传类（支持缩放裁剪图片缩略功能）

Cakephp 2+ 上传图片时调整图片大小和裁剪