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

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

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图，会出现高度无法限制或者限制了高度但宽度不能铺满屏幕的情况。因此使用背景图片。直接贴代码：

 

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

完整代码