使用PHP+JavaScript将HTML页面转换为图片的实例分享


Posted in Javascript onApril 18, 2016

1,准备要素

1)替换字体的js文件

js代码:

function com_stewartspeak_replacement() {
/*
  Dynamic Heading Generator
  By Stewart Rosenberger
  http://www.stewartspeak.com/headings/
 
  This script searches through a web page for specific or general elements
  and replaces them with dynamically generated images, in conjunction with
  a server-side script.
*/

replaceSelector("h1","dynatext/heading.php",true);//前两个参数需要修改
var testURL = "dynatext/loading.gif" ;//修改为对应的图片路径
 
var doNotPrintImages = false;
var printerCSS = "replacement-print.css";
 
var hideFlicker = false;
var hideFlickerCSS = "replacement-screen.css";
var hideFlickerTimeout = 100;//这里可以做相应的修改

/* ---------------------------------------------------------------------------
  For basic usage, you should not need to edit anything below this comment.
  If you need to further customize this script's abilities, make sure
  you're familiar with Javascript. And grab a soda or something.
*/
 
var items;
var imageLoaded = false;
var documentLoaded = false;
 
function replaceSelector(selector,url,wordwrap)
{
  if(typeof items == "undefined")
    items = new Array();
 
  items[items.length] = {selector: selector, url: url, wordwrap: wordwrap};
}
 
if(hideFlicker)
{    
  document.write('<link id="hide-flicker" rel="stylesheet" media="screen" href="' + hideFlickerCSS + '" />');    
  window.flickerCheck = function()
  {
    if(!imageLoaded)
      setStyleSheetState('hide-flicker',false);
  };
  setTimeout('window.flickerCheck();',hideFlickerTimeout)
}
 
if(doNotPrintImages)
  document.write('<link id="print-text" rel="stylesheet" media="print" href="' + printerCSS + '" />');
 
var test = new Image();
test.onload = function() { imageLoaded = true; if(documentLoaded) replacement(); };
test.src = testURL + "?date=" + (new Date()).getTime();
 
addLoadHandler(function(){ documentLoaded = true; if(imageLoaded) replacement(); });
 
 
function documentLoad()
{
  documentLoaded = true;
  if(imageLoaded)
    replacement();
}
 
function replacement()
{
  for(var i=0;i<items.length;i++)
  {
    var elements = getElementsBySelector(items[i].selector);
    if(elements.length > 0) for(var j=0;j<elements.length;j++)
    {
      if(!elements[j])
        continue ;
     
      var text = extractText(elements[j]);
      while(elements[j].hasChildNodes())
        elements[j].removeChild(elements[j].firstChild);
 
      var tokens = items[i].wordwrap ? text.split(' ') : [text] ;
      for(var k=0;k<tokens.length;k++)
      {
        var url = items[i].url + "?text="+escape(tokens[k]+' ')+"&selector="+escape(items[i].selector);
        var image = document.createElement("img");
        image.className = "replacement";
        image.alt = tokens[k] ;
        image.src = url;
        elements[j].appendChild(image);
      }
 
      if(doNotPrintImages)
      {
        var span = document.createElement("span");
        span.style.display = 'none';
        span.className = "print-text";
        span.appendChild(document.createTextNode(text));
        elements[j].appendChild(span);
      }
    }
  }
 
  if(hideFlicker)
    setStyleSheetState('hide-flicker',false);
}
 
function addLoadHandler(handler)
{
  if(window.addEventListener)
  {
    window.addEventListener("load",handler,false);
  }
  else if(window.attachEvent)
  {
    window.attachEvent("onload",handler);
  }
  else if(window.onload)
  {
    var oldHandler = window.onload;
    window.onload = function piggyback()
    {
      oldHandler();
      handler();
    };
  }
  else
  {
    window.onload = handler;
  }
}
 
function setStyleSheetState(id,enabled) 
{
  var sheet = document.getElementById(id);
  if(sheet)
    sheet.disabled = (!enabled);
}
 
function extractText(element)
{
  if(typeof element == "string")
    return element;
  else if(typeof element == "undefined")
    return element;
  else if(element.innerText)
    return element.innerText;
 
  var text = "";
  var kids = element.childNodes;
  for(var i=0;i<kids.length;i++)
  {
    if(kids[i].nodeType == 1)
    text += extractText(kids[i]);
    else if(kids[i].nodeType == 3)
    text += kids[i].nodeValue;
  }
 
  return text;
}
 
/*
  Finds elements on page that match a given CSS selector rule. Some
  complicated rules are not compatible.
  Based on Simon Willison's excellent "getElementsBySelector" function.
  Original code (with comments and description):
    http://simon.incutio.com/archive/2003/03/25/getElementsBySelector
*/
function getElementsBySelector(selector)
{
  var tokens = selector.split(' ');
  var currentContext = new Array(document);
  for(var i=0;i<tokens.length;i++)
  {
    token = tokens[i].replace(/^\s+/,'').replace(/\s+$/,'');
    if(token.indexOf('#') > -1)
    {
      var bits = token.split('#');
      var tagName = bits[0];
      var id = bits[1];
      var element = document.getElementById(id);
      if(tagName && element.nodeName.toLowerCase() != tagName)
        return new Array();
      currentContext = new Array(element);
      continue;
    }
 
    if(token.indexOf('.') > -1)
    {
      var bits = token.split('.');
      var tagName = bits[0];
      var className = bits[1];
      if(!tagName)
        tagName = '*';
 
      var found = new Array;
      var foundCount = 0;
      for(var h=0;h<currentContext.length;h++)
      {
        var elements;
        if(tagName == '*')
          elements = currentContext[h].all ? currentContext[h].all : currentContext[h].getElementsByTagName('*');
        else
          elements = currentContext[h].getElementsByTagName(tagName);
 
        for(var j=0;j<elements.length;j++)
          found[foundCount++] = elements[j];
      }
 
      currentContext = new Array;
      var currentContextIndex = 0;
      for(var k=0;k<found.length;k++)
      {
        if(found[k].className && found[k].className.match(new RegExp('\\b'+className+'\\b')))
          currentContext[currentContextIndex++] = found[k];
      }
 
      continue;
    }
 
    if(token.match(/^(\w*)\[(\w+)([=~\|\^\$\*]?)=?"?([^\]"]*)"?\]$/))
    {
      var tagName = RegExp.$1;
      var attrName = RegExp.$2;
      var attrOperator = RegExp.$3;
      var attrValue = RegExp.$4;
      if(!tagName)
        tagName = '*';
 
      var found = new Array;
      var foundCount = 0;
      for(var h=0;h<currentContext.length;h++)
      {
        var elements;
        if(tagName == '*')
          elements = currentContext[h].all ? currentContext[h].all : currentContext[h].getElementsByTagName('*');
        else
          elements = currentContext[h].getElementsByTagName(tagName);
 
        for(var j=0;j<elements.length;j++)
          found[foundCount++] = elements[j];
      }
 
      currentContext = new Array;
      var currentContextIndex = 0;
      var checkFunction;
      switch(attrOperator)
      {
        case '=':
          checkFunction = function(e) { return (e.getAttribute(attrName) == attrValue); };
          break;
        case '~':
          checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('\\b'+attrValue+'\\b'))); };
          break;
        case '|':
          checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('^'+attrValue+'-?'))); };
          break;
        case '^':
          checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) == 0); };
          break;
        case '$':
          checkFunction = function(e) { return (e.getAttribute(attrName).lastIndexOf(attrValue) == e.getAttribute(attrName).length - attrValue.length); };
          break;
        case '*':
          checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) > -1); };
          break;
        default :
          checkFunction = function(e) { return e.getAttribute(attrName); };
      }
 
      currentContext = new Array;
      var currentContextIndex = 0;
      for(var k=0;k<found.length;k++)
      {
        if(checkFunction(found[k]))
          currentContext[currentContextIndex++] = found[k];
      }
 
      continue;
    }
 
    tagName = token;
    var found = new Array;
    var foundCount = 0;
    for(var h=0;h<currentContext.length;h++)
    {
      var elements = currentContext[h].getElementsByTagName(tagName);
      for(var j=0;j<elements.length; j++)
        found[foundCount++] = elements[j];
    }
 
    currentContext = found;
  }
 
  return currentContext;
}
 
 
}// end of scope, execute code
if(document.createElement && document.getElementsByTagName && !navigator.userAgent.match(/opera\/?6/i))
  com_stewartspeak_replacement();

