网页全截图实现

简介: 前言PhantomJS简介环境搭建下载解析器phantomjs然后是selenium基本语法helloworld截图使用命令行参数结合Python简易版稍难一点点题外话总结前言使用Python的urllib以及urllib2只能获取到静态的网页,对于一整张网页进行截图就不是很容易了。

前言

使用Python的urllib以及urllib2只能获取到静态的网页,对于一整张网页进行截图就不是很容易了。今天凑巧看到了PhantomJS。于是对于整张网页进行截图保存再也不是一件困难的事情了。

PhantomJS简介

PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

换句话讲,也可以如下理解。

PhantomJS是一个基于webkit的JavaScript API。它使用QtWebKit作为它核心浏览器的功能,使用webkit来编译解释执行JavaScript代码。任何你可以在基于webkit浏览器 做的事情,它都能做到。它不仅是个隐形的浏览器,提供了诸如CSS选择器、支持Web标准、DOM操作、JSON、HTML5、Canvas、SVG等, 同时也提供了处理文件I/O的操作,从而使你可以向操作系统读写文件等。PhantomJS的用处可谓非常广泛,诸如前端无界面自动化测试(需要结合 Jasmin)、网络监测、网页截屏等。

环境搭建

下载解析器phantomjs

官网地址为:http://phantomjs.org/
截止到2017年2月28日20:14:11为止最新版本为V2.1。下载完成之后解压一下,将Bin目录下的phantomjs.exe放到Python的安装目录的Scripts文件夹内即可。

然后是selenium

关于selenium的安装和驱动的配置,可以参照下面的这个链接:
http://blog.csdn.net/marksinoberg/article/details/53610401

至此,Windows上的Phatomjs对于Python的环境就算是搭建好了。

基本语法

下面根据官网上给的例子,先来做几个小测试,熟悉一下语法。

helloworld

将下面的代码保存为example.js即可。

console.log('Hello, world!');
phantom.exit();

运行方式,在命令行下执行

phantomjs example.js

需要注意的是
It is very important to call phantom.exit() at some point in the script, otherwise PhantomJS will not be terminated at all.

截图

var page = require('webpage').create();
page.open('http://blog.csdn.net/marksinoberg', function(status) {
  console.log("Status: " + status);
  if(status === "success") {
    page.render('example.png');
  }
  phantom.exit();
});

运行完此脚本之后将在同级目录下生成一个名为example.png的图片。

使用命令行参数

其实只需要加上对system模块的引用即可。

var page = require('webpage').create(),
  system = require('system'),
  t, address;

if (system.args.length === 1) {
  console.log('Usage: loadspeed.js <some URL>');
  phantom.exit();
}

t = Date.now();
address = system.args[1];
page.open(address, function(status) {
  if (status !== 'success') {
    console.log('FAIL to load the address');
  } else {
    t = Date.now() - t;
    console.log('Loading ' + system.args[1]);
    console.log('Loading time ' + t + ' msec');
  }
  phantom.exit();
});

运行方式:

phantomjs example.js http://blog.csdn.net/marksinoberg

关于JS部分的测试基本上就算是完成了。

结合Python

其实不用Python来调用也是可以的,使用批命令的方式也会很妥当,但是很多时候动态的解析起来,使用Python还是比较爽的,所以接下来就简单的使用Python做下测试。

简易版

先写好一个example.js脚本,内容如下:

var page = require('webpage').create();
page.open('http://lib.csdn.net/experts/detail?type=11', function(status){
    console.log('Status:' + status);
    if(status === "success") {
        page.render('example.png');
    }
    phantom.exit();
});

然后写个Python的脚本,名为example.py 内容如下:

# coding: utf8

import os
os.system("phantomjs example.js")

注意这两个脚本应该在同级目录下,然后运行一下:

python example.py

获取到的结果图如下:
example.png

稍难一点点

修改js中的脚本来实现网址和文件名的方式总归是不妥的,下面使用命令行传参的方式来解决这一个小问题。

var page = require('webpage').create();
var system = require('system');
page.open(system.args[1], function(status){
    console.log('Status:' + status);
    if(status === "success") {
        page.render(system.args[2]);
    }
    phantom.exit();
});

下面是Python代码:

# coding: utf8

import os

argv1 = raw_input('The URL:\n')
argv2 = raw_input('The Saved Picture name:\n')

os.system("phantomjs screenshot.js {} {}".format(argv1, argv2))

运行一下,可以得到下面的截图。
长截图

题外话

起初,我想做的是一个动态解析QQ音乐搜索结果,转成对外可用的JSON接口的,但是发现QQ音乐网页内容是JS动态生成的,而且会根据songurl不同发生页面重定向,至于怎么实现的,我就不得而知了。总之,不好办。

