这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下
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实现Cookie的读写、交互操作方法详解
위 내용은 PHP+JavaScript를 사용하여 HTML 페이지를 이미지로 변환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

이 기사는 PHP의 인터페이스를 생성, 구현 및 사용하는 방법을 설명하여 코드 구성 및 유지 관리에 대한 이점에 중점을 둡니다.

이 기사에서는 PHP의 암호 해싱에 대한 Crypt ()와 Password_hash ()의 차이점에 대해 논의하여 최신 웹 애플리케이션에 대한 구현, 보안 및 적합성에 중점을 둡니다.

기사는 입력 유효성 검사, 출력 인코딩 및 OWASP ESAPI 및 HTML 청정기와 같은 도구를 통해 PHP의 크로스 사이트 스크립팅 (XSS) 방지에 대해 논의합니다.

PHP의 자동로드는 필요할 때 클래스 파일을 자동으로로드하여 메모리 사용을 줄이고 코드 구성을 향상시켜 성능을 향상시킵니다. 모범 사례에는 PSR-4 사용 및 효과적으로 코드 구성이 포함됩니다.

PHP 스트림은 일관된 API를 통해 파일, 네트워크 소켓 및 압축 형식과 같은 자원의 처리를 통합하여 복잡성을 추상화하고 코드 유연성 및 효율성을 향상시킵니다.

이 기사에서는 PHP의 파일 업로드 크기 관리, 기본 제한 2MB 및 php.ini 설정을 수정하여이를 늘리는 방법에 중점을 둔 파일 업로드 크기 관리에 대해 설명합니다.

이 기사에서는 PHP 7.1에 도입 된 PHP의 무효 유형에 대해 설명하여 변수 또는 매개 변수가 지정된 유형 또는 널이 될 수 있습니다. 개선 된 가독성, 유형 안전 및 명시 적 의도와 같은 이점을 강조하고 선언하는 방법을 설명합니다.

이 기사에서는 Unset ()와 Unlink () 기능의 차이점에 대해 설명합니다. 프로그래밍의 목적 및 사용 사례에 중점을 둡니다. unset ()는 메모리에서 변수를 제거하고 Unlink ()는 파일 시스템에서 파일을 삭제합니다. 둘 다 Effec에 중요합니다


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

맨티스BT
Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
