js實現ctrl+v粘貼圖片或是截圖

本文轉載自查看原文 2017-11-22 17:28 7465 javascript

瀏覽器環境：谷歌瀏覽器

1.ctrl+v粘貼圖片都是監聽paste時間實現的，復制的數據都存在clipboardData下面，雖然打印顯示數據長度為0，但是還是可以獲取數據的

2.打印clipboardData.items發現是一個DataTransferItem。

3.DataTransferItem有個getAsFile()的方法，可以獲取文件

    document.addEventListener('paste', function (event) {
        console.log(event);
        var isChrome = false;
        if (event.clipboardData || event.originalEvent) {
            //某些chrome版本使用的是event.originalEvent
            var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
            if(clipboardData.items){
                // for chrome
                var  items = clipboardData.items,
                    len = items.length,
                    blob = null;
                isChrome = true;
                for (var i = 0; i < len; i++) {
                    console.log(items[i]);
                    if (items[i].type.indexOf("image") !== -1) {
                        //getAsFile() 此方法只是living standard firefox ie11 並不支持
                        blob = items[i].getAsFile();
                    }
                }
            }
        }
    })

View Code

此時就可以獲取到blob對象了，這時候可以選擇顯示在頁面上，也可以選擇發送給后台

3.1顯示圖片

　　3.1.1執行下面代碼即可,使用blob對象顯示

  var blobUrl=URL.createObjectURL(blob);
       document.getElementById("imgNode").src=blobUrl;

View Code

效果圖

　　3.1.2使用base64碼顯示，需要借助FileReader

reader.onload = function (event) {
                        // event.target.result 即為圖片的Base64編碼字符串
                        var base64_str = event.target.result;

                        document.getElementById("imgNode").src=base64_str;
                    }
                    reader.readAsDataURL(blob);

View Code

3.2上傳到后台

　　3.2.1生成formData,這里生成formData

  var fd = new FormData();
                    fd.append("the_file", blob, 'image.png');

View Code

3.3完整代碼

完整代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: center;
            justify-content: center;
        }
    </style>
</head>
<body>
<textarea></textarea>
<div contenteditable style="width: 300px;height: 100px; border:1px solid">
    <img src="" id="imgNode">
</div>
</body>
<script>
    document.addEventListener('paste', function (event) {
        console.log(event);
        var isChrome = false;
        if (event.clipboardData || event.originalEvent) {
            //某些chrome版本使用的是event.originalEvent
            var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
            if(clipboardData.items){
                // for chrome
                var  items = clipboardData.items,
                    len = items.length,
                    blob = null;
                isChrome = true;
                for (var i = 0; i < len; i++) {
                    console.log(items[i]);
                    if (items[i].type.indexOf("image") !== -1) {
                        //getAsFile() 此方法只是living standard firefox ie11 並不支持
                        blob = items[i].getAsFile();
                    }
                }
                if(blob!==null){
                    var blobUrl=URL.createObjectURL(blob);
                    //blob對象顯示
                    document.getElementById("imgNode").src=blobUrl;
                    var reader = new FileReader();
                    //base64碼顯示
                   /* reader.onload = function (event) {
                        // event.target.result 即為圖片的Base64編碼字符串
                        var base64_str = event.target.result;

                        document.getElementById("imgNode").src=base64_str;
                    }
                    reader.readAsDataURL(blob);*/var fd = new FormData(document.forms[0]);
                    fd.append("the_file", blob, 'image.png');
                    //創建XMLHttpRequest對象
                    var xhr = new XMLHttpRequest();
                    xhr.open('POST','/image' );
                    xhr.onload = function () {
                        if ( xhr.readyState === 4 ) {
                            if ( xhr.status === 200 ) {
                                var data = JSON.parse( xhr.responseText );
                                console.log(data);
                            } else {
                                console.log( xhr.statusText );
                            }
                        };
                    };
                    xhr.onerror = function (e) {
                        console.log( xhr.statusText );
                    }
                    xhr.send(fd);
                }
            }
        }
    })
</script>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 wangEditor 實現ctrl+v粘貼圖片並上傳、word粘貼帶圖片 ckeditor 實現ctrl+v粘貼圖片並上傳、word粘貼帶圖片 js實現ctrl+v粘貼並上傳圖片 js實現ctrl+v上傳圖片 kindeditor實現ctrl+v粘貼word圖片並上傳 ueditor實現ctrl+v粘貼word圖片並上傳 wangEditor實現ctrl+v粘貼word圖片並上傳 tinymce實現ctrl+v粘貼word圖片並上傳 js實現ctrl+v粘貼上傳圖片(兼容chrome，firefox，ie11) 使用 div 標簽 contenteditable="true" 實現一個聊天框,支持 Ctrl + v 粘貼圖片