canvas系列--图像处理(四) 图像添加水印-蒲公英云

canvas系列--图像处理(四) 图像添加水印

20170301160019290

从上一章 canvas系列—图像处理(三) 图像缩放的列子来说

一.知识点

1.要清楚理解drawImage() 方法，了解drawImage() 方法在画布上可以绘制图像、画布或视频

context.drawImage(canvas,x,y,width,height);

2.在canvas中绘制文本的方法:

Context.font = “bold 50px Arial”;

context.fillText(text,x,y,maxWidth);

//text画布上输出的文本。x,y绘制文本的坐标位置 maxWidth允许的最大文本宽度

二.代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{
            background: black;
        }
        #scale-range{
            display:block;
            margin:20px auto;
            width:800px;
        }
        #canvas{
            display:block;
            margin:0 auto;
            border:1px solid #aaa;
        }
        #watermark-canvas{
            display:none;margin:0 auto;border:1px solid #aaa;
        }
    </style>
</head>
<body>
    <canvas id="canvas">您的浏览器尚不支持canvas</canvas>
    <input type="range" id="scale-range" min="0.5" max="3.0" step="0.01" value="1.0" />
    <canvas id="watermark-canvas">您的浏览器尚不支持canvas</canvas>
    <script>
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        var slider = document.getElementById("scale-range");
        var image = new Image();
        var imgW=1024;
        var imgH=750;
        canvas.width = 1024;
        canvas.height = 750;
        var watermarkCanvas = document.getElementById("watermark-canvas");
        var watermarkContext = watermarkCanvas.getContext("2d");
        window.onload = function(){
            var scale = slider.value;
            image.src = "timg.jpg";
            image.onload = function(){
                drawImage( image , scale );
                slider.onmousemove = function(){
                    scale = slider.value;
                    drawImage( image , scale );
                }
            }
            //绘制水印的文字
            watermarkCanvas.width = 400;
            watermarkCanvas.height = 100;
            watermarkContext.font = "bold 50px Arial";
            watermarkContext.lineWidth = "1";
            watermarkContext.fillStyle = "#f00";
            watermarkContext.textBaseline = "middle";
            watermarkContext.fillText( "水印文字" , 20 , 50 );
        }
        function drawImage( image , scale ){
            var imageWidth = imgW * scale; //imgW，imgH是图片的大小
            var imageHeight =imgH * 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 );
            if(scale<1){
                context.drawImage(watermarkCanvas,imageWidth -watermarkCanvas.width+x,imageHeight-watermarkCanvas.height+y);//缩放比例小于1时，图片小于canvas画布，用图片的宽高减去水印的宽高+图片在画布中的宽高就可以固定水印在右下角
            }else{
                //用画布的宽高-水印的宽高，就可以固定水印在右下角
                context.drawImage(watermarkCanvas,canvas.width-watermarkCanvas.width,canvas.height-watermarkCanvas.height);
            }
        }
    </script>
</body>
</html>