使用图片作为平台水印

### 使用Canvas生成图片水印

在Web应用程序中，添加图片水印是一种常见的需求，它可以为网站或应用程序提供个性化的品牌效果。本文将介绍如何使用Canvas在页面上生成图片水印，并将其作为背景应用于整个页面。

#### HTML结构

我们在HTML中定义了一个Canvas元素，用于绘制图片水印。

```html

<canvas id="watermark-canvas" class="watermark-canvas" width="100%" height="100%"></canvas>

```

#### TypeScript逻辑

在TypeScript中，我们在组件初始化时调用`init()`方法，该方法用于初始化Canvas并绘制图片水印。我们加载水印图片，等待图片加载完成后，将其绘制在Canvas上，并将Canvas转换为DataURL，作为背景应用于整个页面。

```typescript

ngOnInit(): void {
    this.init();
}

init() {
    const canvas = document.getElementById('watermark-canvas') as HTMLCanvasElement;
    const context =  canvas.getContext('2d');
    const image = new Image();
    image.src = "watermark_logo.png";
    image.onload = () => {
        if (context) {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            context.drawImage(image, 0, 0, canvas.width, canvas.height);
            document.body.style.backgroundImage = `url('${canvas.toDataURL()}')`;
        }
    };
}

#### CSS样式

在CSS中，我们对Canvas进行了定位和样式设置，确保水印覆盖整个页面并具有一定的透明度。

```scss
 

:host {
    .audit-watermark-canvas {
        position: fixed;
        top: 0;
        left: 0;
        opacity: 0.5; /* 设置水印透明度 */
        pointer-events: none; /* 禁止Canvas接收鼠标事件，避免干扰页面交互 */
    }
}

#### 实现效果

#### 总结

通过使用Canvas技术，我们可以轻松地在页面上生成图片水印。这种方法灵活性高，可以根据实际需求调整水印的位置、大小和透明度，同时不会对页面结构产生影响。添加图片水印可以为网站或应用程序增添个性化效果，提升用户体验。