摘要:在網站瀏覽中,常常需要網頁水印,以便防止用戶截圖或錄屏暴露敏感信息后,追蹤用戶來源。如我們常用的釘釘軟件,聊天背景就會有你的名字。
在網站瀏覽中,常常需要網頁水印,以便防止用戶截圖或錄屏暴露敏感信息后,追蹤用戶來源。如我們常用的釘釘軟件,聊天背景就會有你的名字。那么如何實現網頁水印效果呢?
網頁水印SDK,實現思路1.能更具獲取到的當前用戶信息,如名字,昵稱,ID等,生成水印
2.生成一個Canvas,覆蓋整個窗口,并且不影響其他元素
3.可以修改字體間距,大小,顏色
4.不依賴Jquery
5.需要防止用戶手動刪除這個Canvas
size: 字體大小 color: 字體顏色 id: canvasId text: 文本內容 density: 間距 clarity: 清晰度 supportTip: Canvas不支持的文字提示生成Canvas
根據id生成Canvas,畫布大小為window.screen大小,若存在原有老的Canvas,清除并重新生成。
畫布固定定位在可視窗口,z-index為-1
let body = document.getElementsByTagName("body"); let canvas = document.createElement("canvas"); canvas.style.cssText= "position: fixed;width: 100%;height: 100%;left:0;top:0;z-index: -1;"; body[0].appendChild(canvas);指紋生成算法
let canvas = document.getElementById(this.params.id); let cxt = canvas.getContext("2d"); let times = window.screen.width * this.params.clarity / this.params.density;//橫向文字填充次數 let heightTimes = window.screen.height * this.params.clarity * 1.5/ this.params.density; //縱向文字填充次數 cxt.rotate(-15*Math.PI/180); //傾斜畫布 for(let i = 0; i < times; i++) { for(let j = 0; j < heightTimes; j++) { cxt.fillStyle = this.params.color; cxt.font = this.params.size + " Arial"; cxt.fillText(this.params.text, this.params.density*i, j*this.params.density); } }防止用戶刪除
使用定時器,定時檢查指紋是否存在
let self = this; window.setInterval(function(){ if (!document.getElementById(self.params.id)) { self._init(); } }, 1000);項目編譯
使用glup編譯
var gulp = require("gulp"), uglify = require("gulp-uglify"), babel = require("gulp-babel"); gulp.task("minify", function () { return gulp.src("./src/index.js") // 要壓縮的js文件 .pipe(babel()) .pipe(uglify()) .pipe(gulp.dest("./dist")); //壓縮后的路徑 });指紋效果 效果地址
https://tianshengjie.cn/apps/...
項目地址Github: https://github.com/Jay-tian/w...
Npm包: https://www.npmjs.com/package...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/101846.html
摘要:目前視頻的采集源主要來自攝像頭采集屏幕錄制從視頻文件讀取推流。音視頻處理前處理模塊也是主觀影響主播觀看效果最主要的環節。用戶停止直播,反初始化,銷毀線程。跳幀可以有效的解決用戶在網絡不好的情況下,直播卡頓的問題。 隨著網絡基礎建設的發展和資費的下降,在這個內容消費升級的時代,文字、圖片無法滿足人們對視覺的需求,因此視頻直播應運而生。承載了實時性Real-Time和交互性的直播云服務是直...
摘要:拍照黨福利駕到華為云微認證教你實現圖片壓縮和水印添加在手機拍照成為日常的今天,用照片記錄生活已成為人們的一種習慣。華為云微認證將總共送出個免費機會,獎項公布時間月日。 拍照黨福利駕到 華為云微認證教你實現圖片壓縮和水印添加 在手機拍照成為日常的今天,用照片記錄生活已成為人們的一種習慣。拍照容易處理難,面對手機相冊中大量的照片,你是否也苦惱過?刪,舍不得;上傳,會不會被盜圖?能否發出足夠...
閱讀 2233·2021-09-23 11:52
閱讀 1899·2021-09-02 15:41
閱讀 3018·2019-08-30 10:47
閱讀 1984·2019-08-29 17:14
閱讀 2337·2019-08-29 16:16
閱讀 3192·2019-08-28 18:29
閱讀 3418·2019-08-26 13:30
閱讀 2610·2019-08-26 10:49