网页转图片,html生成图片,网页生成图片(基于linnux+phantomjs)和wkhtmltoimage
安装扩展:
(1)下面是我在linux上的安装过程，如果没有安装git请先yum install git
安装casperjs
cd /
git clone git://github.com/n1k0/casperjs.git
cd casperjs
ln -sf /casperjs/bin/casperjs /usr/local/bin/casperjs //可以忽略 实际执行中php是执行 /casperjs/bin/casperjs
(2)安装phantomjs，下载地址：http://phantomjs.org/download.html
下载后操作很简单，直接把解压好的\bin\phantomjs移动到\usr\local\bin\phantomjs就可以了。\
测试phantomjs --version 有结果不报错，说明安装OK
(3)安装字体
1. 首先获得一套“微软雅黑”字体库（Google一下一大把），包含两个文件msyh.ttf（普通）、msyhbd.ttf（加粗）；
2. 在/usr/share/fonts目录下建立一个子目录，例如win，命令如下：
# mkdir /usr/share/fonts/win
3. 将msyh.ttf和msyhbd.ttf复制到该目录下，例如这两个文件放在/root/Desktop下，使用命令：
# cd /root/Desktop
# cp msyh.ttf msyhbd.ttf /usr/share/fonts/win/
4. 建立字体索引信息，更新字体缓存：
# cd /usr/share/fonts/win
# mkfontscale （如果提示 mkfontscale: command not found，需自行安装 # yum install mkfontscale ）
# mkfontdir
# fc-cache （如果提示 fc-cache: command not found，则需要安装# yum install fontconfig ）
至此，字体已经安装完毕！
PHP代码
<?php
if (isset($_GET['url']))
{
set_time_limit(0);
$url = trim($_GET['url']);
$filePath = md5($url).'.png';
if (is_file($filePath))
{
exit($filePath);
}
//如果不加这句就会报错“Fatal: [Errno 2] No such file or directory; did you install phantomjs?”,详情参考http://mengkang.net/87.html
putenv("PHANTOMJS_EXECUTABLE=/usr/local/bin/phantomjs");
$command = "phantomjs phantomjs.js {$url} {$filePath}";
@exec($command);
exit($filePath);
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>快照生成-www.oicqzone.com</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
* {margin: 0; padding: 0; } form {padding: 20px; } div {margin: 20px 0 0; } input {width: 200px; padding: 4px 2px; } #placeholder {display: none; }
</style>
</head>
<body>
<form action="" id="form">
<input type="text" id="url" />
<button type="submit">生成快照</button>
<div>
<img src="" alt="" id="placeholder" />
</div>
</form>
<script>
$(function(){
$('#form').submit(function(){
if (typeof($(this).data('generate')) !== 'undefined' && $(this).data('generate') === true)
{
alert('正在生成网站快照，请耐心等待...');
return false;
}
$(this).data('generate', true);
$('button').text('正在生成快照...').attr('disabled', true);
$.ajax({
type: 'GET',
url: '?',
data: 'url=' + $('#url').val(),
success: function(data){
$('#placeholder').attr('src', data).show();
$('#form').data('generate', false);
$('button').text('生成快照').attr('disabled', false);
}
});
return false;
});
});
</script>
</body>
</html>
JS代码
"use strict";
var RenderUrlsToFile, arrayOfUrls, system; system = require("system");
var args = require('system').args;
var url = args[1];
//var output = args[2];
var page = require('webpage').create();
phantom.outputEncoding = "gbk"; //解决中文乱码
var address = url;//填写需要打印的文件位置
var output = './img/'+'xigua'+'.png';//存储文件路径和名称
page.viewportSize = { width: 720, height: 1200};//设置长宽
//page.clipRect = { top: 0, left: 0, width: 380, height: 560 };
page.open(address, function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
phantom.exit();
} else {
window.setTimeout(function () {
page.render(output);
phantom.exit();
}, 800);
}
}); 方法二：
$file_name = rand(100000,999999).".jpg";
$path = '/nas/wxdoctor/tempimg/'.$file_name;
$cmd ="wkhtmltoimage --width 750 --height 1206 --quality 94 $url ".$path;
网页转图片,html生成图片,网页生成图片(基于linnux+phantomjs)和wkhtmltoimage的更多相关文章
- HTML静态网页（图片热点、网页划区、拼接及表单的使用）
图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 示例: 网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容. 示例: 网页的拼接: 在一个 ...
- php获取网页中图片并保存到本地的代码
php获取网页中图片并保存到本地的代码,将网页中图片保存本地文件夹: <?php /** * 获取网页中图片,并保存至本地 * by www.jbxue.com */ header(" ...
- delphi WebBrowser控件上网页验证码图片识别教程(一)
步骤一:获取网页中验证码图片的url地址 在delphi中加入一个BitBtn和一个memo以及WebBrowser控件实现网页中验证码图片的url地址的获取 程序如下:procedure TForm ...
- 【HTML5+MVC4】xhEditor网页编辑器图片上传
准备工作: 创建一个MVC项目中,添加好xhEditor插件 相关用法:http://www.cnblogs.com/xcsn/p/4701497.html 注意事项:xhEditor分为v1.1.1 ...
- css008 给网页添加图片
css008 给网页添加图片 1. css和<img>标签 1.<img>标签是html的添加图片的标签,一般为: <img src=” ...
- CSS3-给网页添加图片
给网页添加图片: 1.background-attachment: scroll--------随文本一块滚动 ; background-attachment: fixed-----固定在一个位置上 ...
- HTML · 图片热点，网页划区，拼接，表单
图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容. 网页的拼接: 在一个网络页面内,规划出多 ...
- php获取网页中图片并保存到本地
php获取网页中图片并保存到本地的代码,将网页中图片保存本地文件夹: save_img("http://www.jbxue.com" ?>
- HTML图片热点、网页划区、拼接、表单
一.图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 示例: 二.网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容. 示例: 三.网页的拼接: ...
随机推荐
- VS的IISExpress配置通过IP访问程序
打开C:\Users\用户\Documents\IISExpress\config\applicationhost.config 获取本地VS项目运行起来的端口,比如 然后在文本里搜索 24395 ...
- Unity3D手游开发日记(1) - 移动平台实时阴影方案
阴影这个东西,说来就话长了,很多年前人们就开始研究出各种阴影技术,但都存在各种瑕疵和问题,直到近几年出现了PSSM,也就是CE3的CSM,阴影技术才算有个比较完美的解决方案.Unity自带的实时阴影, ...
- 【转载 save】vim键位图。
留图,备用,copy from 网络
- [学习笔记]Min-25筛
%%yyb %%zsy 一. 基本操作:筛1~N中的素数个数.n=1e9 设F(M,j)表示,2~M的所有数中,满足以下条件之一的数的个数:①x是质数②x最小质因子大于(注意是大于没有等号)$P_j$ ...
- 前端解放生产力之–动画（Adobe Effects + bodymovin + lottie）
大概很久很久以前,2017年,参加了第二届中国前端开发者大会(FDCon2017),除了看了一眼尤雨溪,印象最深刻的就是手淘渚薰分享的关于H5交互的内容了.时光荏苒,最近再次接触,简单回顾一下. 示例 ...
- Java Socket TCP编程（Server端多线程处理）
package com; import java.io.*; import java.net.Socket; /** * Socket Client * <p> * Created by ...
- hexo搭建个人博客
本文讲述如何用`hexo`搭建个人博客,并托管到`github`.不需要租赁服务器,可完成网站博客的搭建. 安装Hexo安装hexo之前,要先下载安装Node.js和Git,百度搜索找到下载即可.[G ...
- for程序员：这些你可能遇到的职场难题，我们帮你整理好了答案
“迷茫”是当下青年谈论的最多的词汇之一,无论高矮胖瘦富穷美丑,每个人都有自己独特的难题.造成“迷茫”的原因有很多种,比如生存压力,情感问题,以及困扰着相当一部分人的职场焦虑.今天这篇关于“职场迷茫”的 ...
- 一元回归_ols参数解读(推荐AAA)
sklearn实战-乳腺癌细胞数据挖掘(博客主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005269003&a ...
- [DeeplearningAI笔记]序列模型2.6Word2Vec/Skip-grams/hierarchical softmax classifier 分级softmax 分类器
5.2自然语言处理 觉得有用的话,欢迎一起讨论相互学习~Follow Me 2.6 Word2Vec Word2Vec相对于原先介绍的词嵌入的方法来说更加的简单快速. Mikolov T, Chen ...