javascript - Bitte sagen Sie mir, wie ich diese Bildeffekte erzielen kann

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

Öffnen Sie die Bildadresse oben und stellen Sie wid=500&hei=500 ein, um die Größe des Bildes zu ändern. Vielen Dank.

Antwortinhalt:

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

Öffnen Sie die Bildadresse oben und stellen Sie wid=500&hei=500 ein, um die Größe des Bildes zu ändern. Vielen Dank.

Aus dem Antwortheader wird er vom Server generiert, sodass er nicht über die Seiten-JS gesteuert wird; das Backend generiert Bilder in Echtzeit basierend auf den URL-Parametern (z. B. GD-Bibliothek)

Nginx-Bildzuschnitt, ich bin schon einmal darauf gestoßen, siehe hier

cdn
Ich habe Alibaba Cloud bereits verwendet, um Bilder in der Cloud zu verarbeiten. Nach der Eingabe der Parameter werden die Bilder jedoch entsprechend den Parametern verarbeitet

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

Es gibt eine Bildverarbeitungs-GD unter PHP. Diese kann das Problem der Bildgröße lösen und dann das Bild hineinkopieren, um eine Ausgabe zu generieren

nginx schneidet das Bild zu und die Bildgröße wird in der Konfiguration angegeben

Wenn Sie PHP verwenden, finden Sie hier ein Projekt zu diesem Aspekt, das Sie direkt verwenden können, um eine schlanke Bildverarbeitungsbibliothek basierend auf URL zu verwenden

Die auf der Serverseite erhaltenen übergebenen Parameter generieren ein -Tag basierend auf den entsprechenden Attributen und geben es an die Rezeption zurück

Zum Beispiel

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

Fügen Sie dem Bild entsprechende Attribute hinzu

Der Server legt den Ausgabetyp direkt fest

res.header('content-type', 'image/jpg');Beispielsweise im folgenden Bild lautet die Adresse: http://bing.ioliu.cn/v1?w=500...

Implementierungscode: https://github.com/xCss/bing/...

Natürlich ist das Obige in

geschrieben, und die gewünschte Nodejs-Version ist auch verfügbar: https://github.com/xCss/bing/...PHP

<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>

---

Hinweis: Die

-Version wird durch Bildverarbeitung von Qiniu Cloud Storage implementiert, Portal: http://developer.qiniu.com/co...nodejs

Ich habe eine Reihe von Antworten zur adaptiven Front-End-Bildgröße geschrieben. Nachdem ich mit dem Schreiben fertig war, wurde mir klar, dass ich die falsche Frage beantwortet hatte. . .

Die Person oben hat recht! ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

Was hat die GD-Bibliothek mit dem NGINX-Zuschneiden zu tun? Gibt sie nicht einfach unterschiedliche Bilder für unterschiedliche Parameter aus? Gibt es überhaupt Technologie?