PDF.js 預(yù)覽添加水印

效果圖:

簡書

只需要在 viewer.js 和 viewer.css 里面修改即可

viewer.js (約7180行):

                    var _this = this;

                    if (this.renderingState !== _pdf_rendering_queue.RenderingStates.INITIAL) {
                        console.error('Must be in new state before drawing');
                        this.reset();
                    }
                    if (!this.pdfPage) {
                        this.renderingState = _pdf_rendering_queue.RenderingStates.FINISHED;
                        return Promise.reject(new Error('Page is not loaded'));
                    }
                    this.renderingState = _pdf_rendering_queue.RenderingStates.RUNNING;
                    var pdfPage = this.pdfPage;
                    var div = this.div;
                    var canvasWrapper = document.createElement('div');
                    canvasWrapper.style.width = div.style.width;
                    canvasWrapper.style.height = div.style.height;
                    canvasWrapper.classList.add('canvasWrapper');
                    if (this.annotationLayer && this.annotationLayer.div) {
                        div.insertBefore(canvasWrapper, this.annotationLayer.div);
                    } else {
                        div.appendChild(canvasWrapper);
                    }
                    var textLayer = null;
                    if (this.textLayerFactory) {
                        var textLayerDiv = document.createElement('div');
                        textLayerDiv.className = 'textLayer';
                        textLayerDiv.style.width = canvasWrapper.style.width;
                        textLayerDiv.style.height = canvasWrapper.style.height;
   //從這里開始
                        var cover = document.createElement('div');
                        cover.className = "cover";
                        var defaultSettings = {
                            watermark_txt: "簡書",
                            watermark_x: 0,//水印起始位置x軸坐標
                            watermark_y: 0,//水印起始位置Y軸坐標
                            watermark_rows: 30,//水印行數(shù)
                            watermark_cols: 100,//水印列數(shù)
                            watermark_x_space: 10,//水印x軸間隔
                            watermark_y_space: 10,//水印y軸間隔
                            watermark_color: 'red',//水印字體顏色
                            watermark_alpha: 0.3,//水印透明度
                            watermark_fontsize: '20px',//水印字體大小
                            watermark_font: '微軟雅黑',//水印字體
                            watermark_width: 120,//水印寬度
                            watermark_height: 80,//水印長度
                            watermark_angle: 45//水印傾斜度數(shù)
                        };
                        var oTemp = document.createDocumentFragment();

                        //獲取頁面最大寬度
                        var page_width = Math.max(document.body.scrollWidth, document.body.clientWidth);
                        //獲取頁面最大長度
                        var page_height = Math.max(document.body.scrollHeight, document.body.clientHeight);
                        //如果將水印列數(shù)設(shè)置為0公壤,或水印列數(shù)設(shè)置過大废离,超過頁面最大寬度,則重新計算水印列數(shù)和水印x軸間隔
                        if (defaultSettings.watermark_cols == 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) > page_width)) {
                            defaultSettings.watermark_cols = parseInt((page_width - defaultSettings.watermark_x + defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space));
                            defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1));
                        }
                        //如果將水印行數(shù)設(shè)置為0,或水印行數(shù)設(shè)置過大嫂侍,超過頁面最大長度炒瘟,則重新計算水印行數(shù)和水印y軸間隔
                        if (defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) > page_height)) {
                            defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space));
                            defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1));
                        }
                        var x;
                        var y;
                        for (var i = 0; i < defaultSettings.watermark_rows; i++) {
                            y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
                            for (var j = 0; j < defaultSettings.watermark_cols; j++) {
                                x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;

                                var mask_div = document.createElement('div');
                                mask_div.id = 'mask_div' + i + j;
                                mask_div.className = 'mask_div';
                                mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
                                //設(shè)置水印div傾斜顯示
                                mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                                mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                                mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                                mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                                mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                                mask_div.style.visibility = "";
                                mask_div.style.position = "absolute";
                                //奇偶行錯開,這樣水印就不對齊凡怎,顯的不呆板
                                if (i % 2 != 0) {
                                    mask_div.style.left = x + 100 + 'px';
                                } else {
                                    mask_div.style.left = x + 'px';
                                }
                                mask_div.style.top = y + 'px';
                                mask_div.style.overflow = "hidden";
                                mask_div.style.opacity = defaultSettings.watermark_alpha;
                                mask_div.style.fontSize = defaultSettings.watermark_fontsize;
                                mask_div.style.fontFamily = defaultSettings.watermark_font;
                                mask_div.style.color = defaultSettings.watermark_color;
                                mask_div.style.textAlign = "center";
                                mask_div.style.width = canvasWrapper.style.width + 'px';
                                mask_div.style.height = canvasWrapper.style.height + 'px';
                                mask_div.style.display = "block";
                                oTemp.appendChild(mask_div);
                            }
                        }
                        cover.appendChild(oTemp);
