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

阳光穿透心脏的1/2处 2021-09-11 08:24 486阅读 0赞

![20170301160019290][]

从上一章 [ canvas系列--图像处理(三) 图像缩放][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>

[20170301160019290]: /images/20210813/a5976679903a42b780f9c90309f2520b.png
[canvas_--_]: http://blog.csdn.net/gao_xu_520/article/details/59105804