javascript - Please tell me how to achieve these picture effects

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

Open the image address above and set wid=500&hei=500 to change the size of the image. What technology is used to do it? Thank you.

Reply content:

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

Open the image address above and set wid=500&hei=500 to change the size of the image. What technology is used to do it? Thank you.

From the response header, it is generated by the server, so it is not controlled through the page js; the backend generates images in real time based on the url parameters (such as GD library)

nginx image cropping, I have encountered it before, see here

cdn
I have used Alibaba Cloud before, which processes images in the cloud. After you pass in the parameters, the images are processed according to the parameters. But the images must be in the server.

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

There is image processing GD under PHP. This can handle the problem of image size. Create an empty layer and then copy the image into it to generate output. That’s it.

nginx crops the image, and the image size is provided in the configuration

If you are using php, here is a project about this aspect that you can use directly to use a lightweight image processing library based on URL

The passed parameters are taken on the server side and an tag is generated based on the corresponding attributes and returned to the front desk
For example

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

Add corresponding attributes to the picture

The server directly sets the output typeres.header('content-type', 'image/jpg');
For example, the following picture, its address is: http://bing.ioliu.cn/v1?w =500...

Implementation code: https://github.com/xCss/bing/...

Of course, the above is written in Nodejs, and the PHP version you want is also available: 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>

---

Note: The nodejs version is implemented through image processing of Qiniu Cloud Storage, portal: http://developer.qiniu.com/co...

Written a series of answers about front-end adaptive image size. After I finished writing, I realized that I had reviewed the wrong question. . .
The person above is right! ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

What GD library does it have to do with NGINX cropping? Doesn’t it just output different images for different parameters? Is there any technology at all?