PHP神器：輕松獲取網(wǎng)頁HTML元素

文深入探討如何運用PHP高效獲取網(wǎng)頁HTML元素信息。

運用文件讀取函數(shù)，獲取網(wǎng)頁數(shù)據(jù)。

利用PHP腳本的強大功能，網(wǎng)頁數(shù)據(jù)的采集中極為便捷，各類網(wǎng)頁元素亦可轉(zhuǎn)化為字符形式線上展現(xiàn)。

2.使用正則表達式匹配目標元素

面對諸多網(wǎng)頁需求，巧妙運用正則表達式可以精準且迅速搜尋并提取所需的HTML元素。核心技術(shù)在于結(jié)合正則表達式與網(wǎng)頁數(shù)據(jù)，以實現(xiàn)精確篩選及獲取這些元素的目的。

3.使用DOMDocument類解析網(wǎng)頁

借助 DOMDocument 類，PHP 為我們提供了深入分析和處理網(wǎng)頁的途徑。該類功能強大且易用，尤其以其精準讀取 HTML 文檔樹及其靈活操作的表現(xiàn)，在準確獲取所需元素方面具有顯著優(yōu)勢。

4.使用Simple HTML DOM庫

對于正則表達式和DOMDocument類的初學(xué)者而言，可能會遭遇困難。為提升工作效率，可嘗試借助于諸如Simple HTML DOM這類第三方工具。該工具能準確挖掘所需HTML元素，大幅縮減項目開發(fā)時間。

5.使用XPath查詢語言

憑借其卓越性能，XPath在應(yīng)對XML及HTML文檔元素抽取任務(wù)中表現(xiàn)非凡，為我們提供了對HTML元素的精準與靈動操縱。

6.使用cURL庫發(fā)送HTTP請求

借助PHP中cURL庫的功能優(yōu)勢，我們能夠精確滿足各種網(wǎng)絡(luò)頁面內(nèi)容獲取和模擬仿真的需求，從而突出頁面關(guān)鍵信息的精度提取。

7.處理JavaScript生成的內(nèi)容

針對個性化需求，運用JavaScript也可實現(xiàn)網(wǎng)站內(nèi)容的動態(tài)生產(chǎn)。為高效達成此目的，我們能依賴于PHP所提供的兩種無頭瀏覽器工具包——Selenium以及PhantomJS。

8.處理AJAX請求返回的數(shù)據(jù)

為了實現(xiàn)在網(wǎng)頁間的數(shù)據(jù)交互和溝通，尤其是借助AJAX技術(shù)模擬網(wǎng)絡(luò)傳輸和數(shù)據(jù)獲取過程的各項操作，我們會充分利用PHP中獨有的CURL模塊和眾多第三方廠商開發(fā)的高效能庫，它們將會成為你處理海量信息的強大后盾。

9.使用API接口獲取數(shù)據(jù)

若目標網(wǎng)站具備API訪問許可，那么僅需根據(jù)接口文檔所指定的請求參數(shù)，便可自動獲取并拆分JSON或者XML格式的回饋數(shù)據(jù)，進而達到信息交換的目標。

10.注意事項和其他方法

在獲取網(wǎng)頁中的HTML元素時，需要注意以下幾點：

-確保目標網(wǎng)頁存在且可訪問；

-遵守目標網(wǎng)站的使用規(guī)則和法律法規(guī)；

-防止對目標網(wǎng)站造成過大的訪問壓力；

-根據(jù)具體需求選擇合適的方法和工具。

運用此策略，能精準提取所需HTML組件，為構(gòu)建多樣化應(yīng)用及特性提供強大后盾。盼望本文能對您在PHP開發(fā)過程中網(wǎng)頁元素搜尋有所裨益。

種方法：按比例縮小、圖片裁切、預(yù)覽圖片裁切

不管使用哪一個都是建立在圖片已經(jīng)上傳的基礎(chǔ)上；
預(yù)覽裁切上傳，如果預(yù)覽的圖片就是原始大小，可以預(yù)覽裁切以后上傳（這里是個假象，下邊會說明）；

1、上傳以后按比例縮小

