vue 页面添加水印

原创

已于 2023-06-02 08:52:46 修改 · 276 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

于 2023-06-02 08:51:33 首次发布

这篇博客介绍了如何在Vue项目中使用JavaScript实现页面水印功能，包括详细讲解水印js文件的创建以及如何在Vue组件中引入和调用水印功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

水印shuiyin.js文件

function watermark(text,container,settings) {
   
   
    //默认设置
    var defaultSettings = {
   
   
        watermark_txt: text,
        watermark_x: 20, //水印起始位置x轴坐标
        watermark_y: 60, //水印起始位置Y轴坐标
        watermark_rows: 20, //水印行数
        watermark_cols: 20, //水印列数
        watermark_x_space: 100, //水印x轴间隔
        watermark_y_space: 50, //水印y轴间隔
        watermark_color: '#aaa', //水印字体颜色
        watermark_alpha: 0.3, //水印透明度
        watermark_fontsize: '18px', //水印字体大小
        watermark_font: '微软雅黑', //水印字体
        watermark_width: 400, //水印宽度
        watermark_height: 80, //水印长度
        watermark_angle: 20 //水印倾斜度数
    };
    //采用配置项替换默认值，作用类似jquery.extend
    if(arguments.length===1&&typeof arguments[0] ==="object" )
    {
   
   
        var src=arguments[0]||{
   
   };
        for(key in src)
        {
   
   
            if