javascript - 請教這些圖片效果是如何做到的

http://www.louisvuitton.cn/im...

打開上面圖片地址,設定wid=500&hei=500可以改變圖片的大小，請問是何種技術做的，謝謝。

回覆內容：

http://www.louisvuitton.cn/im...

打開上面圖片地址,設定wid=500&hei=500可以改變圖片的大小，請問是何種技術做的，謝謝。

從回應頭看是服務端產生的，所以不是透過頁面js控制的；後端根據url參數即時產生圖片（例如GD庫）

nginx圖片裁剪，我以前遇到過，請看這裡

cdn
之前用過阿里雲的, 雲端處理圖片, 在你傳入參數之後, 根據參數對圖片進行處理. 但圖片必須是在伺服器中.

https://www.aliyun.com/produc...

再php下有圖片處理GD 這個可以做到處理圖片大小的問題 創建一個空圖層 然後把圖片複製進去 生成 輸出 就可以了

nginx對圖片進行裁剪，配置裡面提供了圖片尺寸

如果你使用的是php的話,這裡有1個項目就是關於這方面的可以直接拿去使用基於URL的輕量級圖片處理庫

在伺服器端取的傳遞的參數 根據對應屬性產生一個 標籤回傳到前台
例如

<code><img  src="" width="501" height="501"></code>

給圖片加上對應屬性

伺服器直接設定輸出類型res.header('content-type', 'image/jpg');
例如下面這張圖片，其位址為：http://bing.ioliu.cn/v1?w =500...

實現代碼：https://github.com/xCss/bing/...

當然，上面是用Nodejs寫的，你想要的PHP版本也有：https://github.com/xCss/bing/...

<code class="php">    /*
    * 直接输出图片到页面
    */
    function outputPic($url,$w,$h){
    
        if($w&&$h){
            $url = str_replace('1920x1080',$w.'x'.$h,$url);
        }
        header('Content-Type:image/jpeg');
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 0);
        curl_setopt($ch, CURLOPT_HTTPHEADER, array(
            'User-Agent: Mozilla/5.0 (Windows NT 6.2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.137 Safari/537.36'
        ));
        curl_setopt($ch, CURLOPT_TIMEOUT,0);//忽略超时
        curl_setopt($ch, CURLOPT_NOBODY, false);
        $str = curl_exec($ch);
        curl_close($ch);
        
    }</code>

---

註：nodejs版本實現的是透過七牛雲儲存的圖片處理實現的，傳送門：http://developer.qiniu.com/co...

寫了一串關於前端自適應圖片大小的答案。寫完才發現審錯題了。 。 。
樓上說得對！ ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

什麼GD庫啊，NGINX裁剪，有毛關係，不就是對不同的參數輸出不同的圖片嗎？哪有什麼技術可言？