由于上傳的圖片寬度、高度比例和前臺限制的不一定是一樣的，這就可能出現(xiàn)前臺div內(nèi)無法鋪滿或者寬度高度有超出的情況，下面是代碼：

縮小方法imageZoom：

//原圖
$filename = "E:\phpweb\public\assets\skin\default\images/about.jpg";
//縮略圖保存的圖片
$savename="E:\phpweb\public\assets\skin\default\images/sabout.jpg";
/*
    *  300是寬度
    *  200  高度
*/
imageZoom($filename,300,200,$savename);

imageZoom方法執(zhí)行縮小

function imageZoom($filename,$width,$height,$savename){
  //獲取原圖信息
  $sourceImageInfo = getimagesize($filename);
  $sourceWidth = $sourceImageInfo[0];
  $sourceHeight = $sourceImageInfo[1];
  $sourceMine = $sourceImageInfo['mime'];
  $sourceRatio = $sourceWidth/$sourceHeight;
  $sourceX = 0;
  $sourceY = 0;
  /*
    *原圖寬度 小于目標圖片（也就是縮小以后的圖） 不做任何操作
  */
  if($sourceWidth<$width&&$sourceHeight<$height){
      return '';
  }
  /*
    $zoom  計算縮小倍數(shù)
    *哪個縮小的少 就用哪個比例
    *選擇縮小少的 在前臺顯示的時候可以填充滿div， 但是會超出，需要用css隱藏
    *選擇縮小多的，可以不超出，需要css設(shè)置 左右  上下居中
  */
  if(($width/$sourceWidth)<($height/$sourceHeight)){
      $zoom=$height/$sourceHeight;    
  }else{
      $zoom=$width/$sourceWidth;
  }
 
  //縮小以后的寬度高度
  $targetWidth =$zoom>=1?$sourceWidth:round($sourceWidth*$zoom);
  $targetHeight =$zoom>=1?$sourceHeight:round($sourceHeight*$zoom);


  $sourceImage = null;
  switch($sourceMine){
    case 'image/gif':
      $sourceImage = imagecreatefromgif($filename);
      break;
    case 'image/jpeg':
      $sourceImage = imagecreatefromjpeg($filename);
      break;
    case 'image/png':
      $sourceImage = imagecreatefrompng($filename);
      break;
    default:
      return '圖片信息發(fā)生錯誤！';
      break;
  }

  $new_thumb = imagecreatetruecolor($sourceWidth, $sourceHeight);
  $targetImage = imagecreatetruecolor($targetWidth,$targetHeight);
  
  imagecopy($new_thumb, $sourceImage, 0, 0, $sourceX, $sourceY, $sourceWidth, $sourceHeight);
  
  imagecopyresampled($targetImage, $new_thumb, 0, 0, 0, 0, $targetWidth, $targetHeight, $sourceWidth, $sourceHeight);
 
  //設(shè)置header  可以直接瀏覽器查看
  //header('Content-Type: image/jpeg');
  //imagejpeg($target_image);  //直接預(yù)覽


  //保存圖片
  if(file_exists($savename)){
      unlink($savename);
  }
  imagejpeg($targetImage,$savename);

  //銷毀
  imagedestroy($new_thumb);
  imagedestroy($sourceImage);
  imagedestroy($targetImage);
  return 'ok';
}

說明：

$sourceX, $sourceY是指截圖的起始位置，距離圖片左上角的距離；
$sourceWidth, $sourceHeight是指沿著X軸，Y軸截取的距離；

imagecopy($new_thumb, $sourceImage, 0, 0, $sourceX, $sourceY, $sourceWidth, $sourceHeight);

2、上傳圖片裁切

上傳圖片寬高比例不是前臺顯示的，通過裁切可以實現(xiàn)前臺div內(nèi)鋪滿

//原圖
$filename = "E:\phpweb\單語html10.21.11\public\assets\skin\default\images/about.jpg";
//裁切以后保存的圖片
$savename="E:\phpweb\單語html10.21.11\public\assets\skin\default\images/sabout.jpg";
//300  寬度  100  高度
imagecut($filename,300,100,$savename);

