<!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>
浏览中，图片另存为即可。