forked from zsxeee/watermark-helper
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwatermark-helper.min.html
1 lines (1 loc) · 2.16 KB
/
watermark-helper.min.html
1
<!DOCTYPE html><html lang=zh><head><meta charset=UTF-8><title>水印助手</title><meta content="width=device-width,initial-scale=1" name=viewport><style>body{margin:auto;max-width:60vh}img{border:3px solid #2c3e50;border-radius:5px;width:100%;box-sizing:border-box}canvas{width:100%;height:0}a,label{display:flex;align-items:center;margin-top:8px}</style></head><body><canvas></canvas><div><input id=upload-input type=file accept=image/*><label>水印文字： <input id=content type=text value=仅供XX实名认证使用></label><label>水印颜色： <input id=color type=color value=#ffffff></label><label>不透明度： <input id=alpha type=range value=50 max=100 min=10></label><label>水印大小比： <input id=size type=range value=5 max=10 min=3></label><label>水印间隔比： <input id=gap type=range value=150 max=300 min=20></label><label>水印字体： <input id=font type=text value=sans-serif></label><a download href="javascript:alert('请先打开图片')">保存图片</a></div><script>var img=null;function repaint(){if(img){var e=document.getElementsByTagName("canvas")[0].getContext("2d");e.canvas.width=img.width,e.canvas.height=img.height;var t=Math.max(img.height,img.width);e.canvas.style.height=img.height/img.width*100+"%",e.restore(),e.drawImage(img,0,0),e.fillStyle=document.getElementById("color").value,e.globalAlpha=document.getElementById("alpha").value/100;var a=document.getElementById("size").value*t/100;e.font=a+'px "'+document.getElementById("font").value+'"',e.textBaseline="middle",e.rotate(-45*Math.PI/180);var n=a*document.getElementById("gap").value/100,i=document.getElementById("content").value;if(i.length){for(var m=Math.sqrt(t*t*2),l=e.measureText(i).width,g=-t,r=!1;g<=m;g+=a+n,r=!r)for(var d=-t-(r?l/2:0);d<=m+(r?l/2:0);d+=l+a)e.fillText(i,d,g);document.getElementsByTagName("a")[0].href=e.canvas.toDataURL()}}}function createBitmap(e,t){var a=document.createElement("img");a.addEventListener("load",function(){t(this)}),a.src=URL.createObjectURL(e)}document.addEventListener("change",function(e){if("file"===e.target.type){if(!e.target.files.length)return;createBitmap(e.target.files[0],function(e){img=e,repaint()})}else repaint()})</script></body></html>