2020-10-12

最新推荐文章于 2021-10-08 09:27:20 发布

Tao971481145

最新推荐文章于 2021-10-08 09:27:20 发布

阅读量117

点赞数 1

分类专栏：实现水印功能文章标签： canvas js html css

原文链接：https://blog.csdn.net/wangyoucaoxiaoxiao/article/details/93484963

版权

实现水印功能专栏收录该内容

1 篇文章 0 订阅

订阅专栏

水印功能实现

思路：使用canvas制作一个水印图片然后做为页面的背景色上下左右平铺

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <div>
        <a href="https://www.baidu.com/">百度一下,你就知道!</a>
        <div class="c-circle">343343</div>
        <div class="c-triangle">3433</div>
        <div class="c-dialog">sdsds</div>
        <div class="c-diamond">dsds</div>
        <div class="c-parallelogram">dsds</div>
        <div class="c-star">dsd</div>
    </div>
</body>
    <script>
        (function () {
            // canvas  实现watermark
            function __canvasWM({
                // 使用ES6 的函数默认值方式设置参数的默认取值
                container = document.body,
                width = '200px',
                height = '150px',
                // 文本对齐方式
                textAlign = 'center',
                textBaseline = 'middle',
                // 文本大小格式
                font = '20px microsoft yehei',
                // 文本color
                fillStyle = 'rgba(184,184,184,0.8)',
                content = '水印',
                rotate = '30',
                zIndex = 1000
            } = {}) {
                var args = arguments[0]
                var canvas = document.createElement('canvas')

                canvas.setAttribute('width', width)
                canvas.setAttribute('height', height)
                var ctx = canvas.getContext('2d')
                
                ctx.textAlign = textAlign
                ctx.textBaseline = textBaseline;
                ctx.font = font
                ctx.fillStyle = fillStyle
                ctx.rotate(Math.PI / 180 * rotate)
                // parseFloat 可以解析一个字符串 并转换成浮点数
                // fillText 设置文本的位置
                ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 2)

                // 将图片转换成base64格式
                var base64Url = canvas.toDataURL();
                const watermarkDiv = document.createElement('div')
                watermarkDiv.setAttribute('style', `
                    position:absolute;
                    top:0;
                    left:0;
                    height:100%;
                    width:100%;
                    z-index:${zIndex};
                    pointer-events:none;
                    background-repeat:repeat;
                    background-image:url(${base64Url})`);
                container.style.position = 'relative'
                // insertBefore() 方法在您指定的已有子节点之前插入新的子节点。
                container.insertBefore(watermarkDiv, container.firstChild)
            }
            window.__canvasWM = __canvasWM
        })();
        __canvasWM({
            content: '水印效果'
        })
    </script>

</html>

Tao971481145

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-10-12

水印功能实现思路：使用canvas制作一个水印图片然后做为页面的背景色上下左右平铺<!DOCTYPE html><html lang="en"><head></head><body> <div> <a href="https://www.baidu.com/">百度一下,你就知道!</a> <div class="c-circle">34
复制链接

扫一扫