-
Notifications
You must be signed in to change notification settings - Fork 23
/
Copy pathwatermark-helper.min.html
1 lines (1 loc) · 2.71 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:0;height:0}a,label{display:flex;align-items:center;margin-top:8px}</style></head><body><canvas></canvas><img style=border:0><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=width type=number value=2048></label><label>图片质量： <input id=quality type=range value=80 max=100 min=1></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=angle type=range value=45 max=180 min=-180></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"),t=document.getElementById("width").value,a=img.height*t/img.width,n=(e.canvas.width=t,e.canvas.height=a,Math.max(a,t)),l=(e.restore(),e.drawImage(img,0,0,t,a),e.fillStyle=document.getElementById("color").value,e.globalAlpha=document.getElementById("alpha").value/100,document.getElementById("size").value*n/100),m=(e.font=l+'px "'+document.getElementById("font").value+'"',e.textBaseline="middle",e.rotate(document.getElementById("angle").value*Math.PI/180),l*document.getElementById("gap").value/100),i=document.getElementById("content").value;if(i.length){for(var d=Math.sqrt(n*n*2),g=e.measureText(i).width,c=-n,o=!1;c<=d;c+=l+m,o=!o)for(var r=-n-(o?g/2:0);r<=d+(o?g/2:0);r+=g+l)e.fillText(i,r,c);t=document.getElementById("quality").value;e.canvas.toBlob(e=>{var t=URL.createObjectURL(e),a=document.getElementsByTagName("a")[0];a.href=t,a.innerText=`保存图片（${Math.ceil(e.size/1024)}kb）`,document.getElementsByTagName("img")[0].src=t},"image/jpeg",t/100)}}}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){"file"===e.target.type?e.target.files.length&&(createBitmap(e=e.target.files[0],function(e){img=e,repaint()}),(e=e.name.split(".")).splice(-1,0,"watermarked"),document.getElementsByTagName("a")[0].download=e.join(".")):repaint()})</script></body></html>