利用blob對象實現粘貼圖片
blob的一個常用應用場景,就是獲取剪切板上的數據來進行粘貼的操作。例如通過QQ截圖後,需要在網頁上進行粘貼操作。
粘貼圖片我們需要解決下面幾個問題
1、監聽用戶的粘貼操作
2、獲取到剪切板上的數據
3、將獲取到的數據渲染到網頁中
首先我們可以通過paste事件來監聽用戶的粘貼操作:
document.addEventListener(‘paste‘, function (e) {
console.info(e);
});
然後,可以通過事件對象中的clipboardData 對象來獲取圖片的文件數據。
clipboardData對象介紹
介紹一下 clipboardData 對象,它實際上是一個 DataTransfer 類型的對象, DataTransfer 是拖動產生的一個對象,但實際上粘貼事件也是它。
items 介紹
items 是一個 DataTransferItemList 對象,自然裏面都是 DataTransferItem 類型的數據了。
types介紹
一般 types 中常見的值有 text/plain 、 text/html 、 Files 。
有了上面這些方法,我們可以解決第二個問題即獲取到剪切板上的數據。
document.addEventListener(‘paste ‘, function (e) {
if ( !(e.clipboardData && e.clipboardData.items) ) {
return;
}
var cbd = e.clipboardData;
for(var i = 0; i < cbd.items.length; i++) {
var item = cbd.items[i];
console.info(item);
if(item.kind == "file"){
var blob = item.getAsFile();
if (blob.size === 0) {
return;
}
console.info(blob);
}
}
});
最後,我們需要將獲取到的數據渲染到網頁上。其實這個本質上就是一個類似於上傳圖片本地瀏覽的問題。我們可以直接將獲取到的文件上傳到服務器,然後通過服務器返回的url地址來對圖片進行渲染;也可以使用fileRender對象來進行圖片本地瀏覽。
fileRender對象簡介
從Blob中讀取內容的唯一方法是使用 FileReader。FileReader接口有4個方法,其中3個用來讀取文件,另一個用來中斷讀取。無論讀取成功或失敗,方法並不會返回讀取結果,這一結果存儲在result屬性中。
FileReader對象以前介紹過,不多說。通過readAsDataURL方法及onload事件就可以拿到一個可本地瀏覽圖片的DataURL。
document.addEventListener(‘paste‘, function (e) {
var cbd = e.clipboardData;
var fr = new FileReader();
for(var i = 0; i < cbd.items.length; i++) {
var item = cbd.items[i];
if(item.kind == "file"){
var blob = item.getAsFile();
if (blob.size === 0) {
return;
}
fr.readAsDataURL(blob);
fr.onload=function(e){
var result=document.getElementById("result");
//顯示文件
result.innerHTML=‘<img src="‘ + this.result +‘" />‘;
}
}
}
});
利用blob對象實現粘貼圖片