您的位置：首页 > 编程语言

利用canvas添加图片水印--直接上代码

2016-01-13 12:46 555 查看

<!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>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航