//這里結(jié)束
                        if (this.annotationLayer && this.annotationLayer.div) {
                            div.insertBefore(textLayerDiv, this.annotationLayer.div);

//不要忘記這里
                            div.appendChild(cover);

                        } else {
                            div.appendChild(textLayerDiv);
//還有這里
                            div.appendChild(cover);
                        }
                        textLayer = this.textLayerFactory.createTextLayerBuilder(textLayerDiv, this.id - 1, this.viewport, this.enhanceTextSelection);
//這里悉稠。宫蛆。
                        var cover = document.getElementsByClassName('cover');
                        for (var i = 0, len = cover.length; i < len; i++) {
                            cover[i].style.width = canvasWrapper.style.width;
                            cover[i].style.height = canvasWrapper.style.height;
                        }
                    }
                    this.textLayer = textLayer;
                    var renderContinueCallback = null;

css:

.cover{
 position:absolute;
 top:0;
overflow:hidden
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市的猛,隨后出現(xiàn)的幾起案子洒扎,更是在濱河造成了極大的恐慌,老刑警劉巖衰絮,帶你破解...
    沈念sama閱讀 211,817評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件袍冷,死亡現(xiàn)場離奇詭異,居然都是意外死亡猫牡,警方通過查閱死者的電腦和手機胡诗,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來淌友,“玉大人煌恢,你說我怎么就攤上這事≌鹜ィ” “怎么了瑰抵?”我有些...
    開封第一講書人閱讀 157,354評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長器联。 經(jīng)常有香客問我二汛,道長,這世上最難降的妖魔是什么拨拓? 我笑而不...
    開封第一講書人閱讀 56,498評論 1 284
  • 正文 為了忘掉前任肴颊,我火速辦了婚禮,結(jié)果婚禮上渣磷,老公的妹妹穿的比我還像新娘婿着。我一直安慰自己,他們只是感情好醋界,可當我...
    茶點故事閱讀 65,600評論 6 386
  • 文/花漫 我一把揭開白布竟宋。 她就那樣靜靜地躺著,像睡著了一般形纺。 火紅的嫁衣襯著肌膚如雪丘侠。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,829評論 1 290
  • 那天挡篓,我揣著相機與錄音婉陷,去河邊找鬼帚称。 笑死官研,一個胖子當著我的面吹牛秽澳,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播戏羽,決...
    沈念sama閱讀 38,979評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼担神,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了始花?” 一聲冷哼從身側(cè)響起妄讯,我...
    開封第一講書人閱讀 37,722評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎酷宵,沒想到半個月后亥贸,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,189評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡浇垦,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,519評論 2 327
  • 正文 我和宋清朗相戀三年炕置,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片男韧。...
    茶點故事閱讀 38,654評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡朴摊,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出此虑,到底是詐尸還是另有隱情甚纲,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布朦前,位于F島的核電站介杆,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏韭寸。R本人自食惡果不足惜这溅,卻給世界環(huán)境...
    茶點故事閱讀 39,940評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望棒仍。 院中可真熱鬧悲靴,春花似錦、人聲如沸莫其。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽乱陡。三九已至浇揩,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間憨颠,已是汗流浹背胳徽。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評論 1 266
  • 我被黑心中介騙來泰國打工积锅, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人养盗。 一個月前我還...
    沈念sama閱讀 46,382評論 2 360
  • 正文 我出身青樓缚陷,卻偏偏與公主長得像,于是被迫代替她去往敵國和親往核。 傳聞我的和親對象是個殘疾皇子箫爷,可洞房花燭夜當晚...
    茶點故事閱讀 43,543評論 2 349

推薦閱讀更多精彩內(nèi)容