最近做vue專案的時候,需要要求要在頁面中新增水印的效果,網上找了一些方法,具體操作如下:
(1)頁面中新增乙個檔案比如 watermark.ts, **如下:
const watermark: any = {};
const setwatermark = (str: any) =>
const can = document.createelement('canvas');
can.width = 400;
can.height = 200;
const cans: any = can.getcontext('2d');
cans.rotate((-30 * math.pi) / 180); // 畫布裡面文字的旋轉角度
cans.font = '12px microsoft jhenghei'; // 畫布裡面文字的字型
cans.fillstyle = 'rgba(17, 17, 17, 0.3)'; // 畫布裡面文字的顏色
cans.textalign = 'center'; // 畫布裡面文字的水平位置
cans.textbaseline = 'hanging'; // 畫布裡面文字的垂直位置
cans.lineheight = 400;
cans.filltext(str, can.width / 3, can.height / 2); // 畫布裡面文字的間距比例
const div = document.createelement('div');
div.id = id;
div.style.pointerevents = 'none';
div.style.overflow = 'hidden';
div.style.opacity = '0.3';
div.style.top = '64px';
div.style.left = '0px';
div.style.position = 'fixed';
div.style.zindex = '99999999';
div.style.width = document.documentelement.clientwidth + 'px';
div.style.height = document.documentelement.clientheight + 'px';
div.style.background = `url($) repeat`;
return id;
};// 該方法只允許呼叫一次
watermark.set = (str: any) =>
}, 2000);
window.onresize = () => ;
};export default watermark;
(2)在要使用的地方引入並使用即可:
// layout.vue
import watermark from './mark';
mounted() - $`);
}
js為頁面元素新增水印
近期有需求為頁面部分區域新增上水印,通過在網上找到了js為頁面新增水印的方法,後來經過自己的改進,可以實現為頁面部分元素新增水印,最終效果如下圖 如下 function watermark settings 採用配置項替換預設值,作用類似jquery.extend if arguments.leng...
vue 頁面新增水印的方法
1 建立乙個watermark.js檔案 let watermark let setwatermark str 建立乙個畫布 let can document.createelement canvas 設定畫布的長寬 can.width 220 can.height 220 let cans can...
iOS 新增水印
新增水印,這個需求要求調研時,因為是新的技術點,查閱了一些資料。資料中統統都說 獲取介面的rgb值,將需要加密的資訊翻譯成二進位制,通過位運算,新增到每個rgb值的二進位制末尾實現。解碼時線取介面的rgb二進位制值,通過位運算,得出加密資訊的二進位制即可。網上給了一些獲得介面rgb的方法,我按照其方...