一步一步搭建客服系統 (3) js 實現「截圖粘貼」及「生成網頁縮略圖」

時間 2019-11-12

原文原文鏈接

最近在作一個客服系統的demo，在聊天過程當中，咱們常常要發一些圖片，並且須要用其它工具截圖後，直接在聊天窗口裏粘貼，就能夠發送；另外用戶輸入一個網址後，把這個網址先轉到能夠直接點擊的link，並立刻顯示這個網址的縮略圖。html

1 截屏粘貼

1.1 用clipboardData來實現截屏粘貼

// 利用 clipboardData 在網頁中實現截屏粘貼的功能
function pasteImg(textID) {
    var imgReader = function (item) {
        var blob = item.getAsFile(),
            reader = new FileReader();

        reader.onload = function (e) {

            //顯示圖像
            var msg = '<div> <image src=' + e.target.result + '/> </div>';
            $('#text').html(msg);
        };

        reader.readAsDataURL(blob);
    };

    document.getElementById(textID).addEventListener('paste', function (e) {
        var clipboardData = e.clipboardData,
            i = 0,
            items, item, types;

        if (clipboardData) {
            items = clipboardData.items;

            if (!items) {
                return;
            }

            item = items[0];
            types = clipboardData.types || [];

            for (; i < types.length; i++) {
                if (types[i] === 'Files') {
                    item = items[i];
                    break;
                }
            }

            if (item && item.kind === 'file' && item.type.match(/^image\//i)) {
                imgReader(item);
            }
        }
    });
}

1.2 firefox 不支持clipboardData

用上面的方法通常瀏覽器都支持，但firefox就是不支持，後來才發現，它支持直接粘貼截屏的圖片到div裏(textarea裏不行)。因而把發送消息的框由textarea改爲了div。node

1.3 取值

用jquery取textarea的值，咱們用的是val，但div咱們用val是取不到值的。雖然咱們能夠用html來取到全部內容，但對於文原本說用text取到的值更簡潔；只有要取截屏圖片時，才用html，因而寫成這樣：jquery

var msg = $('#text').text().trim() || $('#text').html().trim();web

1.4 效果圖

做者：瘋吻IT 出處：http://fengwenit.cnblogs.com瀏覽器

2 根據網址生成縮略圖

2.1 效果圖

當用戶輸入 http://qq.com 時，自動轉成link，並生成一個小的縮略圖，效果以下：app

2.2 實現

先判斷是否是link, 若是是link，就生成一個iframe:dom

if (msg.indexOf('http') === 0) {
        var msgs = "<a href='" + msg + "' target='_blank'>" + msg + "</a>";

        msgs += "<iframe src='" + msg + "' width='1000' height='1000' id='f1' scrolling='no' style='visibility:hidden;' onload='zoomEle(this,0.45,0.45);'></iframe>";

        msg = msgs;
    }

初始設置iframe的寬、高爲1000，最開始是不可見的，由於加載完後，要縮小到45%，因此一開始就可見的話，界面會閃一下。縮小的方法zoomEle以下：工具

//獲取瀏覽器名稱 
function getbrowser() {
    var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串
    var isOpera = userAgent.indexOf("Opera") > -1;
    if (isOpera) { return "Opera"; } //判斷是否Opera瀏覽器
    if (userAgent.indexOf("Firefox") > -1) { return "FF"; } //判斷是否Firefox瀏覽器
    if (userAgent.indexOf("Safari") > -1) { return "Safari"; } //判斷是否Safari瀏覽器
    if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) { return "IE"; }
    //判斷是否IE瀏覽器
}
//進行縮放
//el 要縮放的dom對象
//xSacle x方向縮放的大小
//yScale y方向縮放的大小
function zoomEle(el, xScale, yScale) {
    var name = getbrowser();
    style = el.getAttribute('style') || "";
    if (name == "IE") {
        if (document.compatMode == "CSS1Compat") {//模式匹配 解決ie8下兼容模式
            el.style.width = el.clientWidth * 2.0;
            el.style.height = el.clientHeight * 2.0;
        }
        el.style.zoom = xScale;
    } else if (name == "FF") {
        el.style.transform = 'scale(' + xScale + ', ' + yScale + ')';
        el.style.transformOrigin = '0px 0px';
    } else {
        el.setAttribute('style', style + '-webkit-transform: scale(' + xScale + ', ' + yScale + '); -webkit-transform-origin: 0px 0px;');
    }

    el.style.visibility = 'visible';
    $(el).parent().height(500);
}