今天看完了Phantomjs,就又试了一下,发现有些可以,有些仍然是不行(重定向那块仍旧是不行)。

下面贴出我的代码块,有兴趣的不妨加以改进。

# coding: utf8

from selenium import webdriver
driver = webdriver.PhantomJS()
# 获取要搜索的歌曲名称。这里因为在Window的CMD中输入中文,故做了编码转换
songname = raw_input('song name:\n').decode('gbk').encode('utf8')
import urllib
songname = urllib.quote(songname)


target_url = "https://c.y.qq.com/soso/fcgi-bin/search_cp?remoteplace=txt.yqq.song&searchid=70358775627327036&t=0&aggr=1&cr=1&catZhida=1&lossless=0&flag_qc=0&p=1&n=20&w={}&g_tk=767270056&jsonpCallback=searchCallbacksong8831&loginUin=1064319632&hostUin=0&format=jsonp&inCharset=utf8&outCharset=utf-8&notice=0&platform=yqq&needNewCode=0".format(songname)
driver.get(target_url)
# 设置超时等待时间
driver.implicitly_wait(20) 
data = driver.page_source
data = data.encode('utf8')
###############################去除HTML代码,转成JSON格式
data = str(data).lstrip("<html><head></head><body><pre style=\"word-wrap: break-word; white-space: pre-wrap;\">searchCallbacksong8831(")
data = data.rstrip(")</pre></body></html>")


file = open('./search_result.json', 'w+')
file.write(data)
file.close()
driver.quit()

# data 为JSON格式,通过查找文件内容,可以发现下面的两种songurl
# http://y.qq.com/#type=song&id=3328967  这样的不行啊
# http://ws.stream.qqmusic.qq.com/TK60b992e09aa466f130adfe8becbb9b083f.mp3?fromtag=0 这样的倒还是可以

给大家看一下我成功获取到的一首歌曲的样例。

  • 首先输入歌曲名称
    歌曲名称

  • 查看生成的JSON文件
    生成的歌曲相关的JSON文件

  • 播放结果
    歌曲播放效果

总结

最后来回顾一下,Phantomjs真的是很强大啊。感觉对它的挖掘还是很浅显,唯一遗憾的就是没能搞定QQ音乐重定向的那个坑。

今天Python就当是打了个酱油吧,其实用批命令脚本会更爽。

目录
相关文章
|
3月前
分别利用phantomjs和slimerjs实现网页的爬取和截图代码逻辑
文章介绍了如何使用PhantomJS和SlimerJS两种工具实现网页的爬取和截图,提供了具体的代码示例和执行命令。
30 0
|
4月前
|
前端开发 安全 API
前端怎么样限制用户截图?
其实限制用户截图这个方案本身就不合理,除非整个设备都是定制的,在软件上阉割截图功能。为了这个需求添加更复杂的功能对于一些安全性没那么高的需求来说,有点本末倒置了。 下面聊聊正经方案: 1.对于后台系统敏感数据或者图片,主要是担心泄漏出去,可以采用斜45度七彩水印,想要完全去掉几乎不可能,就是观感比较差。 2.对于图片版权,可以使用现在主流的盲水印,之前看过腾讯云提供的服务,当然成本比较高,如果版权需求较大,使用起来效果比较好。 3.视频方案,tiktok下载下来的时候会有一个水印跑来跑去,当然这个是经过处理过的视频,非原画,画质损耗也比较高。Netflix等视频网站采用的是服务端权限控制,走的
|
Web App开发 JavaScript 开发者
【软件技巧】【截图】浏览器自带的全网页截图工具
【软件技巧】【截图】浏览器自带的全网页截图工具
373 0
【软件技巧】【截图】浏览器自带的全网页截图工具
|
前端开发 安全 程序员
前端如何限制用户截图
前端如何限制用户截图
|
缓存 前端开发 API
关于安卓控件截图的探索(一)
安卓控件截图的探索
185 0
DHL
|
前端开发 Android开发
获取视频截图
获取视频截图
DHL
358 0
|
Web App开发 开发者
chrome浏览器三步搞定完整网页截图
第一步:点击F12进入开发者模式 第二步:Ctrl+shift+p  输入full   link) 第三步:点击screenshot 即可下载完整网页长图  如下:效果 link
3593 0
|
前端开发 JavaScript
JS - 原生js实现 网页截图(+下载截图) 功能
实现:html2canvas + canvas.toDataURL 首先,引入依赖插件: import { html2canvas } from './html2canvas'; html2canvas截图模糊处理:   1 /*图片跨域及截图模糊处理*/ 2 let canvasContent = document.
4108 0