2)生成图片的php文件

<?php
/*
  Dynamic Heading Generator
  By Stewart Rosenberger
  http://www.stewartspeak.com/headings/  
 
  This script generates PNG images of text, written in
  the font/size that you specify. These PNG images are passed
  back to the browser. Optionally, they can be cached for later use. 
  If a cached image is found, a new image will not be generated,
  and the existing copy will be sent to the browser.
 
  Additional documentation on PHP's image handling capabilities can
  be found at http://www.php.net/image/  
*/

$font_file = 'trebuc.ttf' ;//可以做相应的xiuga
$font_size = 23 ;//可以做相应的修改
$font_color = '#000000' ;
$background_color = '#ffffff' ;
$transparent_background = true ;
$cache_images = true ;
$cache_folder = 'cache' ;

/*
 ---------------------------------------------------------------------------
  For basic usage, you should not need to edit anything below this comment.
  If you need to further customize this script's abilities, make sure you
  are familiar with PHP and its image handling capabilities.
 ---------------------------------------------------------------------------
*/
 
$mime_type = 'image/png' ;
$extension = '.png' ;
$send_buffer_size = 4096 ;
 
// check for GD support
if(!function_exists('ImageCreate'))
  fatal_error('Error: Server does not support PHP image generation') ;
 
// clean up text
if(empty($_GET['text']))
  fatal_error('Error: No text specified.') ;
   
