js網頁截屏_js怎麼實現將截圖或者復制的圖片用ctrl+v

A. cocos2d-js 怎麼截屏

第一種：Ctrl+PrScrn使用這個組合鍵截屏，獲得的是整個屏幕的圖片；
第二種：Alt+PrScrn這個組合鍵截屏，獲得的結果是當前窗口的圖片；
（上面兩種方法，然後在桌面點右鍵新建「圖畫」或「BMP圖像」，粘貼即可；也可以在Photoshop中新建文件，粘貼即可。）

B. js中怎麼調用windows的截屏工具

一.工具

windows自帶的畫圖軟體：mspaint.exe

windows自帶的截圖軟體：SnippingTool.exe

二，方法（一）：

使用快捷鍵PrtSc、Alt+PrtSc

1.敲擊鍵盤上的」PrtSc「鍵可以實現截取全屏的功能，截取的屏幕圖片將被保存到剪貼板中。可以在word文檔、qq等窗口通過"Ctrl+v"將其粘貼出來使用。

打開軟體後，點擊」新建「拖動滑鼠選擇要截圖的區域，截圖成功後保存即可。

C. js怎麼實現將截圖，或者復制的圖片用ctrl+v

原理分析
提取操作：復制=>粘貼=>上傳
在這個操作過程中，我們需要做的就是：監聽粘貼事件=>獲取剪貼板里的內容=>發請求上傳
為方便理解下文，需要先明白幾點：
我們只能上傳網頁圖(在網頁上右鍵圖片，然後復制)和截圖(截圖工具截的圖片，eg：qq截圖)，不能粘貼上傳系統里的圖片(從桌面上、硬碟里復制)，他們是存在完全不同的地方的。截圖工具截的圖與在網頁點擊右鍵復制的圖是有些不同的，因此處理方式也不一樣。知悉paste event這個事件：當進行粘貼（右鍵paste/ctrl+v）操作時，該動作將觸發名為'paste'的剪貼板事件，這個事件的觸發是在剪貼板里的數據插入到目標元素之前。如果目標元素（游標所在位置）是可編輯的元素（eg：設置了contenteditable屬性的div。textarea並不行。），粘貼動作將把剪貼板里的數據，以最合適的格式，插入到目標元素里；如果目標元素不可編輯，則不會插入數據，但依然觸發paste event。數據在粘貼的過程中是只讀的。此段是翻譯於w3.org_the-paste-action。可惜的是，經過試驗，發現chrome(當前最新版)、firefox(當前最新版)、ie11對paste事件的實現並不是完全按照w3c來的，各自也有區別(w3c的paste標准也因此只是草案階段)。

test代碼如下:
chrome：

<textarea ></textarea> <div contenteditable style="width: 100px;height: 100px; border:1px solid"> </div> <script> document.addEventListener('paste', function (event) { console.log(event) }) </script>

event有clipboardData屬性，且clipboardData有item屬性，clipboardData.item中的元素（對象）有type和kind屬性；無論在哪進行粘貼，均可觸發paste事件；在div（未特殊聲明時，本文div均指設置了contenteditable屬性的div）里粘貼截圖，不顯示圖片。img.src為base64編碼字元串；在div里粘貼網頁圖片，直接顯示圖片，img.src為圖片地址。
firefox：

event有clipboardData屬性，clipboardData沒有item屬性；只有在textarea里或者可編輯的div（里才粘貼才觸發paste事件；在div里粘貼截圖，直接顯示圖片，img.src為base64編碼字元串；在div里粘貼網頁圖片，表現同chrome。
ie11：（不截圖了，可自行試驗，其他瀏覽器同理<(￣▽￣)/,因為懶...）

event沒有clipboardData屬性；只在可編輯的div中粘貼才觸發paste事件；在div里粘貼截圖，直接顯示圖片，img.src為base64編碼字元串；在div里粘貼網頁圖片，表現同chrome。

