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

 

最近在做一個客服系統的demo，在聊天過程中，我們經常要發一些圖片，而且需要用其它工具截圖后，直接在聊天窗口里粘貼，就可以發送；另外用戶輸入一個網址后，把這個網址先轉到可以直接點擊的link，並馬上顯示這個網址的縮略圖。

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。

1.3 取值

用jquery取textarea的值，我們用的是val，但div我們用val是取不到值的。雖然我們可以用html來取到所有內容，但對於文本來說用text取到的值更簡潔；只有要取截屏圖片時，才用html，於是寫成這樣：

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

 

1.4 效果圖

 

作者：瘋吻IT 出處：http://fengwenit.cnblogs.com

 

2 根據網址生成縮略圖

2.1 效果圖

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

 

2.2 實現

先判斷是不是link, 如果是link，就生成一個iframe:

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。

 

2.3 細節處理

最開始，為了讓接收到的消息都在最下面，因為消息多了，會有滾動條，所以每收到消息后，會設置收消息的控件div的scrollTop：

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);

調用 generate() 方法即可生成。

 

 一步一步搭建客服系統

 

 

.