$text = $_GET['text'] ;
if(get_magic_quotes_gpc())
  $text = stripslashes($text) ;
$text = javascript_to_html($text) ;
 
// look for cached copy, send if it exists
$hash = md5(basename($font_file) . $font_size . $font_color .
      $background_color . $transparent_background . $text) ;
$cache_filename = $cache_folder . '/' . $hash . $extension ;
if($cache_images && ($file = @fopen($cache_filename,'rb')))
{
  header('Content-type: ' . $mime_type) ;
  while(!feof($file))
    print(($buffer = fread($file,$send_buffer_size))) ;
  fclose($file) ;
  exit ;
}
 
// check font availability
$font_found = is_readable($font_file) ;
if(!$font_found)
{
  fatal_error('Error: The server is missing the specified font.') ;
}
 
// create image
$background_rgb = hex_to_rgb($background_color) ;
$font_rgb = hex_to_rgb($font_color) ;
$dip = get_dip($font_file,$font_size) ;
$box = @ImageTTFBBox($font_size,0,$font_file,$text) ;
$image = @ImageCreate(abs($box[2]-$box[0]),abs($box[5]-$dip)) ;
if(!$image || !$box)
{
  fatal_error('Error: The server could not create this heading image.') ;
}
 
// allocate colors and draw text
$background_color = @ImageColorAllocate($image,$background_rgb['red'],
  $background_rgb['green'],$background_rgb['blue']) ;
$font_color = ImageColorAllocate($image,$font_rgb['red'],
  $font_rgb['green'],$font_rgb['blue']) ;  
ImageTTFText($image,$font_size,0,-$box[0],abs($box[5]-$box[3])-$box[1],
  $font_color,$font_file,$text) ;
 
// set transparency
if($transparent_background)
  ImageColorTransparent($image,$background_color) ;
 
header('Content-type: ' . $mime_type) ;
ImagePNG($image) ;
 
// save copy of image for cache
if($cache_images)
{
  @ImagePNG($image,$cache_filename) ;
}
 
ImageDestroy($image) ;
exit ;
 
 
/*
  try to determine the "dip" (pixels dropped below baseline) of this
  font for this size.
*/
function get_dip($font,$size)
{
  $test_chars = 'abcdefghijklmnopqrstuvwxyz' .
         'ABCDEFGHIJKLMNOPQRSTUVWXYZ' .
         '1234567890' .
         '!@#$%^&*()\'"\\/;.,`~<>[]{}-+_-=' ;
  $box = @ImageTTFBBox($size,0,$font,$test_chars) ;
  return $box[3] ;
}
 
 
/*
  attempt to create an image containing the error message given. 
  if this works, the image is sent to the browser. if not, an error
  is logged, and passed back to the browser as a 500 code instead.
*/
function fatal_error($message)
{
  // send an image
  if(function_exists('ImageCreate'))
  {
    $width = ImageFontWidth(5) * strlen($message) + 10 ;
    $height = ImageFontHeight(5) + 10 ;
    if($image = ImageCreate($width,$height))
    {
      $background = ImageColorAllocate($image,255,255,255) ;
      $text_color = ImageColorAllocate($image,0,0,0) ;
      ImageString($image,5,5,5,$message,$text_color) ;  
      header('Content-type: image/png') ;
      ImagePNG($image) ;
      ImageDestroy($image) ;
      exit ;
    }
  }
 
  // send 500 code
  header("HTTP/1.0 500 Internal Server Error") ;
  print($message) ;
  exit ;
}
 
 
/* 
  decode an HTML hex-code into an array of R,G, and B values.
  accepts these formats: (case insensitive) #ffffff, ffffff, #fff, fff 
*/  
function hex_to_rgb($hex)
{
  // remove '#'
  if(substr($hex,0,1) == '#')
    $hex = substr($hex,1) ;
 
  // expand short form ('fff') color
  if(strlen($hex) == 3)
  {
    $hex = substr($hex,0,1) . substr($hex,0,1) .
        substr($hex,1,1) . substr($hex,1,1) .
        substr($hex,2,1) . substr($hex,2,1) ;
  }
 
  if(strlen($hex) != 6)
    fatal_error('Error: Invalid color "'.$hex.'"') ;
 
  // convert
  $rgb['red'] = hexdec(substr($hex,0,2)) ;
  $rgb['green'] = hexdec(substr($hex,2,2)) ;
  $rgb['blue'] = hexdec(substr($hex,4,2)) ;
 
  return $rgb ;
}
 
 
/*
  convert embedded, javascript unicode characters into embedded HTML
  entities. (e.g. '%u2018' => '‘'). returns the converted string.
*/
function javascript_to_html($text)
{
  $matches = null ;
  preg_match_all('/%u([0-9A-F]{4})/i',$text,$matches) ;
  if(!empty($matches)) for($i=0;$i<sizeof($matches[0]);$i++)
    $text = str_replace($matches[0][$i],
              '&#'.hexdec($matches[1][$i]).';',$text) ;
 
  return $text ;
}
 
