离屏Canvas——制作水印图片

最新推荐文章于 2024-03-19 19:14:06 发布

一喵呜

最新推荐文章于 2024-03-19 19:14:06 发布

阅读量3k

点赞数 1

分类专栏： HTMl5 CSS3

本文链接：https://blog.csdn.net/html5_/article/details/47951221

版权

HTMl5 同时被 2 个专栏收录

81 篇文章 0 订阅

订阅专栏

CSS3

35 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body style="background: black;">

    <canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #aaa;">
        您的浏览器尚不支持canvas
    </canvas>
    <input type="range" id="scale-range" min="0.5" max="3.0" step="0.01" value="1.0" style="display:block;margin:20px auto;width:800px"/>

    <canvas id="watermark-canvas" style="display:none;margin:0 auto;border:1px solid #aaa;">
        您的浏览器尚不支持canvas
    </canvas>

    <script>
        var canvas = document.getElementById("canvas")
        var context = canvas.getContext("2d")
        var slider = document.getElementById("scale-range")

        var watermarkCanvas = document.getElementById("watermark-canvas")
        var watermarkContext = watermarkCanvas.getContext("2d")

        window.onload = function(){

            canvas.width = 1152
            canvas.height = 768

            var image = new Image()
            var scale = 1.0
            image.src = "img-lg.jpg"
            image.onload = function(){
                drawImage( image , scale )

                slider.onmousemove = function(){
                    scale = slider.value
                    drawImage( image , scale )
                }
            }

            //setup watermark canvas
            watermarkCanvas.width = 600
            watermarkCanvas.height = 100

            watermarkContext.font = "bold 50px Arial"
            watermarkContext.lineWidth = "1"
            watermarkContext.fillStyle = "rgba( 255 , 255 , 255 , 0.5 )"
            watermarkContext.textBaseline = "middle";
            watermarkContext.fillText( "HTML5自由者" , 20 , 50 )
        }

        function drawImage( image , scale ){

            imageWidth = 1152 * scale
            imageHeight = 768 * scale
            x = canvas.width /2 - imageWidth / 2
            y = canvas.height / 2 - imageHeight / 2

            context.clearRect( 0 , 0 , canvas.width , canvas.height )
            context.drawImage( image , x , y , imageWidth , imageHeight )
            context.drawImage( watermarkCanvas , canvas.width - watermarkCanvas.width ,
                                                  canvas.height - watermarkCanvas.height )
        }


    </script>
</body>
</html>

一喵呜

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
离屏Canvas——制作水印图片

您的浏览器尚不支持canvas 您的浏览器尚不支持canvas var canvas = document.getElementById("canvas") var context = canvas.getContext("2d") var slider = document.ge
复制链接

扫一扫