平常使用QQ的時候 是不是覺得它的截圖功能很方便呢

今天就用js來模擬一下這個功能吧～

首先要在html裡寫一個div作為文字輸入框

<div contenteditable=”true” id=”div”> </div>

這裡要注意 textarea標籤不支援圖片的顯示 所以選擇給div加一個contenteditable 讓div來裝文字輸入框

然後 js程式碼如下

    document.querySelector(‘#div’).addEventListener(‘paste’,function(e){

            //不同瀏覽器相容處理

            var cbd = e.clipboardData;

            var ua = window.navigator.userAgent;

            // 如果是 Safari 直接 return

            if ( !(e.clipboardData && e.clipboardData.items) ) {

                    return ;

           }

          // Mac平臺下Chrome49版本以下 複製Finder中的檔案的Bug Hack掉

         if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === “string” && cbd.items[1].kind === “file” &&

            cbd.types && cbd.types.length === 2 && cbd.types[0] === “text/plain” && cbd.types[1] === “Files” &&

            ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){

                  return;

           }

           //獲取剪貼簿的截圖功能實現

          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;

                           }

                           var reader = new FileReader();

                           var imgs = new Image();

                           imgs.file = blob; //blob裡的內容就是獲取的圖片名和檔案格式

                           reader.onload = (function(aImg) {   //將獲取的圖片轉換被base64格式

                                    return function(e) {

                                            aImg.src = e.target.result;

                                            console.log(aImg.src)

                                   };

                         })(imgs);

                         reader.readAsDataURL(blob);

                         document.querySelector(‘#div’).appendChild(imgs);//以img標籤的形式新增在div中

                      }

               }

       }, false);

上傳的程式碼學會了之後會上傳的～～