?>

3)需要的字体

这里将需要的自己放在与js和php文件同在的一个目录下(也可以修改,但是对应文件也要修改)

4)PHP的GD2库

2,实现的html代码

<?php
//load the popup utils library
//require_once 'include/popup_utils.inc.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <title>
      Professional Search Engine Optimization with PHP: Table of Contents
    </title>
    <script type="text/javascript" language="javascript" src="dynatext/replacement.js"></script>
  </head>
  <body onload="window.resizeTo(800,600);" onresize='setTimeout("window.resizeTo(800,600);", 100)'>
    <h1>
      Professional Search Engine Optimization with PHP: Table of Contents
    </h1>
    <?php
      //display popup navigation only when visitor comes from a SERP
      // display_navigation();
      //display_popup_navigation();
    ?>
    <ol>
      <li>You: Programmer and Search Engine Marketer</li>
      <li>A Primer in Basic SEO</li>
      <li>Provocative SE-Friendly URLs</li>
      <li>Content Relocation and HTTP Status Codes</li>
      <li>Duplicate Content</li>
      <li>SE-Friendly HTML and JavaScript</li>
      <li>Web Syndication and Social Bookmarking</li>
      <li>Black Hat SEO</li>
      <li>Sitemaps</li>
      <li>Link Bait</li>
      <li>IP Cloaking, Geo-Targeting, and IP Delivery</li>
      <li>Foreign Language SEO</li>
      <li>Coping with Technical Issues</li>
      <li>Site Clinic: So You Have a Web Site?</li>
      <li>WordPress: Creating a SE-Friendly Weblog?</li>
      <li>Introduction to Regular Expression</li>
    </ol>
  </body>
</html>

3,使用效果前后对比
使用前

使用PHP+JavaScript将HTML页面转换为图片的实例分享

使用后

使用PHP+JavaScript将HTML页面转换为图片的实例分享

Javascript 相关文章推荐
js静态作用域的功能。
Dec 25 Javascript
建议大家看下JavaScript重要知识更新
Jul 08 Javascript
使用Firebug对js进行断点调试的图文方法
Apr 02 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
Html5的placeholder属性(IE兼容)实现代码
Aug 30 Javascript
jQuery聚合函数实例
May 21 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
详解Vue单元测试case写法
May 24 Javascript
关于JavaScript中异步/等待的用法与理解
Nov 18 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 #Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 #Javascript
html5+javascript实现简单上传的注意细节
Apr 18 #Javascript
jQuery的内容过滤选择器学习教程
Apr 18 #Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 #Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 #Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 #Javascript
You might like
第九节 绑定 [9]
2006/10/09 PHP
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
PHP读取Excel类文件
2017/05/15 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
Python线程的两种编程方式
2015/04/14 Python
详解Python中heapq模块的用法
2016/06/28 Python
使用requests库制作Python爬虫
2018/03/25 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
Python中最大递归深度值的探讨
2019/03/05 Python
python中正则表达式与模式匹配
2019/05/07 Python
python 遍历pd.Series的index和value
2019/11/26 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
外国语学院毕业生自荐信
2013/10/28 职场文书
小学体育教学反思
2014/01/31 职场文书
交通工程专业推荐信
2014/09/06 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android