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對象實現粘貼圖片