這裏最後二行，是設置其可見，並把父控件高度設置成500，否則它爲最開始的1000。post

2.3 細節處理

最開始，爲了讓接收到的消息都在最下面，由於消息多了，會有滾動條，因此每收到消息後，會設置收消息的控件div的scrollTop：this

var receiveMsg = document.getElementById('receiveMsg');
receiveMsg.scrollTop = receiveMsg.scrollHeight;

雖然在上一步，把父控件的高度也設成了500（不是1000了)，但整個div的滾動條仍是根據1000出現了，因此div的最下面仍是會有500px的空白，這時用上面的這種方式，就會在下一個消息前出現一大段空白，感受很怪。因而調整了下，不滾到底，而是根據滾動到最後的一個消息處：

var container = $('#receiveMsg');
    if (msg.indexOf('<iframe') === -1) {
        var scrollTo = $('#receiveMsg > div').last();
        container.scrollTop(scrollTo.offset().top - container.offset().top + container.scrollTop() - 20);
    }
    else {
        var scrollTo = $('iframe').last();
        container.scrollTop(scrollTo.offset().top - container.offset().top + container.scrollTop() - 50);
    }

這裏要區分有沒有iframe, 另外普通的消息是用的div來包了一層。

另外若是不想讓這個縮略圖裏的link能被點擊，能夠在iframe里加上sandbox屬性，這樣就不會在點擊後打開新的網頁了。

另外，在網上找到了一個生成當前網頁縮略圖的方法，感受還不錯，分享一下：

(function (exports) {
    function urlsToAbsolute(nodeList) {
        if (!nodeList.length) {
            return [];
        }
        var attrName = 'href';
        if (nodeList[0].__proto__ === HTMLImageElement.prototype 
        || nodeList[0].__proto__ === HTMLScriptElement.prototype) {
            attrName = 'src';
        }
        nodeList = [].map.call(nodeList, function (el, i) {
            var attr = el.getAttribute(attrName);
            if (!attr) {
                return;
            }
            var absURL = /^(https?|data):/i.test(attr);
            if (absURL) {
                return el;
            } else {
                return el;
            }
        });
        return nodeList;
    }

    function screenshotPage() {
        urlsToAbsolute(document.images);
        urlsToAbsolute(document.querySelectorAll("link[rel='stylesheet']"));
        var screenshot = document.documentElement.cloneNode(true);
        var b = document.createElement('base');
        b.href = document.location.protocol + '//' + location.host;
        var head = screenshot.querySelector('head');
        head.insertBefore(b, head.firstChild);
        screenshot.style.pointerEvents = 'none';
        screenshot.style.overflow = 'hidden';
        screenshot.style.webkitUserSelect = 'none';
        screenshot.style.mozUserSelect = 'none';
        screenshot.style.msUserSelect = 'none';
        screenshot.style.oUserSelect = 'none';
        screenshot.style.userSelect = 'none';
        screenshot.dataset.scrollX = window.scrollX;
        screenshot.dataset.scrollY = window.scrollY;
        var script = document.createElement('script');
        script.textContent = '(' + addOnPageLoad_.toString() + ')();';
        screenshot.querySelector('body').appendChild(script);
        var blob = new Blob([screenshot.outerHTML], {
            type: 'text/html'
        });
        return blob;
    }

    function addOnPageLoad_() {
        window.addEventListener('DOMContentLoaded', function (e) {
            var scrollX = document.documentElement.dataset.scrollX || 0;
            var scrollY = document.documentElement.dataset.scrollY || 0;
            window.scrollTo(scrollX, scrollY);
        });
    }

    function generate() {
        window.URL = window.URL || window.webkitURL;
        window.open(window.URL.createObjectURL(screenshotPage()));
    }
    exports.screenshotPage = screenshotPage;
    exports.generate = generate;
})(window);