摘要：最近在實(shí)現(xiàn)一個(gè)功能，需求如下前提當(dāng)前頁面無彈窗頁面任意位置執(zhí)行粘貼讀取剪切板中的截屏數(shù)據(jù)上傳截圖首先還是從網(wǎng)上找相關(guān)的例子。找到了上的專欄文章獲取剪切板內(nèi)容，控制圖片粘貼。

最近在實(shí)現(xiàn)一個(gè)功能，需求如下：

前提：當(dāng)前頁面無彈窗

頁面任意位置執(zhí)行粘貼

讀取剪切板中的截屏數(shù)據(jù)

上傳截圖

首先還是從網(wǎng)上找相關(guān)的例子。

找到了SF上的專欄文章《js獲取剪切板內(nèi)容，js控制圖片粘貼》。

于是基于這個(gè)，做出了第一版的截圖上傳功能。

由于項(xiàng)目使用的是angularjs，事先已經(jīng)封裝好一套上傳圖片的辦法，只需要調(diào)用 $scope.image = blob，自動(dòng)就會發(fā)送、上傳該文件。

我是半路介入項(xiàng)目的。原來為數(shù)不多的幾個(gè)js文件實(shí)在太大，一個(gè)apiService.js就累積了三四千行，各種服務(wù)都在這個(gè)文件里，主視圖就一個(gè)mainController，也是三四千行。

說實(shí)話，我真的驚呆了。

所以還是盡量避免修改原來的代碼。

按照我自己習(xí)慣，把功能封裝成directive，獨(dú)立建一個(gè)文件。

代碼如下：（特別鳴謝本期節(jié)目的文章）

/**
 * @description: 截屏上傳
 * @author:      angusfu1126@qq.com
 * @date:        2016-03-03 20:59:09
 */
app.directive("screenshotOrDragUpload", /*ngInject*/ function($filter) {
    return {
        restrict: "A"
        link: function($scope, iElm, iAttrs, controller) {

            var imageRegex = /^image//i;

            // 粘貼截圖事件
            document.addEventListener("paste", onPasteHandler, false);

            // 作用域銷毀的時(shí)候解除事件綁定
            $scope.$on("$destroy", function() {
                document.removeEventListener("paste", onPasteHandler);
            });

            /**
             * 全局蒙版顯示的時(shí)候
             * 不執(zhí)行粘貼或者拖拽功能
             * 避免和各種彈層ng-show條件太耦合
             * 此處使用DOM方法判斷
             */
            function isMaskShown() {
                // 項(xiàng)目依賴于jquery
                return angular.element(".global-mask").is(":visible");
            }

            /**
             * 根據(jù)時(shí)間戳命名
             */
            function generateFileName(user) {
                return $filter("date")(new Date(), "yyyyMMdd_HH:MM:ss");
            }

            /**
             * 處理 `ctrl + v` 截圖粘貼事件
             */
            function onPasteHandler(e) {
                if (isMaskShown()) return;

                var clipboardData = e.clipboardData;
                var ua = window.navigator.userAgent;

                // 如果無法獲取剪貼板則返回
                if (!clipboardData || !clipboardData.items) {
                    return;
                }

                // Mac平臺下Chrome49版本以下
                // 復(fù)制Finder中的文件的Bug Hack掉
                // see: https://segmentfault.com/a/1190000004288686
                if (clipboardData.items
                        && clipboardData.items.length === 2
                        && clipboardData.items[0].kind === "string"
                        && clipboardData.items[1].kind === "file"
                        && clipboardData.types
                        && clipboardData.types.length === 2
                        && clipboardData.types[0] === "text/plain"
                        && clipboardData.types[1] === "Files"
                        && ua.match(/Macintosh/i)
                        && Number(ua.match(/Chrome/(d{2})/i)[1]) < 49
                 ) {
                    return;
                }

                var len = clipboardData.items.length,
                    item = null,
                    blob = null;

                while (len--) {

                    item = clipboardData.items[len];

                    if (item.kind == "file") {

                        blob = item.getAsFile();

                        if (imageRegex.test(blob.type) && blob.size > 0) {
                            blob.name = generateFileName();

                            // 調(diào)用上傳
                            $scope.image = blob;
                            break;
                        }
                    }
                }
            }


        }
    };
});

