整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

PHP神器：轻松获取网页HTML元素

文深入探讨如何运用PHP高效获取网页HTML元素信息。

运用文件读取函数，获取网页数据。

利用PHP脚本的强大功能，网页数据的采集中极为便捷，各类网页元素亦可转化为字符形式线上展现。

2.使用正则表达式匹配目标元素

面对诸多网页需求，巧妙运用正则表达式可以精准且迅速搜寻并提取所需的HTML元素。核心技术在于结合正则表达式与网页数据，以实现精确筛选及获取这些元素的目的。

3.使用DOMDocument类解析网页

借助 DOMDocument 类，PHP 为我们提供了深入分析和处理网页的途径。该类功能强大且易用，尤其以其精准读取 HTML 文档树及其灵活操作的表现，在准确获取所需元素方面具有显著优势。

4.使用Simple HTML DOM库

对于正则表达式和DOMDocument类的初学者而言，可能会遭遇困难。为提升工作效率，可尝试借助于诸如Simple HTML DOM这类第三方工具。该工具能准确挖掘所需HTML元素，大幅缩减项目开发时间。

5.使用XPath查询语言

凭借其卓越性能，XPath在应对XML及HTML文档元素抽取任务中表现非凡，为我们提供了对HTML元素的精准与灵动操纵。

6.使用cURL库发送HTTP请求

借助PHP中cURL库的功能优势，我们能够精确满足各种网络页面内容获取和模拟仿真的需求，从而突出页面关键信息的精度提取。

7.处理JavaScript生成的内容

针对个性化需求，运用JavaScript也可实现网站内容的动态生产。为高效达成此目的，我们能依赖于PHP所提供的两种无头浏览器工具包——Selenium以及PhantomJS。

8.处理AJAX请求返回的数据

为了实现在网页间的数据交互和沟通，尤其是借助AJAX技术模拟网络传输和数据获取过程的各项操作，我们会充分利用PHP中独有的CURL模块和众多第三方厂商开发的高效能库，它们将会成为你处理海量信息的强大后盾。

9.使用API接口获取数据

若目标网站具备API访问许可，那么仅需根据接口文档所指定的请求参数，便可自动获取并拆分JSON或者XML格式的回馈数据，进而达到信息交换的目标。

10.注意事项和其他方法

在获取网页中的HTML元素时，需要注意以下几点：

-确保目标网页存在且可访问；

-遵守目标网站的使用规则和法律法规；

-防止对目标网站造成过大的访问压力；

-根据具体需求选择合适的方法和工具。

运用此策略，能精准提取所需HTML组件，为构建多样化应用及特性提供强大后盾。盼望本文能对您在PHP开发过程中网页元素搜寻有所裨益。

种方法：按比例缩小、图片裁切、预览图片裁切

  1. 不管使用哪一个都是建立在图片已经上传的基础上；
  2. 预览裁切上传，如果预览的图片就是原始大小，可以预览裁切以后上传（这里是个假象，下边会说明）；

1、上传以后按比例缩小

由于上传的图片宽度、高度比例和前台限制的不一定是一样的，这就可能出现前台div内无法铺满或者宽度高度有超出的情况，下面是代码：

缩小方法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方法执行缩小

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  计算缩小倍数
    *哪个缩小的少 就用哪个比例
    *选择缩小少的 在前台显示的时候可以填充满div， 但是会超出，需要用css隐藏
    *选择缩小多的，可以不超出，需要css设置 左右  上下居中
  */
  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 '图片信息发生错误！';
      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);
 
  //设置header  可以直接浏览器查看
  //header('Content-Type: image/jpeg');
  //imagejpeg($target_image);  //直接预览


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

  //销毁
  imagedestroy($new_thumb);
  imagedestroy($sourceImage);
  imagedestroy($targetImage);
  return 'ok';
}

说明：

  1. $sourceX, $sourceY是指截图的起始位置，距离图片左上角的距离；
  2. $sourceWidth, $sourceHeight是指沿着X轴，Y轴截取的距离；
imagecopy($new_thumb, $sourceImage, 0, 0, $sourceX, $sourceY, $sourceWidth, $sourceHeight);

2、上传图片裁切

上传图片宽高比例不是前台显示的，通过裁切可以实现前台div内铺满

//原图
$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);
  //设置header  可以直接浏览器查看
  //header('Content-Type: image/jpeg');
  //imagejpeg($target_image);  //直接预览
  //保存图片
  if(file_exists($savename)){
      unlink($savename);
  }
  imagejpeg($target_image,$savename);

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

说明：

  1. 上下2个方法通过对比会发现几乎都是一样的，不同点主要在imagecopy()的参数也就是$sourceX, $sourceY,$sourceWidth, $sourceHeight;
  2. 比如图片宽度1000px，而我们只想要800px的图片，上边方法就是以图片中心点为原点，多出来的分到了2边，复制的时候是在100px开始， 复制800px的宽度（$sourceX=100;$sourceWidth=800;），Y轴方向的是同样的道理；
  3. 如果就想以图片左上角为起点，开始复制或者理解为裁切也是可以的；

