獵豹瀏覽器怎么截屏截圖

獵豹瀏覽器，是由金山網(wǎng)絡(luò)技術(shù)有限公司推出的一款瀏覽器，獵豹瀏覽器主打安全與極速特性，采用Trident和WebKit雙渲染引擎，并整合金山自家的BIPS進行安全防護。獵豹瀏覽器對Chrome的Webkit內(nèi)核進行了超過100項的技術(shù)優(yōu)化，訪問網(wǎng)頁速度更快。其具有首創(chuàng)的智能切換引擎，動態(tài)選擇內(nèi)核匹配不同網(wǎng)頁，并且支持HTML5新國際網(wǎng)頁標(biāo)準，極速瀏覽的同時也保證兼容性。

創(chuàng)新互聯(lián)成立與2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目做網(wǎng)站、網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元四方臺做網(wǎng)站,已為上家服務(wù),為四方臺各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792

如何做一個簡單的Chrome Extension用于網(wǎng)頁截屏

這篇文章介紹如何通過幾行簡單的代碼，創(chuàng)建一個用于網(wǎng)頁截屏的Chrome extension。

chrome extension HTML5 JavaScript

目錄[-]

Chrome Extension開發(fā)指南

如何實現(xiàn)網(wǎng)頁截屏功能

安裝運行Chrome Extension

Chrome extension是一個文件包，里面包含了一個配置文件manifest.json，以及一些用于Web開發(fā)的文件和資源 (HTML, JavaScript, CSS,等)。

Chrome Extension開發(fā)指南

Chrome Extension Overview

Chrome Extension Debugging

Chrome Extension Samples

如何實現(xiàn)網(wǎng)頁截屏功能

看一下manifest文件：

{

"name": "Screenshot Extension",

"version": "1.0",

"description": "A simple screenshot extension",

"background": {

"persistent": false,

"scripts": ["background.js"]

},

"content_scripts": [

{

"matches" : ["all_urls"],

"js": ["content.js"]

}

],

"browser_action": {

"default_icon": "camera.png",

"default_title": "Screenshot"

},

"permissions": ["tabs", "all_urls", "activeTab"],

"manifest_version": 2

}

注意：

background.js是用于extension的，而content.js是用于和網(wǎng)頁交互的。這兩個文件之間要交互，需要通過消息傳遞機制。

permission的權(quán)限配置很重要，如果要讓extension作用于所有的網(wǎng)頁站點，就必須申明為all_urls。具體的各種權(quán)限可以參考

Google提供了一個API用于捕捉網(wǎng)頁的可見區(qū)域：

chrome.browserAction.onClicked.addListener(function(tab) {

chrome.tabs.captureVisibleTab(null, {

format : "png",

quality : 100

}, function(data) {

screenshot.data = data;

});

});

如果要實現(xiàn)全網(wǎng)頁的截圖，就必須要觸發(fā)滾動，然后把所有的數(shù)據(jù)拼接起來。這里的data就是獲取的圖片數(shù)據(jù)。

為了讓用戶做出截屏的選擇，創(chuàng)建一個content.js來和網(wǎng)頁交互。從background.js發(fā)送消息到content.js詢問是否需要做截屏操作。如果用戶點擊確認，把消息回傳到background.js。

background.js

chrome.tabs.query({

active : true,

currentWindow : true

}, function(tabs) {

chrome.tabs.sendMessage(tabs[0].id, {ready : "ready"}, function(response) {

if (response.download === "download") {

}

});

});

content.js

chrome.extension.onMessage.addListener(function(msg, sender, sendResponse) {

if (msg.ready === "ready") {

if (confirm('Do you want to capture the screen?')) {

sendResponse({download : "download"});

}

}

});

保存下載圖片：

saveScreenshot : function() {

var image = new Image();

image.onload = function() {

var canvas = screenshot.content;

canvas.width = image.width;

canvas.height = image.height;

var context = canvas.getContext("2d");

context.drawImage(image, 0, 0);

// save the image

var link = document.createElement('a');

link.download = "download.png";

link.href = screenshot.content.toDataURL();

link.click();

screenshot.data = '';

};

image.src = screenshot.data;

},

安裝運行Chrome Extension

在Chrome設(shè)置中勾上Developer mode

點擊Load unpacked extension

打開一個網(wǎng)頁，點擊工具欄中的按鈕

確認保存截屏

