php 關於圖片獲取寬高的優化

需求

1. 應前端需求,在進入文章詳情時須要將全部圖片進行佔位替換,且佔位符須要對應圖片信息(主要須要知道寬高)
2. 目的:作點擊圖片浮窗效果

實現方案

1. 優化前
    1.1 正則匹配圖片,而後循環獲取每張圖片的寬高
    1.2 問題:若是文章圖片較少,以上操做問題不大。但圖片一旦過慢,這個效率將會很是低下
    1.3 代碼以下:
preg_match_all('/<img.*? src="(.*?)".*?>/is', $str, $matchs);
       
        if(!empty($matchs[0])){
            $pics = [];
            $i = 0;
            foreach ($matchs[0] as $key => $m) {
                $fileInfo = file_get_contents($matchs[1][$key] . '?x-oss-process=image/info');
                $fileInfo = json_decode($fileInfo, true);
                $data['Width'] = $fileInfo['ImageWidth']['value'];
                $data['Height'] = $fileInfo['ImageHeight']['value'];
                    
                $imgs[$i]['ref'] = '<!--IMG#' . $key . '-->';
                $imgs[$i]['pixel'] = $data['Width'] . '*' . $data['Height'];
                preg_match('/alt="(.*?)"/i', $matchs[0][$key], $mt);
                $imgs[$i]['alt'] = isset($mt[1]) ? $mt[1] : '';   //圖片alt
                $imgs[$i]['src'] = $matchs[1][$key];                //圖片地址
                $str = str_replace($m, '<!--IMG#' . $key . '-->', $str);
                $i++;

            }
        }
2. 優化思路
    2.1 想着是否會有極速獲取圖片法子?在網上找了一些資料,基本上都是經過讀取圖片部分文件信息,不須要下載/讀取整個圖片。找了一個類庫:[https://github.com/tommoor/fastimage](https://github.com/tommoor/fastimage),試了一下。 相比之前的思路(完整的下載圖片) 確實有性能上的提高。有興趣的朋友能夠試試,若是針對單張圖片的信息獲取,這個仍是很推薦的。但批量的實現彷佛還達不到目的
    2.2 分析以上操做,其實慢的過程應該仍是停留在循環獲取圖片資源上。那麼換個思路,我批量獲取圖片是否就ok了?上代碼
preg_match_all('/<img.*? src="(.*?)".*?>/is', $str, $matchs);

if(!empty($matchs[0])){
    //$time = microtime(true);
    //echo  '  ---- start ' . PHP_EOL;

    foreach ($matchs[0] as $key => $m) {
        $urls[] = $matchs[1][$key] . '?x-oss-process=image/info';
    }
    $imageInfos = batchCurl($urls);

    $i = 0;
    foreach ($matchs[0] as $key => $m) {
        $image = json_decode($imageInfos[$key], true);
        $_img['Width'] = $width= $image['ImageWidth']['value'];
        $_img['Height'] = $height = $image['ImageHeight']['value'];

        $imgs[$i]['ref'] = '<!--IMG#' . $key . '-->';
        $imgs[$i]['pixel'] = $_img['Width'] . '*' . $_img['Height'];
        preg_match('/alt="(.*?)"/i', $matchs[0][$key], $mt);
        $imgs[$i]['alt'] = isset($mt[1]) ? $mt[1] : '';   //圖片alt
        $imgs[$i]['src'] = $matchs[1][$key];                //圖片地址
        $str = str_replace($m, '<!--IMG#' . $key . '-->', $str);

        $i++;
    }
    //echo  " ---- end  px in " . (microtime(true)-$time) . " seconds \n";
    //exit;
}
        
function batchCurl($urls)
{
    $res = $conn = [];

    // 建立批處理cURL句柄
    $mh = curl_multi_init();

    foreach ($urls as $i => $url) {
        // 建立一對cURL資源
        $conn[$i] = curl_init();
        // 設置URL和相應的選項
        curl_setopt($conn[$i], CURLOPT_URL, $url);
        curl_setopt($conn[$i], CURLOPT_HEADER, 0);
        curl_setopt($conn[$i], CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($conn[$i], CURLOPT_TIMEOUT, 10);
        // 302跳轉
        curl_setopt($conn[$i], CURLOPT_FOLLOWLOCATION, 1);
        // 增長句柄
        curl_multi_add_handle($mh, $conn[$i]);
    }
    $active = null;
    //防卡死寫法:執行批處理句柄
    do {
        $mrc = curl_multi_exec($mh, $active);
    } while ($mrc == CURLM_CALL_MULTI_PERFORM);

    while ($active && $mrc == CURLM_OK) {
        if (curl_multi_select($mh) != -1) {
            do {
                $mrc = curl_multi_exec($mh, $active);
            } while ($mrc == CURLM_CALL_MULTI_PERFORM);
        }
    }
    foreach ($urls as $i => $url) {
        //獲取當前解析的cURL的相關傳輸信息
        $info = curl_multi_info_read($mh);
        //獲取請求頭信息
        $heards = curl_getinfo($conn[$i]);
        //獲取輸出的文本流
        $res[$i] = curl_multi_getcontent($conn[$i]);
        // 移除curl批處理句柄資源中的某個句柄資源
        curl_multi_remove_handle($mh, $conn[$i]);
        //關閉cURL會話
        curl_close($conn[$i]);
    }
    //關閉所有句柄
    curl_multi_close($mh);

    return $res;
}
3. 測試性能,20張圖片的效率幾乎能達到秒級
![image](/img/bVcKCF2)

總結

1. 優化的思路很重要,重點在於分析所提所在,對症下藥。在此記個筆記
相關文章
相關標籤/搜索