图片水印使用svg
考试系统需要在试卷中添加水印背景,文本为学员姓名,倾斜并重复铺满试卷背景,此处选择svg做图片处理
const svgStr = `<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300"> <text x="0" y="200" text-anchor="middle" fill="#ccc" fill-opacity="0.3" transform="rotate(-45, 30 0)" style="font-size: 30px;"\ >{content}</text> </svg>` const watermark = `url("data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent( svgStr.replace(/\{content\}/g, watermarkName) )))}")` document.querySelector('.examPaperView').style.backgroundImage = watermark