離屏Canvas——製作水印圖片

一喵嗚發表於2015-08-24
Canvas
<!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>



相關文章