imagecut方法裁切

function imagecut($filename, $target_width, $target_height,$savename){
  //首先獲取原圖的信息（getimagesize）
  $source_info  = getimagesize($filename);
  $source_width = $source_info[0];
  $source_height = $source_info[1];
  $source_mime  = $source_info['mime'];
 
 //當原圖的寬度 高度 均小于要裁切的寬度高度的時候 不做任何操作 
  if($source_width<$target_width&&$source_height<$target_height){
      return '';
  }
  //原圖寬度 小于目標圖寬度的時候 
  if($source_width<$target_width){
      $target_width=$source_width;
  }
    //原圖高度 小于目標圖高度的時候 
  if($source_height<$target_height){
      $target_height=$source_height;
  }
   //計算原圖 和  目標圖的寬高比例  原圖按照目標比例載入
  $source_ratio = $source_height / $source_width;
  $target_ratio = $target_height / $target_width;

  /*
  source_x  ,source_Y是指到圖片左上角的距離

  */
  if ($source_ratio > $target_ratio){
    // 圖片按照比例 高度超出  需要在Y軸 截取
	//多出的高度 或者寬度  以圖片的中心點為分界線，分在兩邊，
    $scale_width = $source_width;
    $scale_height = $source_width * $target_ratio;

    $source_x = 0;
    $source_y = ($source_height - $scale_height) / 2;


  }elseif ($source_ratio < $target_ratio){
    //圖片按照比例 寬度超出  需要在X軸 截取
    $scale_width = $source_height / $target_ratio;
    $scale_height = $source_height;
    $source_x = ($source_width - $scale_width) / 2;
    $source_y = 0;
  }else{
    //比例一樣  載入原圖
    $scale_width = $source_width;
    $scale_height = $source_height;
    $source_x = 0;
    $source_y = 0;
  }
  switch ($source_mime){
    case 'image/gif':
      $source_image = imagecreatefromgif($filename);
      break;
    case 'image/jpeg':
      $source_image = imagecreatefromjpeg($filename);
      break;
    case 'image/png':
      $source_image = imagecreatefrompng($filename);
      break;
    default:
      return ;
      break;
  }
  $target_image = imagecreatetruecolor($target_width, $target_height);
  $cropped_image = imagecreatetruecolor($scale_width, $scale_height);
  // 在坐標軸 上截取圖片載入
  imagecopy($cropped_image, $source_image, 0, 0, $source_x, $source_y, $scale_width, $scale_height);
  // zoom
  imagecopyresampled($target_image, $cropped_image, 0, 0, 0, 0, $target_width, $target_height, $scale_width, $scale_height);
  //設(shè)置header  可以直接瀏覽器查看
  //header('Content-Type: image/jpeg');
  //imagejpeg($target_image);  //直接預(yù)覽
  //保存圖片
  if(file_exists($savename)){
      unlink($savename);
  }
  imagejpeg($target_image,$savename);

  imagedestroy($source_image);
  imagedestroy($target_image);
  imagedestroy($cropped_image);
}

說明：

上下2個方法通過對比會發(fā)現(xiàn)幾乎都是一樣的，不同點主要在imagecopy()的參數(shù)也就是$sourceX, $sourceY,$sourceWidth, $sourceHeight;
比如圖片寬度1000px，而我們只想要800px的圖片，上邊方法就是以圖片中心點為原點，多出來的分到了2邊，復(fù)制的時候是在100px開始，復(fù)制800px的寬度（$sourceX=100;$sourceWidth=800;），Y軸方向的是同樣的道理；
如果就想以圖片左上角為起點，開始復(fù)制或者理解為裁切也是可以的；

3、預(yù)覽圖片裁切上傳

圖1 jquery圖片預(yù)覽裁切上傳

