javascript - 이러한 그림 효과를 얻는 방법을 알려주세요.

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

위의 이미지 주소를 열고 wid=500&hei=500으로 설정하여 이미지 크기를 변경하는 데 어떤 기술이 사용되나요?

답글 내용:

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

위의 이미지 주소를 열고 wid=500&hei=500으로 설정하여 이미지 크기를 변경하는 데 어떤 기술이 사용되나요?

응답 헤더는 서버에서 생성되므로 페이지 js를 통해 제어되지 않습니다. 백엔드는 URL 매개변수(예: GD 라이브러리)를 기반으로 실시간으로 이미지를 생성합니다.

nginx 이미지 자르기, 이전에 본 적이 있습니다. 여기를 참조하세요

cdn
이전에 Alibaba Cloud를 사용하여 클라우드에서 이미지를 처리한 적이 있습니다. 매개변수를 전달하면 이미지가 서버에 있어야 합니다.

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

PHP에는 이미지 처리 GD가 있습니다. 이를 통해 빈 레이어를 만든 다음 해당 레이어에 이미지를 복사하여 출력할 수 있습니다.

nginx는 이미지를 자르고, 이미지 크기는 구성에서 제공됩니다

PHP를 사용하는 경우 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 버전도 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>

---

참고:

버전은 Qiniu Cloud Storage의 이미지 처리를 통해 구현됩니다. 포털: http://developer.qiniu.com/co...nodejs

프런트 엔드 적응형 이미지 크기에 대한 일련의 답변을 작성했습니다. 글을 다 쓴 후에, 제가 잘못된 질문을 검토했다는 것을 알게 되었습니다. . .

위 사람 말이 맞아요! ⁄(⁄ ⁄•⁄Ω⁄•⁄ ⁄)⁄

NGINX 자르기와 어떤 GD 라이브러리가 관련이 있나요? 매개변수마다 다른 이미지를 출력하는 것 아닌가요? 기술이 전혀 없나요?