如何截圖片如何截圖片水印 _經驗知識

（點擊上方公眾號，可快速關注）
作者：鄭武江（@OAuth_v2）
鏈接：seejs.me/2016/11/30/paste-snapshot/
作者：鄭武江（@OAuth_v2）
鏈接：seejs.me/2016/11/30/paste-snapshot/
做這個嘗試，只為了解決一個問題：如何在網頁中讀取剪貼板中的圖片數據，并在頁面中展示或保存到圖片服務器。場景可以簡單描述為，通過任意屏幕截圖工具（QQ、旺旺，PrintScreen鍵等），截圖之后網頁中的文本框內粘貼（Ctrl+V、右鍵等），并在頁面中使用圖片數據。文字描述比較抽象，我們用一個gif圖片來形象的展示一下效果：
ClipboardEvent（剪貼板事件）
ClipboardEvent 接口描述了與修改剪切板相關的事件，這些事件包括 cut 、copy 和 paste 事件。
ClipboardEvent 接口描述了與修改剪切板相關的事件，這些事件包括 cut 、copy 和 paste 事件。
先解決一個問題：為什么要說ClipboardEvent?
首先，無論是截圖還是在網頁中“***圖片”，較終都是將圖片數據存儲到了系統剪貼板中。其次，當執行“粘貼”操作的時候是將剪貼板中的數據讀出來使用，而讀取剪貼板中的圖片（文件）數據，更需要直接使用paste事件完成。
第二個問題：為什么要在文本框中“粘貼”，是必須的嗎？
展開全文
先從paste事件來說，經測試paste事件可以綁定到任意HTML元素上的，并非必須使用文本框。再來猜測下使用場景，粘貼操作涉及到數據寫入問題，內容不可能寫入到頁面中的只讀區域，所以按常理來說，只可能是粘貼到頁面中的可寫區域。再者，較容易讓人想到的場景便是一個聊天會話，因此首先想到的便是文本框控件。
功能實現
功能邏輯比較簡單，截圖完成或在網頁中***圖片后，圖片數據就保存到系統剪貼板上了。我們代碼中需要實現的就是在paste事件中實現剪貼板中的圖像數據讀取和處理邏輯。拿到圖像數據后，就可以根據自己的業務邏輯進行下一步操作了。代碼如下：
(function(){
varsender= document.getElementById('J_MsgSender'),
list= document.getElementById('J_MsgList');
functionpasteImage(imgObj){
varfile= imgObj.getAsFile?imgObj.getAsFile(): imgObj,reader= newFileReader();
// 讀取文件后將其顯示在網頁中
reader.= function(e){
varimg= newImage(),p= document.('p');
img.src= https://www.soozhuozhou.com/e.target.result;
p.(img);
list.(p);
};
}
sender.addEventListener('paste',function(ev){
// 通過事件對象訪問系統剪貼板

文章插圖
varev= ev|| window.event,clipboardData= https://www.soozhuozhou.com/ev.clipboardData,
i= 0,items,item,files;
if(clipboardData){
items= clipboardData.items;
files= clipboardData.files;
if(files&& files.length){
pasteImage(files[0]);
return;
}
if(!items){return;}
for(;i< items.length;i++){
if(items[i].kind=== 'file'&& items[i].type.match(/^image//i)){
item= items[i];
break;
}
}
// 如果存在圖片數據
if(item){
pasteImage(item);// 讀取該圖片
}
}
});
})();
(function(){
varsender= document.getElementById('J_MsgSender'),
【如何截圖片如何截圖片水印】list= document.getElementById('J_MsgList');
functionpasteImage(imgObj){
varfile= imgObj.getAsFile?imgObj.getAsFile(): imgObj,reader= newFileReader();
// 讀取文件后將其顯示在網頁中
reader.= function(e){
varimg= newImage(),p= document.('p');
img.src= https://www.soozhuozhou.com/e.target.result;
p.(img);
list.(p);

如何截圖片 如何截圖片水印

如何截圖片如何截圖片水印