javascript - 請教這些圖片效果是如何做到的-php教程-PHP中文網

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

WBOY

發布： 2023-03-01 15:32:02

原創

1013 人瀏覽過

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

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

回覆內容：

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

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

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

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

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

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

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

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

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

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

在伺服器端取的傳遞的參數根據對應屬性產生一個 javascript - 請教這些圖片效果是如何做到的標籤回傳到前台
例如

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

登入後複製

給圖片加上對應屬性

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

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

實現代碼：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>

登入後複製