使用html2canvans截图的页面如何添加水印样式给图片

要给使用html2canvas截图的页面添加水印样式，可以通过以下步骤实现：

1. 在需要添加水印的图片上叠加一个水印图层，可以使用CSS的伪元素:before或:after来实现。例如：

.watermark:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('watermark.png');
    opacity: 0.5; /* 设置水印透明度 */
}

2. 在使用html2canvas截图的时候，将需要添加水印的元素的class设置成上面定义的class。例如：

html2canvas(document.querySelector(".watermark")).then(canvas => {
    // 处理截图
});

这样，html2canvas就会将水印图层也一同截取到，实现了给截图添加水印的效果。

需要注意的是，由于水印图层是通过CSS的伪元素来实现的，所以在使用html2canvas截图时需要将`useCORS`选项设置为`true`，否则可能会出现跨域问题。例如：

html2canvas(document.querySelector(".watermark"), {
    useCORS: true
}).then(canvas => {
    // 处理截图
});