如何通過 HTML5 實現(xiàn) iOS 7 的實時毛玻璃模糊效果

所謂的毛玻璃效果其實是半透明+模糊，可以用CSS filter實現(xiàn)。

時間不多，就拋個磚，題主可以自己找一下文檔和更多案例。

filter - CSS

div {

-moz-filter: blur(5px);

-webkit-filter: blur(5px);

-o-filter: blur(5px);

-ms-filter: blur(5px);

filter: blur(5px);

}

大體思路是，當(dāng)出現(xiàn)彈出層的時候，對背景層增加blur filter，再給彈出層的一定透明度就可以了。

因為有同學(xué)堅持說 CSS filter 只能用于圖片，所以錄了一個小視頻，證明它是可以用于可視的DOM元素的。

在 codepen 上找了一個栗子，是通過CSS filter + JS復(fù)制滾動元素實現(xiàn)的毛玻璃 Nav Bar 效果，也可以說明，這個屬性真的不是只能作用于圖片，也不需要“截屏”啊。

java截屏有哪幾種方法

前臺方式

1. 利用html2canvas實現(xiàn)前臺截屏

html2canvas項目的gitHub地址

html2canvas示例

html2canvas可以將HTML代碼塊進行截取，并生成快照形式的canvas，然后可以利用html5的下載功能提供圖片的下載接口，供用戶下載。

優(yōu)點：前臺技術(shù)，實現(xiàn)比較容易。

缺點：此項目使用了html5的技術(shù)，因此在對IE的兼容上，只可以在IE9+的版本上使用。

使用時，需要引用jQuery.js和html2canvas.js。（html2canvas.js可以在github上下載）

具體JavaScript代碼如下:

var canvas = function () {

html2canvas($("#chart"), {

onrendered: function (canvas) {

$("#class11").html(canvas);//將id為“class11”部分的代碼轉(zhuǎn)換為canvas

var type = 'png';//圖片類型為png

var imgData = canvas.toDataURL('png');//將圖片轉(zhuǎn)換為png類型的流

var _fixType = function (type) {

type = type.toLowerCase().replace(/jpg/i, 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; return 'image/' + r;

}; var saveFile = function (data, filename) {

var save_link = document.createElementNS('', 'a');

save_link.href = data;

save_link.download = filename; var event = document.createEvent('MouseEvents');

event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

save_link.dispatchEvent(event);

}; //下載時的文件名

var filename = 'baidufe_' + (new Date()).getTime() + '.' + type; // 下載文件

saveFile(imgData, filename);

}

});

后臺方式（java）

1. 利用html2image實現(xiàn)

html2image的地址（google）

html2image是可以識別html標(biāo)簽并將html轉(zhuǎn)換成圖片的java項目。

優(yōu)點：后臺轉(zhuǎn)換，故對瀏覽器的版本基本沒有要求。

缺點：對樣式的識別不是很好，轉(zhuǎn)換出來的圖片比較簡單，基本沒有可以兼容的樣式。

使用方式：maven中引用如下依賴：

dependency

groupIdcom.github.xuwei-k/groupId

artifactIdhtml2image/artifactId

version0.1.0/version/dependency12345

2. 利用DJNativeSwing項目實現(xiàn)

純java代碼實現(xiàn)。使用DJNativeSwing這個項目，構(gòu)建一個swing瀏覽器，打開網(wǎng)址，之后截取圖片。（需要eclipse的swt庫支持）

優(yōu)點：純java實現(xiàn)。

缺點：需要多線程的支持，只在控制臺方式實現(xiàn)過（由于本人對于多線程的掌握較弱，目前沒有在spring項目中實現(xiàn)這個方法，求大神指導(dǎo)~~）

3. 利用phantomJs實現(xiàn)

phantomJs的GitHub地址

phantomJs官網(wǎng)

phantom利用的是webKit內(nèi)核，全面支持web而不需瀏覽器支持，快速，原生支持各種Web標(biāo)準。

優(yōu)點：速度快，使用簡單。

缺點：需要在項目的服務(wù)器端引用exe文件進行截圖，并發(fā)性能有待考證。

本文標(biāo)題：html5截屏,html5如何禁止用戶截屏
URL鏈接：http://chinadenli.net/article40/dsgdeho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計、標(biāo)簽優(yōu)化、關(guān)鍵詞優(yōu)化、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)