javascript在網頁中實作讀取剪貼簿貼上截圖功能_javascript技巧

見某網站的輸入框支援截圖貼上的功能，覺得有點意思，於是將程式碼扒出來分享下。

可惜，目前僅有高版本的 Chrome 瀏覽器支援這樣直接粘貼，其他瀏覽器目前為止還無法貼上( IE11沒測試過 )，當然這種增強型的用戶體驗功能有總比沒有好。

輸入框的結構碼：

複製程式碼 程式碼如下:

程式碼如下:

為輸入框綁定貼上事件：

複製程式碼

程式碼如下:

var input = document.testElementBputLputBput;

input.addEventListener( 'paste', function( event ){
    // dosomething...

});

貼上事件的 Event 介面物件提供了一個 clipboardData 接口，該介面就保存了系統剪貼簿中的數據，如上面所說，目前只有高版本的 Chrome 瀏覽器能直接存取系統剪貼簿的資料。這就為截圖後儲存到剪貼簿中的圖片於網頁直接進行互動提供了一個入口。

這裡所說的截圖，就是 QQ 提供的截圖或是系統自帶的 PrtScn 鍵的截圖功能，或是其他第三方軟體提供的截圖功能。 複製程式碼

程式碼如下:


input.addEventListener( 'paste', function( event ) {
    // 添加到事件對像中的訪問系統剪貼板的接口
    var clipboardData = event.clipboardData,
        i = 0,
        items, item, types;

if( clipboardData ){
        items = clipboardData.items;

           }

        item = items[0];
        // 儲存在剪貼簿中的資料型別
        types = clipboardData.types || [];
                 }
        }

        // 判斷圖片資料是否為圖片資料
        if( item && item.kind === 'file' && item.type.match(/^image//i) ){
            //    Reader( item );
        }
    }
});



從剪貼簿中取到了圖片數據，就可以用 FileReader 來讀取了。

複製程式碼

程式碼如下:var imgReader = function(>var imgReader = function( file = item.getAsFile(),

        reader = new FileReader();

    //  >        var img = new Image();

        img.src = e.target.result ); >
    // 讀取檔案
    reader.readAsDataURL( file );
};




很短的程式碼就實現了，可以使用以下原始碼看看示範。

複製程式碼

程式碼如下:

        items = clipboardData.items;

     return;
        }

        item = items[ 0];
        types = clipboardData.types || [];

       Files' ) {
                item = items[i];
                   }

        if( item && item.kind === 'file' && item.type.match( /^image//i) ){
            imgReader( item );
        }
}  🎜>