預(yù)覽使用的是jquery插件做的效果，js不能裁切，只是做了選取框，通過提交給后臺php去裁切，傳遞的參數(shù)就是$sourceX, $sourceY, $sourceWidth, $sourceHeight，還有圖片名稱（包含路徑要不就是后臺自動添加路徑）；
預(yù)覽的圖片很可能不是圖片的原始大小，是經(jīng)過縮小的，比如原始1000px，而我們設(shè)置了div容器寬度為500px；選取框沒有經(jīng)過縮小，那么裁切圖片上邊傳遞的幾個參數(shù)就是不準確的；
如果原圖比我們的容器要小，可以上傳圖片之前預(yù)覽，把這幾個參數(shù)同時傳遞到后臺，上傳完成以后使用上邊的第2種情況裁切；
大的圖片應(yīng)該先上傳使用第2種情況裁切（寬度和高度不能超過我們預(yù)覽圖片的容器），返回裁切以后的圖片到預(yù)覽的窗口；

加載對應(yīng)的js，css

<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script src="js/jquery-migrate-1.2.1.js"></script> 
<script src="js/jquery.imgareaselect.pack.js"></script> 
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />

說明：

使用了imgareaselect插件，實現(xiàn)預(yù)覽裁切的效果，但是該插件在jquery1.9以后會出錯，因為1.9以后取消了判斷瀏覽器的方法，可以使用migrate插件使其繼續(xù)生效，也可以直接使用jquery1.9以前的版本，也就不再需要migrate。

html代碼

<div style="margin: 100px 0 0 100px;float:left;width:500px;height:400px;border:1px solid #DDD;"><img id="photo" src="/news.jpg" style="max-width:100%;max-height:100%;" /></div>

<div style='margin:100px 0  0 80px;float:left;'>
   起點X：<input type='text'  id='x1'   /><br/>
   起點Y：<input type='text'  id='y1' /><br/>
   X長度：<input type='text'  id='xwidth' /><br/>
   Y長度：<input type='text'  id='yheight' /><br/>
   <button class='baocun'>保存</button>
</div>

說明：

x1，y1，xwidth，yheight對應(yīng)了$sourceX, $sourceY, $sourceWidth, $sourceHeight

js代碼

$(document).ready(function() {

	  var  picwidth=$("#photo").width();
		var  picheight=$("#photo").height();
		var  slkwidth=200;//選擇器的寬度
		var  slkheight=150;//選擇器的高度

    //初始值
		var x1=picwidth/2-slkwidth/2;
		var y1=picheight/2-slkheight/2;
		var x2=picwidth/2+slkwidth/2;
		var y2=picheight/2+slkheight/2;

		$("#x1").val(x1);//x軸
		$("#y1").val(y1);//Y軸
		$("#xwidth").val(slkwidth);//x軸長度
		$("#yheight").val(slkheight);//Y軸長度

    $('#photo').imgAreaSelect({
       //aspectRatio: '4:1', //橫豎比例
       handles: true,
			 x1: x1, 
			y1: y1, 
			x2: x2, 
			y2: y2,
      
			minWidth: slkwidth, 
			minHeight: slkheight,
      //最大寬度  高度   maxwidth   maxheight
      fadeSpeed: 200,
			
			onSelectChange: cutinfo //回調(diào)方法
        });

  //保存選擇的信息
  $(".baocun").click(function(){ 
    //需要傳遞的參數(shù)
  	  var logX=$(".xianshk").position().left;//截圖的x坐標 
	  var logY=$(".xianshk").position().top;//截圖的Y坐標 
	  var rqwidth=$(".xianshk").width();//沿X軸截取的長度
	  var rqheight=$(".xianshk").height();//沿Y軸截取的長度
	  var picpath='images/about.jpg';//要裁切的文件(包含路徑)
	  console.log(logY);
      $.ajax({
		  
	       //傳遞數(shù)據(jù)到后臺程序 通過php程序裁切圖片
	  
	  })
  })
  
});
    function cutinfo(img, selection) {

		$("#x1").val(selection.x1);//x軸
		$("#y1").val(selection.y1);//Y軸
		$("#xwidth").val(selection.width);//x軸長度
		$("#yheight").val(selection.height);//Y軸長度
		console.log(selection.x1);
    }

說明：