3、预览图片裁切上传

图1 jquery图片预览裁切上传

  1. 预览使用的是jquery插件做的效果，js不能裁切，只是做了选取框，通过提交给后台php去裁切，传递的参数就是$sourceX, $sourceY, $sourceWidth, $sourceHeight，还有图片名称（包含路径要不就是后台自动添加路径）；
  2. 预览的图片很可能不是图片的原始大小，是经过缩小的，比如原始1000px，而我们设置了div容器宽度为500px；选取框没有经过缩小，那么裁切图片上边传递的几个参数就是不准确的；
  3. 如果原图比我们的容器要小，可以上传图片之前预览，把这几个参数同时传递到后台，上传完成以后使用上边的第2种情况裁切；
  4. 大的图片应该先上传使用第2种情况裁切（宽度和高度不能超过我们预览图片的容器），返回裁切以后的图片到预览的窗口；

加载对应的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插件，实现预览裁切的效果，但是该插件在jquery1.9以后会出错，因为1.9以后取消了判断浏览器的方法，可以使用migrate插件使其继续生效，也可以直接使用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对应了$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 //回调方法
        });

  //保存选择的信息
  $(".baocun").click(function(){ 
    //需要传递的参数
  	  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({
		  
	       //传递数据到后台程序 通过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);
    }

说明：

  1. 鼠标移动的时候触发cutinfo方法，实时获取坐标，赋值给对应的文本框；
  2. 最大宽度 和最小宽度设置一样，可以固定选择框的大小；
  3. 上边的初始值就是通过计算，让选择框居中；
  4. 可能会出现当前默认的就是用户要裁切的图，所以要有个默认位置的初始值；

总结：

1）（imagecreatetruecolor）创建图像，只需要宽高

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

2）（imagecopy）复制图片到目标图

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

$source_x, $source_y, $scale_width, $scale_height从哪个位置开始复制，复制的宽度，高度；

$source_image是调整比例以后的图片，如果不需要调整，那就是我们的原图；

3）（imagecopyresampled）复制过来的图片按比例缩小放到到目标图

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

  1. 因为已经调整过比例，直接以左上角为起点就可以，不必更改原点；
  2. 如果不经过前边的步骤直接使用imagecopyresampled，生成的缩略图比例就是错的，图片会走形；

如果按照上述步骤不好理解，可以换个角度，就像我们用软件制图一样。

  1. 创建宽高的空白图像；
  2. 调整原图比例，使其符合要目标图的比例，多出来的宽度或者高度分到2边，裁切（复制）中间部分到目标图；
  3. 调整新生成的这个图片，以左上角为起点，进行缩小，使其宽度高度，均达到目标图的要求；

PHP代码中生成PDF文件是一项非常耗时的工作，早期的程序员通常是在PHP代码中利用FPDF生成PDF文件。但在如今，有很多的函数库可以使用，借助它们你可以从你提供的HTML文档生成PDF文件，从而让工作变得简单方便起来。

FPDF

FPDF是一个PHP类，它允许用纯PHP代码生成PDF文件，这也就是说我们不用使用PDFlib库。FPDF中的F就代表着自由：你可以以各种方式使用它，并根据你的需求调整它。下面我们来看看FPDF的特征：

  • 自由选择单元格，页面格式和边距；
  • 管理页眉和页脚；
  • 自动分页；
  • 自动换行和文本对齐；
  • 支持图片（JPEG，PNG，GIF）；
  • 颜色管理；
  • 支持链接；

接下来再介绍一下可以直接从HTML生成PDF的函数库。

DomPDF

DomPDF是一个从HTML到PDF的转换器，它遵循CSS2.1的HTML布局，还有是用PHP编写的渲染引擎。DomPDF以样式为主导：它可以下载和读取外链样式表，内链样式标签和HTML元素的属性。它的特点包括：

  • 处理CSS属性，包括了@import，@media和@page规则；
  • 支持HTML的可见属性；
  • 支持外部样式表，通过本地或http/ftp；
  • 支持复杂的表结构；
  • 支持图片（JPEG，BMP，PNG，GIF）；
  • 不依赖于其他PDF库；

TCPDF

TCPDF是一个用于生成PDF文件的开源PHP类，该项目起源于2002年，现在已经有全世界成千上万的人在使用。它的提点包括：

  • 基本功能不需要外部函数库；
  • 支持标准页面格式，自定义页面格式；
  • 支持UTF-8编码和从右向左的语言；
  • 支持各种字体；
  • 支持图片和图形的转换；
  • 支持页面压缩；
  • 支持页眉和页脚管理；

本站文章除注明转载外，均为本站原创或翻译


在线咨询
上一篇：Vue实战081：多HTML标签元素如何实现并排显示详解
下一篇：html开发笔记20-合并单元格-列和行

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 鹤山市 井冈山市 揭西县 山亭区 钟楼区 永城市 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服