項目中經常使用的圖片處理方案小結

　　項目裏經常會用到點擊圖片放大而後輪播的功能，這裏總結一下各個終端的處理方案。

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圖，會出現高度沒法限制或者限制了高度但寬度不能鋪滿屏幕的狀況。所以使用背景圖片。直接貼代碼：

 

暫時就是這麼多了，若是之後再遇到別的問題還會繼續總結出來。

完整代碼