當(dāng)然，文章不可能就此結(jié)束。。。

分割線休息片刻

==============================================================

上述功能只有在Chrome和Safari中有效，但到火狐上面就掛掉了啊。。。

測試一下，給document綁定paste事件，粘貼的時(shí)候壓根就讀不到數(shù)據(jù)。

火狐下面，并沒有clipboardData.items這一項(xiàng)。

o(╯□╰)o

那怎么辦呢？

只能退而求其次。放棄，或者尋求降級的辦法。

就在我覺得無路可走的時(shí)候，火狐的一個(gè)特點(diǎn)讓我眼前一亮。。。

分別用chrome和firefox打開這個(gè)demo試試看，試著用qq截個(gè)圖或者在文件夾中復(fù)制一張圖片，粘貼在紅色框框里。

有沒有發(fā)現(xiàn)，只有在火狐下能把圖粘貼進(jìn)來？

嗯，解決辦法就在這里了。

其實(shí)，demo中的紅色框框是一個(gè)有contenteditable屬性的div。

關(guān)于contenteditable，此處有張鑫旭大神的博文兩篇，且記在此處備忘：

小tip: 如何讓contenteditable元素只能輸入純文本

div模擬textarea文本域輕松實(shí)現(xiàn)高度自適應(yīng)

firefox下面，是可以把剪切板中的圖片數(shù)據(jù)粘貼進(jìn)去的，而chrome下面則不行了。

而項(xiàng)目的輸入框，正好是一個(gè)pre標(biāo)簽加上contenteditable屬性模擬出來的。完美~~~（此處應(yīng)有金星老師表情包）

好了，在火狐中粘貼截圖之后，右鍵查看一下，是不是像下圖醬紫的？

有木有看到醒目的img標(biāo)簽？

有木有看到醒目的data:image/png;base64,？

辦法有了。解決方案如下：

監(jiān)聽keydown事件

檢測輸入框是否為空

非空：不允許粘貼圖片（但我們不能事先判斷數(shù)據(jù)類型，只能迅速remove掉img元素）

空的：獲取img元素及其src數(shù)據(jù)，然后迅速移除元素

當(dāng)然，此處是有坑的。。。

具體坑在哪里呢？看代碼吧。其實(shí)我覺得我可能沒完全解決。

if (/firefox/i.test(navigator.userAgent)) {
    var URL = (window.URL || window.mozURL),

        supportTransform = URL && window.Blob && window.atob && window.ArrayBuffer && window.Uint8Array,

        // see http://jsperf.com/blob-base64-conversion
        convertBase64UrlToBlob = function(urlData) {
            //去掉url的頭，并轉(zhuǎn)換為byte
            var bytes = window.atob(urlData.split(",")[1]);

            //處理異常,將ascii碼小于0的轉(zhuǎn)換為大于0
            var ab = new ArrayBuffer(bytes.length);
            var ia = new Uint8Array(ab);
            for (var i = 0; i < bytes.length; i++) {
                ia[i] = bytes.charCodeAt(i);
            }
            return new Blob([ab], {
                type: "image/png"
            });
        };

    $("pre").on("keydown", function(e) {

        var isCtrlV = (e.ctrlKey && e.keyCode == "86");

        if (!supportTransform || !isCtrlV) return;

        var $this = $(this),
            html = $this.html(),
            canPasteImage = false;

        // Notice
        // 火狐的坑在這里啊啊啊啊
        // 只有空的時(shí)候才能粘貼圖片
        if (!html || html === "
") {
            canPasteImage = true;
        }

        setTimeout(function() {
            var $imgs = $this.find("img").remove(),
                data = $imgs.eq(0).attr("src");

            if (canPasteImage && data) {
                var blob = convertBase64UrlToBlob(data);
                blob.name = generateFileName();
                // 調(diào)用上傳
                $scope.image = blob;
            }
        }, 0);

    });
}

做個(gè)筆記： Blob對象和base64字符串的轉(zhuǎn)換, http://jsperf.com/blob-base64-conversion

目前還沒在IE上測試過，不知道結(jié)果如何。