鼠標移動的時候觸發(fā)cutinfo方法，實時獲取坐標，賦值給對應(yīng)的文本框；
最大寬度和最小寬度設(shè)置一樣，可以固定選擇框的大小；
上邊的初始值就是通過計算，讓選擇框居中；
可能會出現(xiàn)當前默認的就是用戶要裁切的圖，所以要有個默認位置的初始值；

總結(jié)：

1）（imagecreatetruecolor）創(chuàng)建圖像，只需要寬高

$cropped_image = imagecreatetruecolor($scale_width, $scale_height);

2）（imagecopy）復(fù)制圖片到目標圖

imagecopy($cropped_image, $source_image, 0, 0, $source_x, $source_y, $scale_width, $scale_height);

$source_x, $source_y, $scale_width, $scale_height從哪個位置開始復(fù)制，復(fù)制的寬度，高度；

$source_image是調(diào)整比例以后的圖片，如果不需要調(diào)整，那就是我們的原圖；

3）（imagecopyresampled）復(fù)制過來的圖片按比例縮小放到到目標圖

imagecopyresampled($target_image, $cropped_image, 0, 0, 0, 0, $target_width, $target_height, $scale_width, $scale_height);

因為已經(jīng)調(diào)整過比例，直接以左上角為起點就可以，不必更改原點；
如果不經(jīng)過前邊的步驟直接使用imagecopyresampled，生成的縮略圖比例就是錯的，圖片會走形；

如果按照上述步驟不好理解，可以換個角度，就像我們用軟件制圖一樣。

創(chuàng)建寬高的空白圖像；
調(diào)整原圖比例，使其符合要目標圖的比例，多出來的寬度或者高度分到2邊，裁切（復(fù)制）中間部分到目標圖；
調(diào)整新生成的這個圖片，以左上角為起點，進行縮小，使其寬度高度，均達到目標圖的要求；

PHP代碼中生成PDF文件是一項非常耗時的工作，早期的程序員通常是在PHP代碼中利用FPDF生成PDF文件。但在如今，有很多的函數(shù)庫可以使用，借助它們你可以從你提供的HTML文檔生成PDF文件，從而讓工作變得簡單方便起來。

FPDF

FPDF是一個PHP類，它允許用純PHP代碼生成PDF文件，這也就是說我們不用使用PDFlib庫。FPDF中的F就代表著自由：你可以以各種方式使用它，并根據(jù)你的需求調(diào)整它。下面我們來看看FPDF的特征：

自由選擇單元格，頁面格式和邊距；
管理頁眉和頁腳；
自動分頁；
自動換行和文本對齊；
支持圖片（JPEG，PNG，GIF）；
顏色管理；
支持鏈接；

接下來再介紹一下可以直接從HTML生成PDF的函數(shù)庫。

DomPDF

DomPDF是一個從HTML到PDF的轉(zhuǎn)換器，它遵循CSS2.1的HTML布局，還有是用PHP編寫的渲染引擎。DomPDF以樣式為主導(dǎo)：它可以下載和讀取外鏈樣式表，內(nèi)鏈樣式標簽和HTML元素的屬性。它的特點包括：

處理CSS屬性，包括了@import，@media和@page規(guī)則；
支持HTML的可見屬性；
支持外部樣式表，通過本地或http/ftp；
支持復(fù)雜的表結(jié)構(gòu)；
支持圖片（JPEG，BMP，PNG，GIF）；
不依賴于其他PDF庫；

TCPDF

TCPDF是一個用于生成PDF文件的開源PHP類，該項目起源于2002年，現(xiàn)在已經(jīng)有全世界成千上萬的人在使用。它的提點包括：

基本功能不需要外部函數(shù)庫；
支持標準頁面格式，自定義頁面格式；
支持UTF-8編碼和從右向左的語言；
支持各種字體；
支持圖片和圖形的轉(zhuǎn)換；
支持頁面壓縮；
支持頁眉和頁腳管理；

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯

在線咨詢

上一篇：Vue實戰(zhàn)081：多HTML標簽元素如何實現(xiàn)并排顯示詳解
下一篇：html開發(fā)筆記20-合并單元格-列和行

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

PHP神器：輕松獲取網(wǎng)頁HTML元素

您的項目需求