背景 截圖或頁面複製圖片，可以直接通過Ctrl+v 粘貼上傳圖片 原理 操作：複製（截圖）=>粘貼=>上傳 監聽粘貼事件=>獲取剪貼板里的內容=>發請求上傳 瀏覽器：Chrome、IE11 Chrome瀏覽器 1、通過監聽粘貼事件，event有clipboardData屬性，且clipboardDa ...
背景
截圖或頁面複製圖片，可以直接通過Ctrl+v 粘貼上傳圖片
原理
操作：複製（截圖）=>粘貼=>上傳
監聽粘貼事件=>獲取剪貼板里的內容=>發請求上傳
瀏覽器：Chrome、IE11
Chrome瀏覽器
1、通過監聽粘貼事件，event有clipboardData屬性，且clipboardData有item屬性
2、獲取剪切板的base64編碼字元串，傳到後臺伺服器
3、伺服器獲取到base64編碼字元串轉化為圖片保存伺服器
4、前臺獲取圖片名並展示
IE11
1、IE11是沒有event有clipboardData屬性的，所以不能直接獲取base64編碼字元串
2、頁面放置一個帶有contenteditable屬性的div容器，用於接收IE粘貼的圖片，PS：IE粘貼事件需要在設置了contenteditable屬性的div粘貼才會觸發
3、當進行粘貼操作，讓焦點在div容器中，這時粘貼事件才會觸發，DIV中直接生成IMG
4、從IMG中src獲取base64編碼字元串，傳到後臺伺服器
5、伺服器獲取到base64編碼字元串轉化為圖片保存伺服器
6、前臺獲取圖片名並展示
註意點：Chrome和IE11 觸發paste事件的區別
1、Chrome無論在哪進行粘貼，均可觸發paste事件
2、IE11只能在div中觸發paste事件
