<extend name="Public/base" /> <block name="body"> <link rel="stylesheet" href="__CSS__/watermark.css" type="text/css" /> <link rel="stylesheet" href="__CSS__/jquery.minicolors.css" type="text/css"> <link rel="stylesheet" href="__CSS__/nouislider.min.css" type="text/css"> <script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script> <div class="cf main-place top_nav_list navtab_list"> <h3 class="page_title">水印设置</h3> <p class="description_text">针对图片上水印的显示进行基本配置</p> </div> <div class="tab-wrap"> <div class="position_tip"> <div class="tip_rows"><span></span><span></span><span></span></div> <div class="tip_rows"><span></span><span class="current"><eq name="watermark.types" value="1"><i style="font-family:{:str_replace('.','',"'".$watermark['font']."'")};font-size:{$watermark.font_size}px;color:{$watermark.font_color};-webkit-filter:blur({-$watermark['quality']*5/100+5}px);-moz-filter:blur({-$watermark['quality']*5/100+5}px);-ms-filter:blur({-$watermark['quality']*5/100+5}px);filter:blur({-$watermark['quality']*5/100+5}px);progid:DXImageTransform.Microsoft.Blur(PixelRadius={-$watermark['quality']*5/100+5},MakeShadow=false)">{$watermark.font_text|default='----手游'}</i><else /><img src="<notempty name='watermark.icon'>{:get_cover($watermark['icon'],'path',0,false)}<else />__IMG__/icon_normal_picture.png</notempty>" height="70" width="90" style="opacity:{$watermark['transparency']/100};-webkit-filter:blur({-$watermark['quality']*5/100+5}px);-moz-filter:blur({-$watermark['quality']*5/100+5}px);-ms-filter:blur({-$watermark['quality']*5/100+5}px);filter:blur({-$watermark['quality']*5/100+5}px);progid:DXImageTransform.Microsoft.Blur(PixelRadius={-$watermark['quality']*5/100+5},MakeShadow=false)"></eq></span><span></span></div> <div class="tip_rows"><span></span><span></span><span></span></div> </div> <div class="tab-content tabcon1711 tabcon17112"> <div id="tab1" class="tab-pane in tab1"> <form action="{:U('saveTool')}" method="post" class="form-horizontal watermarkform form_info_ml"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="l noticeinfo">水印设置</td> <td class="r table_radio"> <div class="position_water"> <div class="position_rows"><span>左上</span><span>中上</span><span>右上</span></div> <div class="position_rows"><span>左中</span><span class="current">居中</span><span>右中</span></div> <div class="position_rows"><span>左下</span><span>中下</span><span>右下</span></div> </div> <span class="notice-text position_text" style="margin-left: 342px;">针对图片上水印的显示进行基本配置</span> <input type="hidden" id="position" name="config[position]" value="{$watermark['position']|default='1,1'}"> </td> </tr> <tr> <td class="l noticeinfo">水印类型</td> <td class="r table_radio"> <span class="form_radio"> <label> <input type="radio" name="config[types]" value="0" onclick="dr_type(0)" checked> 图片 </label> <label> <input type="radio" name="config[types]" value="1" onclick="dr_type(1)"> 文字 </label> </span> </td> </tr> <tr class="dr_sy dr_sy_1" style="<neq name='watermark.types' value='1'>display:none;</neq>"> <td class="l noticeinfo">文字字体</td> <td class="r table_radio"> <select name="config[font]"> <option value="1.ttf" selected="">字体1</option> <option value="2.ttf">字体2</option> <option value="3.ttf">字体3</option> </select> <span class="notice-text" style="margin-left: 256px;">自定义字体文件.config/font/</span> </td> </tr> <tr class="dr_sy dr_sy_1" style="<neq name='watermark.types' value='1'>display:none;</neq>"> <td class="l noticeinfo">水印文字</td> <td class="r table_radio"> <input name="config[font_text]" type="text" value="{$watermark.font_text}"> <span class="notice-text" style="margin-left: 256px;width: auto;">如果为中文,先要在font目录中添加字体</span> </td> </tr> <tr class="dr_sy dr_sy_1" style="<neq name='watermark.types' value='1'>display:none;</neq>"> <td class="l noticeinfo">水印文字大小</td> <td class="r table_radio"> <input name="config[font_size]" type="text" value="{$watermark.font_size}"> <span class="notice-text" style="margin-left: 256px;width: auto;">字体大小,单位px</span> </td> </tr> <tr class="dr_sy dr_sy_1" style="<neq name='watermark.types' value='1'>display:none;</neq>"> <td class="l noticeinfo">水印文字颜色</td> <td class="r table_radio"> <div class="minicolors minicolors-theme-bootstrap minicolors-position-bottom minicolors-position-left"> <input type="hidden" id="hue-demo" data-control="hue" data-defaultValue="{$watermark.font_color}" class="form-control demo minicolors-input" name="config[font_color]" value="{$watermark.font_color}" size="7"> <div class="minicolors-panel minicolors-slider-hue"> <div class="minicolors-slider minicolors-sprite"> <div class="minicolors-picker"></div> </div> <div class="minicolors-opacity-slider minicolors-sprite"> <div class="minicolors-picker"></div> </div> <div class="minicolors-grid minicolors-sprite"> <div class="minicolors-grid-inner"></div> <div class="minicolors-picker"> <div></div> </div> </div> </div> </div> </td> </tr> <tr class="dr_sy dr_sy_0" style="<neq name='watermark.types' value='0'>display:none;</neq>"> <td class="l noticeinfo">水印图片</td> <td class="r table_radio"> <div class="select_img fl"> <div class="upload-img-box"> <notempty name="watermark['icon']"> <div class="upload-pre-item"><img src="{$watermark['icon']|get_cover='path'}"/></div> <else /> <div class="upload-pre-item"><img src="__IMG__/icon_normal_picture.png"></div> </notempty> </div> <input type="file" id="upload_picture_icon" > <input type="hidden" name="config[icon]" id="cover_id_icon" value="{$watermark.icon}" /> <input type="hidden" name="config[path]" id="cover_id_icon_path" disabled value="<notempty name='watermark.icon'>{:get_cover($watermark['icon'],'path',0,false)}<else />__IMG__/icon_normal_picture.png</notempty>"/> </div> <span class="notice-text mg_t10" style="margin-left: 258px;">自定义水印,格式为.png</span> </td> </tr> <tr class="dr_sy dr_sy_0" style="<neq name='watermark.types' value='0'>display:none;</neq>"> <td class="l noticeinfo">水印透明度</td> <td class="r table_radio"> <div class="slider_st fl"> <div id="demo6_slider1" class="noUi-danger noUi-target noUi-ltr noUi-horizontal noUi-background" style="width: 443px;"></div> <span id="demo6_slider1-span" class="bar-span">{$watermark.transparency|default=1}</span> <input type="hidden" id="transparency" name="config[transparency]" value="{$watermark.transparency|default=1}" > </div> <span class="notice-text mg_t10">设置水印图标透明度,数值越大,图标越清晰</span> </td> </tr> <tr class="dr_sy dr_sy_1 dr_sy_0"> <td class="l noticeinfo">水印质量</td> <td class="r table_radio"> <div class="slider_st fl"> <div id="demo6_slider2" class="noUi-danger noUi-target noUi-ltr noUi-horizontal noUi-background" style="width: 443px;"></div> <span id="demo6_slider2-span" class="bar-span">{$watermark.quality|default=1}</span> <input type="hidden" id="quality" name="config[quality]" value="{$watermark.quality|default=1}" > </div> <span class="notice-text mg_t10" style="height:48px;line-height:48px;">设置添加水印后的图片质量,数值越大,图片越清晰</span> </td> </tr> <tr> <td class="l noticeinfo">水印显示状态</td> <td class="r table_radio"> <span class="form_radio"> <label> <input type="radio" name="status" value="1"> 开启 </label> <label> <input type="radio" name="status" value="0" checked> 关闭 </label> </span> </td> </tr> </tbody> </table> <input type="hidden" name="name" value="watermark"> <input type="submit" value="保存" target-form="watermarkform" class="submit_btn form_btn jsajaxpost mlspacing"> </form> </div> </div> </div> <div class="common_settings"> <span class="plus_icon"><span><img src="__IMG__/zwmimages/icon_jia.png"></span></span> <form class="addShortcutIcon"> <input type="hidden" name="title" value="{$m_title}"> <input type="hidden" name="url" value="{$m_url}"> </form> <a class="ajax-post add-butn <notempty name='commonset'>addSIsetted</notempty>" href="javascript:;" target-form="addShortcutIcon" url="{:U('Think/addShortcutIcon')}"><img src="__IMG__/zwmimages/icon_jia.png"><span><notempty name='commonset'>已添加<else />添加至常用设置</notempty></span></a> </div> </block> <block name="script"> <script src="__JS__/jquery.minicolors.min.js" type="text/javascript"></script> <script src="__JS__/nouislider.min.js" type="text/javascript"></script> <script type="text/javascript"> Think.setValue('status',{$watermark_data['status']|default=0}); Think.setValue('config[types]',{$watermark['types']|default=0}); Think.setValue('config[font]',"{$watermark['font']|default='1.ttf'}"); //导航高亮 highlight_subnav('{:U('Tool/watermark')}'); $(function() { //支持tab showTab(); }); var imgurl = '__IMG__/'; $("#upload_picture_icon").uploadify({ "height" : 30, "swf" : "__STATIC__/uploadify/uploadify.swf", "fileObjName" : "download", "buttonText" : "上传图标", "uploader" : "{:U('File/uploadPicture',array('session_id'=>session_id()))}", "width" : 120, 'removeTimeout' : 1, 'fileTypeExts' : '*.jpg; *.jpeg; *.png; *.gif;', "onUploadSuccess" : upload_picture_icon{$field.name}, 'onFallback' : function() { alert('未检测到兼容版本的Flash.'); } }); function upload_picture_icon{$field.name}(file, data){ var data = $.parseJSON(data); var src = ''; if(data.status){ $("#cover_id_icon").val(data.id); $("#cover_id_icon_path").val(data.path); src = data.url || '__ROOT__' + data.path; $("#cover_id_icon").parent().find('.upload-img-box').html( '<div class="upload-pre-item"><img src="' + src + '"/></div>' ); setwatrer($('input[name="config[types]"]:checked').val()); } else { updateAlert(data.info,'tip_error'); setTimeout(function(){ $('#tip').find('.tipclose').click(); $('#top-alert').find('button').click(); $(that).removeClass('disabled').prop('disabled',false); },1500); } } $('.position_rows span').click(function(){ var that = $(this); that.closest('.position_water').find('span').removeClass('current'); that.addClass('current'); var rowindex = that.closest('.position_rows').index(); var index = that.index(); $('#position').val(rowindex+","+index); var tsc = $('.tip_rows span.current').html(); $('.tip_rows span').removeClass('current').html(''); $('.tip_rows').eq(rowindex).find('span').eq(index).addClass('current').html(tsc); setwatrer($('input[name="config[types]"]:checked').val()); }); function setwatrer(type) { var list = $('.dr_sy_' + type).find('input,select'); var tip = $('.tip_rows span.current'); if (type == 1) {tip.html('<i></i>');}else{tip.html('');} var css = {}; var text = ''; $.each(list,function(i,n) { var that = $(n); var name = that.attr('name').replace('config[','').replace(']',''); var val = that.val(); switch(name) { case 'font':css['font-family']="'"+(val.replace('.',''))+"'";break; case 'font_text':text = val;break; case 'font_size':css['font-size']=val+'px';break; case 'font_color':css.color=val;break; case 'quality':{ css['-webkit-filter']='blur('+(5-val*0.05)+'px)'; css['-moz-filter']='blur('+(5-val*0.05)+'px)'; css['-ms-filter']='blur('+(5-val*0.05)+'px)'; css['filter']='blur('+(5-val*0.05)+'px)'; css['filter']='progid:DXImageTransform.Microsoft.Blur(PixelRadius='+(5-val*0.05)+',MakeShadow=false)'; };break; case 'path':text = val;break; case 'transparency':css['opacity']=val/100;break; } }); if (type == 1) { switch(tip.index()) {case 1:css['text-align']='center';break;case 2:css['text-align']='right';break;default:css['text-align']='left';} tip.find('i').css(css).text(text); } else { tip.html('<img src="'+text+'" width="90" height="70">'); tip.find('img').css(css); } } function dr_type(v) { $('.dr_sy').hide(); $('.dr_sy_' + v).show(); setwatrer(v); } $(function(){ var wm = {$watermark['types']|default=0}; $('.jsajaxpost').on('click',function() { var that = $(this); if (that.attr('type')=='submit') { if (that.hasClass('disabled')) {return false;} that.addClass('disabled').attr('autocomplete','off').prop('disabled',true); var form = $('.'+that.attr('target-form')); $.ajax({ type:'post', dataType:'json', url:form.attr('action'), data:form.serialize(), success:function(data) { if (data.status==1) { updateAlert(data.info+',正在准备加水印'); setTimeout(function(){ updateAlert('添加中'); $.ajax({ type:'post', dataType:'json', url:'{:U("addWatermarkOnPic")}', data:{}, success:function(data) { if (data.status==1) { updateAlert(data.info); setTimeout(function(){ location.reload(); },1500); } else { updateAlert(data.info,'tip_error'); setTimeout(function(){ location.reload(); },1500); } },error:function() { updateAlert('服务器故障,请稍候再试','tip_error'); setTimeout(function(){ location.reload(); },1500); } }); },1500); }else{ updateAlert(data.info,'tip_error'); setTimeout(function(){ that.removeClass('disabled').prop('disabled',false); $('#tip').find('.tipclose').click(); },1500); } },error:function() { updateAlert('服务器故障,请稍候再试','tip_error'); setTimeout(function(){ location.reload(); },1500); } }); } return false; }); var position = [{$watermark['position']}]; var tsc = $('.tip_rows span.current').html(); $('.position_rows span').removeClass('current'); $('.tip_rows span').removeClass('current').html(''); $('.position_rows').eq(position[0]).find('span').eq(position[1]).addClass('current'); $('.tip_rows').eq(position[0]).find('span').eq(position[1]).addClass('current').html(tsc); $("#hue-demo").minicolors({ control: $(this).attr('data-control') || 'hue', defaultValue: $(this).attr('data-defaultValue') || '', inline: $(this).attr('data-inline') === 'true', letterCase: $(this).attr('data-letterCase') || 'lowercase', opacity: $(this).attr('data-opacity'), position: $(this).attr('data-position') || 'bottom left', change: function(hex, opacity) { if(!hex) return; if(opacity) hex += ', ' + opacity; if(typeof console === 'object') { console.log(hex); setwatrer($('input[name="config[types]"]:checked').val()); } }, theme: 'bootstrap' }); $('input[name="config[font_text]"],input[name="config[font_size]"],input[name="config[voffset]"],input[name="config[hoffset]"],select[name="config[font]"]').change(function(){ setwatrer($('input[name="config[types]"]:checked').val()); return false; }); dr_type(wm); // Store the locked state and slider values. var lockedState = false, lockedSlider = false, lockedValues = [60, 80], slider1 = document.getElementById('demo6_slider1'), slider2 = document.getElementById('demo6_slider2'), slider1Value = document.getElementById('demo6_slider1-span'), slider2Value = document.getElementById('demo6_slider2-span'); // When the button is clicked, the locked // state is inverted. function crossUpdate(value, slider) { // If the sliders aren't interlocked, don't // cross-update. if(!lockedState) return; // Select whether to increase or decrease // the other slider value. var a = slider1 === slider ? 0 : 1, b = a ? 0 : 1; // Offset the slider value. value -= lockedValues[b] - lockedValues[a]; // Set the value slider.noUiSlider.set(); } noUiSlider.create(slider1, { start: {$watermark.transparency|default=0}, // Disable animation on value-setting, // so the sliders respond immediately. value:{$watermark.transparency|default=1}, animate: false, range: { min: 1, max: 100 } }); noUiSlider.create(slider2, { start: {$watermark.quality|default=0}, animate: false, range: { min: 1, max: 100 } }); slider1.noUiSlider.on('update', function(values, handle) { slider1Value.innerHTML = parseInt(values[handle]); $('#transparency').val($.trim(slider1Value.innerHTML)); setwatrer($('input[name="config[types]"]:checked').val()); }); slider2.noUiSlider.on('update', function(values, handle) { slider2Value.innerHTML = parseInt(values[handle]); $('#quality').val($.trim(slider2Value.innerHTML)); setwatrer($('input[name="config[types]"]:checked').val()); }); function setLockedValues() { lockedValues = [ Number(slider1.noUiSlider.get()), Number(slider2.noUiSlider.get()) ]; } slider1.noUiSlider.on('change', setLockedValues); slider2.noUiSlider.on('change', setLockedValues); slider1.noUiSlider.on('slide', function(values, handle) { crossUpdate(values[handle], slider2); }); slider2.noUiSlider.on('slide', function(values, handle) { crossUpdate(values[handle], slider1); }); }); </script> </block>