神馬?使用JS直接上傳并預覽粘貼板的圖片?

(題圖:梵高-橄欖樹)


提出需求

因為工作原因,現在有一個需求就是需要用戶使用QQ或者微信復制一張截圖后,在div中直接粘貼這張圖片,而不是采用上傳的方式。類似我們在使用QQ微信時直接粘貼截圖的操作,這個要怎么用js來實現呢?

實現原理

我們可以利用 Clipboard 這個接口API 來實現。

根據在MDN上的定義,Clipboard接口提供了一種讀寫操作系統剪貼板的方式。這樣我們就可以獲取剪貼板的內容,然后通過js插入到某個元素中。

具體Clipboard API的MDN鏈接如下: https://developer.mozilla.org/zh-CN/docs/Web/API/Clipboard

在瀏覽器兼容性上面,可以看到大體上,常用的瀏覽器都支持,不過IE就就只能是IE11及以上了。

獲取剪貼板的圖片

直接上代碼了。

//  將粘貼事件綁定到 document 上
document.addEventListener("paste", function (e) {

    let items = event.clipboardData && event.clipboardData.items;
    let file = null;
    if (items && items.length) {
        // 檢索剪切板items中類型帶有image的
        for (var i = 0; i < items.length; i++) {
            if (items[i].kind === 'file') { // 或者 items[i].type.indexOf('image') !== -1
                file = items[i].getAsFile(); // 此時file就是剪切板中的圖片文件
                break;
            }
        }
    }
}, false); 

如果復制的是文本的話,可以這樣或者粘貼板的文本內容:

let text = null;
if (items && items.length) {
    // 檢索剪切板items
    for (let i = 0; i < items.length; i++) {
        // ...
        if (items[i].kind === 'string') {
            text = event.clipboardData.getData('Text'); // 獲取文本內容
            break;
        }
    }
}

獲取到的是文本內容,可以直接在前端顯示。

如果是圖片的話,就需要上傳到服務器,然后再在前端預覽,具體操作往下看。

上傳到服務器

如果只是圖片,可以直接使用ajax將file保存到服務器即可。

或者通過 FormData 對象進行ajax上傳。

let formData = new FormData();
formData.append('file', file); // 將formData上傳即可

下次下載之后,通過get方法再次獲取到file文件。

let file = formData.get('file'); 

前端顯示預覽

上傳成功后,我們需要及時在前端看到這個圖片,這個可以通過FileReader對象就可以做到。

let reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = function (e) {
    let img = document.createElement("img");
    img.src = e.target.result;
    document.body.appendChild(img); // 將圖片插入body中
}

或者在html中定義好<img>標簽,直接修改圖片的src即可

reader.onload = function (e) {
    let img = document.getElementByName("img")[0];
    img.src = e.target.result;
}

注意:這里e.target.result 得到的是圖片的Base64格式的地址。

示例demo

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
    </head>
    <body>
        <script>
            //  將粘貼事件綁定到 document 上
            document.addEventListener(
                'paste',
                function(e) {
                    let items = event.clipboardData && event.clipboardData.items;
                    let file = null;
                    if (items && items.length) {
                        for (let i = 0; i < items.length; i++) {
                            if (items[i].type.indexOf('image') !== -1) {
                                file = items[i].getAsFile(); // 此時file就是剪切板中的圖片文件
                                break;
                            }
                        }
                    }
                    // 如果需要上傳后端,只需使用ajax將file上傳即可。
                    // 這里是ajax上傳操作...

                    if (file.size === 0) {
                        return;
                    }
					
                    // 上傳成功后,在回調函數中設置前端預覽
                    let reader = new FileReader();

                    reader.readAsDataURL(file);

                    reader.onload = function(e) {
                        let img = document.createElement('img');
                        img.src = e.target.result;
                        document.body.appendChild(img);
                    };
                },
                false
            );
        </script>
    </body>
</html>

可以直接復制上面demo代碼進行實驗。

(啾咪 ^.< )

posted @ 2019-12-05 17:25  Daotin  閱讀(...)  評論(...編輯  收藏
三d开奖结果走势图