图片水印平铺工具
简介

图片水印平铺工具

在线文本工具箱

文本去重,文本分割,文本筛选,文本个性化处理.

进入
查询小工具

实用查询,在线计算器,小工具.

进入
 

Copyright © 2015 在线图片工具大全 All Rights Reserved

执行时间: 0.0076441764831543 seconds

require(["vue","layers","colorPicker"],function(a){app=new a({el:"#app",data:{dragTip:"请点击选择图片或将图片拖到此处",initStatus:false,imgName:"",imgWidth:0,imgHeight:0,base64Img:null,fontFamilyArr:{"Microsoft YaHei":"微软雅黑","黑体":"黑体","宋体":"宋体",KaiTi:"楷体","sans-serif":"sans-serif",Arial:"Arial"},config:{width:0,height:0,text:"仅限用于办理xx业务",opacity:0.6,fontSize:20,rotate:20,fontFamily:"Microsoft YaHei",color:"0,0,0"}},watch:{config:{handler:function(c,b){if(this.initStatus){this.reDraw()}},deep:true}},methods:{reset:function(){this.nameStr="";this.askedArr=""},reDraw:function(){var c=this;var b=new Image();b.src=this.base64Img;b.onload=function(){if(0==c.config.width){c.imgWidth=b.width;c.imgHeigh=b.height;c.config.width=parseInt(b.width*0.4);c.config.height=parseInt(b.height*0.4);c.initStatus=true;return}var i='';var e=$(i)[0];var d=e.getContext("2d");d.font=c.config.fontSize+"px "+c.config.fontFamily;d.rotate(-c.config.rotate*Math.PI/180);d.fillStyle="rgba("+c.config.color+","+c.config.opacity+")";d.fillText(c.config.text,-(b.height*0.01),(b.height*0.2));d.rotate(c.config.rotate*Math.PI/180);var h='';var g=$(h)[0];var d=g.getContext("2d");d.drawImage(b,0,0);var f=d.createPattern(e,"repeat");d.rect(0,0,150,100);d.fillStyle=f;d.fillRect(0,0,b.width,b.height);$("#imgBox").html(g);layer.msg("处理完毕")}},initDragFile:function(){var e=this;var d=document.getElementById("imgBox");if(!d.addEventListener){return}var g=function(k){if(0==k.length){layer.msg("没有需要处理的文件");return}var j=k[0];e.imgName=j.name.substring(0,j.name.lastIndexOf("."));if(-1==j.type.indexOf("image")){layer.msg("仅支持图片文件哦",{icon:5});return}var i=new FileReader();i.readAsDataURL(j);i.onload=function(l){e.base64Img=this.result;$("#imgBox").html("").removeClass("drag-box").css("height","auto").css("padding",0);e.reDraw()}};var b=function(i){g(i.target.files)};var h=function(i){i.stopPropagation();i.preventDefault();g(i.dataTransfer.files)};var c=function(i){e.dragTip="请松开鼠标以读取数据";if("undefined"!=typeof dragTimeout){clearTimeout(dragTimeout)}dragTimeout=setTimeout(function(){e.dragTip="请点击选择图片或将图片拖到此处"},1000);i.stopPropagation();i.preventDefault();i.dataTransfer.dropEffect="copy"};d.addEventListener("dragenter",c,false);d.addEventListener("dragover",c,false);d.addEventListener("drop",h,false);var f=document.getElementById("filePicker");f.addEventListener("change",b,false)},download:function(){var b=this;if(null==this.base64Img){layer.msg("请上传图片后重试",{icon:5});return}require(["fileSaver"],function(){var c=$("#imgCanvas")[0];c.toBlob(function(d){saveAs(d,b.imgName+"-水印.jpg")})})}},mounted:function(){var b=this;if(!window.FileReader){layer.alert("您的浏览器可能不支持")}this.initDragFile();var c=$(".js-color-picker").colpick({submitText:"确定",layout:"rgbhex",onSubmit:function(d,f,e){b.config.color=e.r+","+e.g+","+e.b;c.colpickHide()}})}})});