linux7.6.1810使用firefox截屏(网页快照screenshot snapshot)

查看linux版本

yum -y install redhat-lsb
(base) [root@nlu-ca-1 firefox]# lsb_release -a
LSB Version:    :core-4.1-amd64:core-4.1-noarch:cxx-4.1-amd64:cxx-4.1-noarch:desktop-4.1-amd64:desktop-4.1-noarch:languages-4.1-amd64:languages-4.1-noarch:printing-4.1-amd64:printing-4.1-noarch
Distributor ID: CentOS
Description:    CentOS Linux release 7.6.1810 (Core)
Release:        7.6.1810
Codename:       Core

安装Firefox

yum install firefox -y
#可能不是最新版本
wget https://download-installer.cdn.mozilla.net/pub/firefox/releases/91.0b7/linux-x86_64/zh-CN/firefox-91.0b7.tar.bz2
#解压到/usr/local/firefox
#将/usr/local/firefox添加到环境变量PATH中
vim /etc/profile
export PATH=$PATH:/usr/local/firefox
source /etc/profile

安装字体

yum install system-config-language wqy-unibit-fonts cjkuni-ukai-fonts lrzsz -y

设置中文显示

这一步很重要,不然打开的中文网站,中文部分都是乱码哦

system-config-language --text #设置简体中文显示
source /etc/locale.conf
echo $LANG # 显示zh_CN.UTF-8即可

执行命令获取截屏


(base) [root@nlu-ca-1 tmp]# firefox --headless --no-remote --new-instance -screenshot baidu.png https://www.baidu.com
*** You are running in headless mode.
[GFX1-]: glxtest: Unable to open a connection to the X server
[GFX1-]: glxtest: libEGL initialize failed

###!!! [Parent][RunMessage] Error: Channel closing: too late to send/recv, messages will be lost

会报些错误,不知道为什么
低版本的试了下,不报错,可以用

如下是低版本的安装过程

yum -y install firefox #也可以通过上面的url方式下载
firefox -version
Failed to open connection to "session" message bus: Unable to autolaunch a dbus-daemon without a $DISPLAY for X11
Running without a11y support!
Mozilla Firefox 78.12.0esr

截图:

firefox --headless -screenshot baidu.png https://www.baidu.com
Failed to open connection to "session" message bus: Unable to autolaunch a dbus-daemon without a $DISPLAY for X11
Running without a11y support!
*** You are running in headless mode.

这个错误【Failed to open connection to “session” message bus: Unable to autolaunch a dbus-daemon without a $DISPLAY for X11】
解决方式是:

yum install dbus-x11 dbus -y

在每次截图前执行

eval `dbus-launch --sh-syntax`

(base) [root@nlu-ca-2 ~]# firefox --headless -screenshot baidu.png https://www.baidu.com
Running without a11y support!
*** You are running in headless mode.

下载到本地查看图片

其他方式:

  1. WebVector is an HTML to SVG or PNG convertor. It converts a HTML document into a vector image in SVG format or a bitmap image in PNG format. The Standard Vector Graphics (SVG) files can be further edited by a variety of vector graphics editors such as Inkscape.
    http://cssbox.sourceforge.net/webvector/

  2. CutyCapt is a small cross-platform command-line utility to capture WebKit’s rendering of a web page into a variety of vector and bitmap formats, including SVG, PDF, PS, PNG, JPEG, TIFF, GIF, and BMP. See IECapt for a similar tool based on Internet Explorer.

  3. wkhtmltopdf and wkhtmltoimage are open source (LGPL) command line tools to render HTML into PDF and various image formats using the QT Webkit rendering engine. These run entirely “headless” and do not require a display or display service. There is also a C library, if you’re into that kind of thing.

另外,使用chrome也可以达到相同的目的
参考:https://www.cnblogs.com/imyalost/p/9079076.html
备注:该方法也要保证操作系统的LANG为中文

   yum -y install xorg-x11-server-Xvfb-1.20.1-3.el7.x86_64.rpm
   yum -y install google-chrome-stable_current_x86_64.rpm
   yum install -y epel-release
   yum install -y chromium
   yum -y install  python-qt4 libqt4-webkit python-pip

Another easy way is using (phantomjs)[https://phantomjs.org/]
phantomjs:

$ phantom rasterize.js https://www.baidu.com baidu.png

Download and unzip the binary archive. rasterize.js is in the example directory.

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
引用\[1\]:第一步是下载js-web-screen-shot插件,可以使用以下命令进行下载:yarn add js-web-screen-shot 或者 npm install js-web-screen-shot --save。\[1\] 引用\[2\]:第三步是在点击截图监听事件中实例化插件。可以使用以下代码进行实例化: ``` var timer=setTimeout(() => { const screenShotHandler = new ScreenShort({ enableWebRtc: false, level: 99, completeCallback: this.callback, closeCallback: this.closeFn, }); }, 0); ``` \[2\] 引用\[3\]:如果想在HTML中使用这个插件,需要先将插件的dist文件夹下载并放入项目中。然后可以使用以下代码定义插件对象,并设置截屏时画布的宽高: ``` function btn(){ new screenShotPlugin({ enableWebRtc: false, level: 2001, canvasWidth: 1200, canvasHeight: 1200, completeCallback: callback, closeCallback: closeFn }); } ``` \[3\] 问题: 如何使用screenShotPlugin.umd.js? 回答: 要使用screenShotPlugin.umd.js,首先需要下载js-web-screen-shot插件并将其引入项目中。然后根据需要,在相应的事件中实例化插件对象,并设置相关参数,如enableWebRtc、level、canvasWidth和canvasHeight等。最后,可以通过调用插件对象的方法来实现截图功能。具体的使用方法可以参考上述引用的代码示例。 #### 引用[.reference_title] - *1* *2* [vue使用插件js-web-screen-shot完成局部截图并保存上传给后端](https://blog.csdn.net/weixin_43822237/article/details/123568175)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [截屏插件 js-web-screen-shot(Vue 、html)](https://blog.csdn.net/zcl_1991/article/details/129549389)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值