監聽了paste事件，也知道了表現形式，接下來就是如何獲取數據了：
chrome有特定的方法，利用clipboardData.items、getAsFile()、new FileReader()等api可以在paste回調函數里獲取到剪貼板里圖片的base64編碼字元串（無論是截圖粘貼的還是網頁圖片復制粘貼的），ie11，firefox沒有這樣的api，不過依然有辦法可以獲取，因為數據已經表現在img的src里了，對於截圖粘貼的，直接取img的src屬性值（base64），對於網頁粘貼的，則把地址傳給後台，然後根據地址down下來，存在自己的伺服器，最後把新地址返回來交給前端展示就ok了。為了保持一致性便於管理，統一將所有情況（截圖、網頁）中的img的src屬性替換為自己存儲的地址。因此可以得到以下核心代碼（注釋很全哦~~）：
html展示：
<head> <meta charset="UTF-8"> <title>Document</title> <style> body { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; } #tar_box { width: 500px; height: 500px; border: 1px solid red; } </style>
前端js處理邏輯:
document.addEventListener('paste', function (event) { console.log(event) var isChrome = false; if ( event.clipboardData || event.originalEvent ) { //not for ie11 某些chrome版本使用的是event.originalEvent var clipboardData = (event.clipboardData || event.originalEvent.clipboardData); if ( clipboardData.items ) { // for chrome var items = clipboardData.items, len = items.length, blob = null; isChrome = true; //items.length比較有意思，初步判斷是根據mime類型來的，即有幾種mime類型，長度就是幾（待驗證） //如果粘貼純文本，那麼len=1，如果粘貼網頁圖片，len=2, items[0].type = 'text/plain', items[1].type = 'image/*' //如果使用截圖工具粘貼圖片，len=1, items[0].type = 'image/png' //如果粘貼純文本+HTML，len=2, items[0].type = 'text/plain', items[1].type = 'text/html' // console.log('len:' + len); // console.log(items[0]); // console.log(items[1]); // console.log( 'items[0] kind:', items[0].kind ); // console.log( 'items[0] MIME type:', items[0].type ); // console.log( 'items[1] kind:', items[1].kind ); // console.log( 'items[1] MIME type:', items[1].type ); //阻止默認行為即不讓剪貼板內容在div中顯示出來 event.preventDefault(); //在items里找粘貼的image,據上面分析,需要循環 for (var i = 0; i < len; i++) { if (items[i].type.indexOf("image") !== -1) { // console.log(items[i]); // console.log( typeof (items[i])); //getAsFile() 此方法只是living standard firefox ie11 並不支持 blob = items[i].getAsFile(); } } if ( blob !== null ) { var reader = new FileReader(); reader.onload = function (event) { // event.target.result 即為圖片的Base64編碼字元串 var base64_str = event.target.result //可以在這里寫上傳邏輯直接將base64編碼的字元串上傳（可以嘗試傳入blob對象，看看後台程序能否解析） uploadImgFromPaste(base64_str, 'paste', isChrome); } reader.readAsDataURL(blob); } } else { //for firefox setTimeout(function () { //設置setTimeout的原因是為了保證圖片先插入到div里，然後去獲取值 var imgList = document.querySelectorAll('#tar_box img'), len = imgList.length, src_str = '', i; for ( i = 0; i < len; i ++ ) { if ( imgList[i].className !== 'my_img' ) { //如果是截圖那麼src_str就是base64 如果是復制的其他網頁圖片那麼src_str就是此圖片在別人伺服器的地址 src_str = imgList[i].src; } } uploadImgFromPaste(src_str, 'paste', isChrome); }, 1); } } else { //for ie11 setTimeout(function () { var imgList = document.querySelectorAll('#tar_box img'), len = imgList.length, src_str = '', i; for ( i = 0; i < len; i ++ ) { if ( imgList[i].className !== 'my_img' ) { src_str = imgList[i].src; } } uploadImgFromPaste(src_str, 'paste', isChrome); }, 1); } }) function uploadImgFromPaste (file, type, isChrome) { var formData = new FormData(); formData.append('image', file); formData.append('submission-type', type); var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload_image_by_paste'); xhr.onload = function () { if ( xhr.readyState === 4 ) { if ( xhr.status === 200 ) { var data = JSON.parse( xhr.responseText ), tarBox = document.getElementById('tar_box'); if ( isChrome ) { var img = document.createElement('img'); img.className = 'my_img'; img.src = data.store_path; tarBox.appendChild(img); } else { var imgList = document.querySelectorAll('#tar_box img'), len = imgList.length, i; for ( i = 0; i < len; i ++) { if ( imgList[i].className !== 'my_img' ) { imgList[i].className = 'my_img'; imgList[i].src = data.store_path; } } } } else { console.log( xhr.statusText ); } }; }; xhr.onerror = function (e) { console.log( xhr.statusText ); } xhr.send(formData); }
用express.js搭的簡易後台的接收邏輯：
router.post('/', upload.array(), function (req, res, next) { //1.獲取客戶端傳來的src_str字元串=>判斷是base64還是普通地址=>獲取圖片類型後綴(jpg/png etc) //=>如果是base64替換掉"前綴"("data:image\/png;base64," etc) //2.base64 轉為 buffer對象普通地址則先down下來 //3.寫入硬碟(後續可以將地址存入資料庫) //4.返回picture地址 var src_str = req.body.image, timestamp = new Date().getTime(); if ( src_str.match(/^data:image\/png;base64,|^data:image\/jpg;base64,|^data:image\/jpg;base64,|^data:image\/bmp;base64,/) ) { //處理截圖 src_str為base64字元串 var pic_suffix = src_str.split(';',1)[0].split('/',2)[1], base64 = src_str.replace(/^data:image\/png;base64,|^data:image\/jpg;base64,|^data:image\/jpg;base64,|^data:image\/bmp;base64,/, ''), buf = new Buffer(base64, 'base64'), store_path = 'public/images/test_' + timestamp + '.' + pic_suffix; fs.writeFile(store_path, buf, function (err) { if (err) { throw err; } else { res.json({'store_path': store_path}); } }); } else {// 處理非chrome的網頁圖片 src_str為圖片地址 var temp_array = src_str.split('.'), pic_suffix = temp_array[temp_array.length - 1], store_path = 'public/images/test_' + timestamp + '.' + pic_suffix, wstream = fs.createWriteStream(store_path); request(src_str).pipe(wstream); wstream.on('finish', function (err) { if( err ) { throw err; } else { res.json({"store_path": store_path}); } }); } });
需要node環境：安裝node=>npm intall=>node app.js)

D. 請教js如何實現截屏功能

可以復使用制html2canvas.js，生成的數據是data:image/jpeg;base64格式的：
html2canvas($("#xxxEle")).then(function(canvas) {
var imageData = canvas.toDataURL();
});

E. 如何截取完整網頁

1.如果想截圖整個網頁，只要點瀏覽器上的文件--保存為圖片

2.然後選擇保存類型和修改文件名，最後點保存即可。

360瀏覽器怎麼使用截圖工具？
點擊截圖的下拉三角按鈕，會彈出截圖的功能菜單。
指定區域截圖：直接截取當前顯示屏幕的圖片。
隱藏瀏覽器窗口截圖：開始截圖時會將瀏覽器最小化後再開始截圖。
保存完整網頁為圖片：將當前的網頁保存為一張完整的圖片。
打開windows畫圖工具：點擊即可打開系統自帶的畫圖工具。

如何截圖？
1.開始截圖時，整個頁面會變灰，不能點擊。

2.找到你想要開始截圖的點，按下滑鼠左鍵不放，拖拽滑鼠，會出現一個矩形區域。你可以根據自己的需要選擇截圖區域。

3.選擇好截圖區域後，放開滑鼠左鍵，就完成本次截圖了。如果對截圖滿意的話，可以直接點擊「保存」圖片，或者是「復制到剪貼板」復制剛剛的截圖。如果對截圖不滿意，可以點擊「取消」或者按下ESC鍵重新截圖。

小技巧：點擊了「截圖」按鈕後，又不想截圖了，怎麼快速取消呢？當出現截圖的十字游標後，可以按下滑鼠右鍵或者ESC鍵，就可以取消本次截圖了。

F. 怎麼使用node.js進行快速截圖

使用nodejs進行截圖，推薦使用phantomjs實現。phantomjs是一個無頭瀏覽器，能夠實現截屏，網路專請求監測，自動化測屬試等功能。具體所有例子可以在phantomjs官網找到，下面給一個官網截屏的實例：

//index.js
varpage=require('webpage').create();
page.open('
,function(){
page.render('github.png');
phantom.exit();
});
//命令行調用
phantomjsindex.js

通常也會用casperjs（webkit）來實現截圖，它有更好用的api封裝方便實現各種操作。在Gecko內核下則使用slimerjs實現。

不過google官方團隊也出了針對chrome的無頭瀏覽器工具puppeteer，現在版本是0.9.0，這款工具是單獨針對Chrome瀏覽實現的，提供了強大但是簡單實用的api。

以上關鍵詞 phantomjs、casperjs、slimerjs及puppeteer均可在gitHub上找到，且可以自行下載包查看示例。

G. java截屏有哪幾種方法

前台方式
1. 利用html2canvas實現前台截屏
html2canvas項目的gitHub地址
html2canvas示例
html2canvas可以將HTML代碼塊進行截取，並生成快照形式的canvas，然後可以利用html5的下載功能提供圖片的下載介面，供用戶下載。
優點：前台技術，實現比較容易。
缺點：此項目使用了html5的技術，因此在對IE的兼容上，只可以在IE9+的版本上使用。
使用時，需要引用jQuery.js和html2canvas.js。（html2canvas.js可以在github上下載）
具體JavaScript代碼如下:
var canvas = function () {
html2canvas($("#chart"), {
onrendered: function (canvas) {
$("#class11").html(canvas);//將id為「class11」部分的代碼轉換為canvas
var type = 'png';//圖片類型為png
var imgData = canvas.toDataURL('png');//將圖片轉換為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('http://www.w3.org/1999/xhtml', '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 = 'fe_' + (new Date()).getTime() + '.' + type; // 下載文件
saveFile(imgData, filename);
}
});

後台方式（java）
1. 利用html2image實現
html2image的地址（google）
html2image是可以識別html標簽並將html轉換成圖片的java項目。
優點：後台轉換，故對瀏覽器的版本基本沒有要求。
缺點：對樣式的識別不是很好，轉換出來的圖片比較簡單，基本沒有可以兼容的樣式。
使用方式：maven中引用如下依賴：
<dependency>
<groupId>com.github.xuwei-k</groupId>
<artifactId>html2image</artifactId>
<version>0.1.0</version></dependency>12345

2. 利用DJNativeSwing項目實現
純java代碼實現。使用DJNativeSwing這個項目，構建一個swing瀏覽器，打開網址，之後截取圖片。（需要eclipse的swt庫支持）
優點：純java實現。
缺點：需要多線程的支持，只在控制台方式實現過（由於本人對於多線程的掌握較弱，目前沒有在spring項目中實現這個方法，求大神指導~~）
3. 利用phantomJs實現
phantomJs的GitHub地址
phantomJs官網
phantom利用的是webKit內核，全面支持web而不需瀏覽器支持，快速，原生支持各種Web標准。
優點：速度快，使用簡單。
缺點：需要在項目的伺服器端引用exe文件進行截圖，並發性能有待考證。

導航:首頁 > 編程語言 > js網頁截屏

js網頁截屏

與js網頁截屏相關的資料

友情鏈接