项目中经常使用的图片处理方案小结

　　项目里经常会用到点击图片放大而后轮播的功能，这里总结一下各个终端的处理方案。

H5移动端

　　移动端采用的是Swiper插件

 

微信浏览器

　　首先引用微信官方提供的脚本 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，而后在微信中访问该页面就能查看了(用微信浏览器打开示例代码是没有效果的，只能把代码拷贝到本地)

 

APICloud

　　关于这个不想说什么了，见一次就想黑一次。

main.html

<div id="box">
    <img src="https://store.unity.com/themes/store/images/downloads/mv-dl_3.png" alt="">
    <img src="https://store.unity.com/themes/store/images/frontpage/ori-and-the-blind-forest.jpg" alt="">
</div>

<script>
    apiready = function(){
        slideImg($('#box img'));
    };
    function slideImg(tags) {
        var urls = [];

        tags.each(function(i,o) {
            urls.push($(o).attr('src'));
        });

        tags.each(function(i,o) {
            $(o).click(function() {
                api.openFrame({
                    name: 'imgView',
                    rect:{
                        x:0,
                        y:0,
                        w:'auto',
                        y:'auto'
                    },
                    url: 'viewer.html',
                    pageParam:{
                        urls: urls,
                        idx: i
                    }
                });
            });
        });
    }
</script>

viewer.html

apiready = function(){
        var photoBrowser = api.require('photoBrowser');

        var urls = api.pageParam.urls;
        var idx = api.pageParam.idx;

        scaleImg(urls,idx,api,photoBrowser);
    };

    function scaleImg(imgArray,idx,api,photoBrowser) {
        photoBrowser.open({
            images: imgArray instanceof Array ? imgArray : [imgArray],
            activeIndex: idx,
            bgColor: 'rgba(0,0,0,0.5)',
            tapClose:true
        },function(ret,err) {
            if(ret && ret.eventType === 'click') {
                photoBrowser.close();

                setTimeout(function() {
                    api.closeFrame({name:'imgView'});
                },300);
            }
        });
    }

 

图片按比例缩放

　　项目中有不少图片是客户从后台上传的，传的图片大小不一，并且客户不想每张图都本身裁一次，因此要求图片在容器大小固定的状况下，可以按比例居中显示。直接看例子(有可能须要保存到本地才能看到效果)：

 

Banner图的处理

　　如今不少网站的Banner图都是全屏宽度，若是不作任何处理，在不一样分辨率下，或者浏览器放大缩小时图片不会跟随浏览器变化，有可能出现滚动条或者只显示左边部分。理想状况是让图片在各类条件下都显示中间的部分。若是使用img来存放banner图，会出现高度没法限制或者限制了高度但宽度不能铺满屏幕的状况。所以使用背景图片。直接贴代码：

 

暂时就是这么多了，若是之后再遇到别的问题还会继续总结出来。

完整代码