|
|
<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> |