<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>生成logo水印 - 趣味笔记</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<style>
body
{
width:96%;
height:800px;
border: 0;
margin: 0 auto;
background:#ffffff;
}
input,button
{
border:0;
}
.form-group {
margin-bottom: 15px;
}
.content{padding:0;margin: 0 auto;}
.btn {
padding: 5px;
border: none;
background-color:#3bb4f2;
color: #bcedff;
text-align: center;
border-radius: 0.2rem;
margin: 0.2rem auto;
font-weight: 600;
font-size: 1.2rem;
}
.hui:hover , btn:hover{width: 150px; color: #fff;background-color:#3bb4f2;}
.hui { background-color: #ddd;color: #bbb;}
.tt{border:2px solid rgba(0, 0, 0, 0.1);border-radius:5px;width: 100%;padding:10px 10px;resize: none;}
input[type="text"] {
width:100%;
border-radius: 3px;
border: 1px solid #c8cccf;
background-color:#fff;
color: #6a6f77;
outline: 0;
}
#cvs{width:100%;height:auto;}
</style>
</head>
<body>
<script>
//绑定输入框对象
function watermark(){
var wzlogo = document.getElementById("wzlogo").value;
var wzlogow = document.getElementById("wzlogow").value;
var wzlogoh = document.getElementById("wzlogoh").value;
var logofont = document.getElementById("logofont").value;
var str =wzlogo;
var w =wzlogow;
var h =wzlogoh;
var zt =logofont;
var imgl = document.getElementById("imgl").value;
var imgr = document.getElementById("imgr").value;
var l =imgl;
var r =imgr;
//var tp ='<image src='+img+'></image>';
var img = document.getElementById("img");
var canvas=document.getElementById("cvs");
var ctx=canvas.getContext("2d");
ctx.drawImage(img,l,r);//图片左右偏移
ctx.font=zt;
ctx.fillStyle = "rgba(255,255,255,0.5)";
ctx.fillText (str,w,h);//logo位置
}
</script>
<div class="content">
<div class="form-group">
<canvas name="cvs" id="cvs">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>
<div class="form-group">
<input type="text" class="tt" name="logofont" id="logofont" value="14px microsoft yahei" placeholder="设置字体">
</div>
<div class="form-group">
<input type="text" class="tt" name="wzlogo" id="wzlogo" value="@趣味笔记" placeholder="文字logo">
</div>
<div class="form-group">
<input type="text" class="tt" name="wzlogow" id="wzlogow" value="160" placeholder="logo宽度">
</div>
<div class="form-group">
<input type="text" class="tt" name="wzlogoh" id="wzlogoh" value="145" placeholder="logo高度">
</div>
<div class="form-group">
<input type="text" class="tt" name="imgl" id="imgl" value="0" placeholder="背景图左偏移">
</div>
<div class="form-group">
<input type="text" class="tt" name="imgr" id="imgr" value="0" placeholder="背景图右偏移">
</div>
<div class="form-group">
<button class="btn" onclick="watermark()">生成图片</button>
</div>
<div class="form-group"><p>预览图：</p>
<a href="cvs" download="" id="download">
<image id="img" src="http://www.qw980.cn/tu/thumbs/2019/181028_21a24_236.jpg" width="80" ></image>
</a>
</div>
</div>
</body>
</html>
<script>
var dataURL = canvas.toDataURL("image/png");
var a = document.getElementById("download");
a.setAttribute("href",dataURL);
</script>
