图片中间部分显示

手机H5仿微信多图上传中已经完成了图片上传的那部分，这篇文章主要讲的是图片展示的部分，效果图如下：

图片展示.png

因为上传的图片是不知道大小和长宽的，如果像上图一样展示那肯定是会被压扁，然后变形，除非使用瀑布的布局，但是本项目不能使用哪种布局，只能如上图展示。解决这个问题有三种方法：一、图片转canvas然后计算高度宽度，只显示中间部分，二、img外面添加一个div，控制img的位置，三、通过img的css的clip显示区域(不太实用，只能用于静态的图片展示)

小编使用了第二种方法实现

示意图.png

1.图片的展示

    <div class="ssp_my_list">
        <div class="items">
            @foreach ($snapshots as $snapshot)
                <div class="item" id="{{$snapshot->id}}">
                    <div class="top_avatar">
                        <div class="top_left">
                            <img src="{{$snapshot->hasoneuser->avatar}}">
                        </div>

                        <div class="top_right">
                            <div class="right_top">
                                <div class="nickname">
                                    {{$snapshot->hasoneuser->nickname}}
                                </div>
                                <div class="snapshot">
                                    <div class="title">{{$snapshot->title}}</div>
                                    <div class="date">{{$snapshot->created_at->format('Y-m-d')}}</div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="con">
                        <div class="mood">{{$snapshot->mood}}</div>
                        <div class="imgs">
                            @foreach(json_decode($snapshot->files, true) as $key => $value)
                                <div class="img{{count(json_decode($snapshot->files, true))}}">
                                    <img style="position: relative;"
                                         data-id="{{$snapshot->id}}"
                                         data-class="img{{count(json_decode($snapshot->files, true))}}"
                                         class="img_big"
                                         src="{{config('admin.upload.host')}}{{ $value }}">
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

.ssp_my_list .items .item .con .imgs{
    margin-top: 0.5rem;
    overflow: auto;
    min-height: 4rem;
    max-height: 16rem;
}

.img1{
    width: 15rem;
    height: 15rem;
    overflow: hidden
}


.img2{
    width: 7.3rem;
    height: 7.3rem;
    float: left;
    margin-right: 0.4rem;
    overflow: hidden
}

.img2:nth-child(2),
.img2:nth-child(4){
    margin-right: 0rem;
}


.img3{
    width: 4.8rem;
    height: 4.8rem;
    float: left;
    margin-right: 0.3rem;
    overflow: hidden

}

.img3:nth-child(3),
.img3:nth-child(6),
.img3:nth-child(9){
    margin-right: 0rem;
}

2、用js改变图片的大小以及相对位置

function loadImg () {
                var imgArr = $(".img_big");
                imgArr.each(function (i) {

                    var img = $(this)[0];

                    if(img.name != ""){
                        return true;
                    }

                    var className = "." + img.dataset.class;
                    var image = new Image();
                    var realWidth = 0;//储存图片实际宽度
                    var realHeight = 0;//储存图片实际高度
                    var frameWidth;//获取图片div的宽;
                    var frameHeight;//获取图片div的高
                    image.src = img.src;
                    image.name = className;

                    //加载成功的处理
                    image.onload = function () {
                        frameWidth = $(image.name)[0].offsetWidth;
                        frameHeight = $(image.name)[0].offsetHeight;
                        realWidth = image.width;//获取图片实际宽度
                        realHeight = image.height;//获取图片实际高度
                        //让img的宽高相当于图片实际宽高的等比缩放，然后再偏移

                        img.className = 'img_sm';

                        if (realWidth > realHeight) {
                            img.width = (frameWidth / realHeight) * realWidth;//等比缩放宽度
                            img.height = frameHeight;//跟div高度一致
                            img.style.left = '-' + ((frameHeight / realHeight) * realWidth - frameHeight) / 2 + 'px';//设置图片相对自己位置偏移为img标签的宽度-高度的一半
                        } else if (realWidth < realHeight) {
                            img.width = frameHeight;//跟div高度一致
                            img.height = (frameWidth / realWidth) * realHeight;//等比缩放高度
                            img.style.top = '-' + ((frameWidth / realWidth) * realHeight - frameWidth) / 2 + 'px';//设置图片相对自己位置偏移为img标签的高度-宽度的一半
                        } else {
                            img.width = frameWidth;
                            img.height = frameHeight;
                        }
                    };
                    //图片加载失败的处理
                    img.onerror = function () {
                        img.src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1492076382452&di=04ebd6c4688b2ffbd8ae18e685234704&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fwh%253D450%252C600%2Fsign%3D0c96dc86da33c895a62b907fe4235fc6%2F0823dd54564e9258d2bb2dff9f82d158ccbf4e17.jpg";
                        img.width = 100;
                        img.height = 100;
                    }


                })
            }

3、基本完成了

完成.png