利用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>
    <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 watermarkCanvas = document.getElementById("watermark-canvas");
        var watermarkContext = watermarkCanvas.getContext("2d");

        window.onload = function(){

            canvas.width = 600;
            canvas.height = 750;

            var image = new Image();
            image.src = "wx.jpg"; //这里填写图片路径
            image.onload = function(){
             context.drawImage(image,0,0,canvas.width,canvas.height);
             context.drawImage(watermarkCanvas,canvas.width - watermarkCanvas.width,canvas.height - watermarkCanvas.height);
            }

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

            watermarkContext.font = "bold 30px Arial";
            watermarkContext.lineWidth = "1";
            watermarkContext.fillStyle = "rgba( 255 , 255 , 255 , 0.5 )";
            watermarkContext.textBaseline = "middle";
            watermarkContext.fillText( "水印文字" , 20 , 50 );
        }
    </script>
</body>
</html>

浏览中，图片另存为即可。