|
@@ -33,11 +33,11 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="watermark1"
|
|
|
- :style="{left:item.watermark_info.waterPos==0?0:item.watermark_info.waterPos==1?0:item.watermark_info.waterPos==4?0:item.watermark_info.waterPos==7?0:item.watermark_info.waterPos==2?'40%':item.watermark_info.waterPos==5?'40%':item.watermark_info.waterPos==8?'40%':'',top:item.watermark_info.waterPos==0?0:item.watermark_info.waterPos==1?0:item.watermark_info.waterPos==2?0:item.watermark_info.waterPos==3?0:item.watermark_info.waterPos==4?'40%':item.watermark_info.waterPos==5?'40%':item.watermark_info.waterPos==6?'40%':'',right:item.watermark_info.waterPos==3?0:item.watermark_info.waterPos==6?0:item.watermark_info.waterPos==9?0:'',bottom:item.watermark_info.waterPos==7?0:item.watermark_info.waterPos==8?0:item.watermark_info.waterPos==9?0:'',fontWeight:item.watermark_info.bold==1?'bold':'',fontFamily:item.watermark_info.typeface==1?'typeface1':item.watermark_info.typeface==2?'typeface2':item.watermark_info.typeface==3?'typeface3':item.watermark_info.typeface==4?'typeface4':item.watermark_info.typeface==5?'typeface5':item.watermark_info.typeface==6?'typeface6':''}"
|
|
|
+ :style="{left:item.watermark_info.waterPos==0?0+item.watermark_info.xx+'px':item.watermark_info.waterPos==1?0+item.watermark_info.xx+'px':item.watermark_info.waterPos==4?0+item.watermark_info.voffset+'px':item.watermark_info.waterPos==7?0+item.watermark_info.xx+'px':item.watermark_info.waterPos==2?'calc( 40%'+' + '+item.watermark_info.xx+'px )':item.watermark_info.waterPos==5?'calc( 40%'+' + '+item.watermark_info.voffset+'px )':item.watermark_info.waterPos==8?'calc( 40%'+' + '+item.watermark_info.xx+'px )':'',top:item.watermark_info.waterPos==0?0+item.watermark_info.yy+'px':item.watermark_info.waterPos==1?0+item.watermark_info.yy+'px':item.watermark_info.waterPos==2?0+item.watermark_info.yy+'px':item.watermark_info.waterPos==3?0+item.watermark_info.yy+'px':item.watermark_info.waterPos==4?'40%':item.watermark_info.waterPos==5?'40%':item.watermark_info.waterPos==6?'40%':'',right:item.watermark_info.waterPos==3?0+item.watermark_info.xx+'px':item.watermark_info.waterPos==6?0+item.watermark_info.waterPos+'px':item.watermark_info.waterPos==9?0+item.watermark_info.xx+'px':'',bottom:item.watermark_info.waterPos==7?0+item.watermark_info.xx+'px':item.watermark_info.waterPos==8?0+item.watermark_info.ww+'px':item.watermark_info.waterPos==9?0+item.watermark_info.xx+'px':'',fontWeight:item.watermark_info.bold==1?'bold':'',fontFamily:item.watermark_info.typeface==1?'typeface1':item.watermark_info.typeface==2?'typeface2':item.watermark_info.typeface==3?'typeface3':item.watermark_info.typeface==4?'typeface4':item.watermark_info.typeface==5?'typeface5':item.watermark_info.typeface==6?'typeface6':''}"
|
|
|
v-if="item.watermark_info&&item.watermark_info.type==2||item.watermark_info&&item.watermark_info.type==4">
|
|
|
-
|
|
|
+
|
|
|
<view class=""
|
|
|
- :style="{transform: 'rotate('+item.watermark_info.angle+'deg)',opacity:(100-item.watermark_info.opacity*1)*0.01,color:item.watermark_info.color,fontSize:item.watermark_info.text_font+'px'}">
|
|
|
+ :style="{transform: 'rotate('+item.watermark_info.angle+'deg)',color:`rgba(${hexToRgb(item.watermark_info.color).rgb},${(100-item.watermark_info.opacity*1)*0.01})`,fontSize:item.watermark_info.text_font+'px'}">
|
|
|
<image :src="BASE_URL+item.watermark_info.image" mode=""
|
|
|
v-if="item.watermark_info.image&&item.watermark_info.type==2"></image>
|
|
|
<text
|
|
@@ -81,7 +81,7 @@
|
|
|
v-if="item.watermark_info&&item.watermark_info.type==2||item.watermark_info&&item.watermark_info.type==4">
|
|
|
|
|
|
<view class=""
|
|
|
- :style="{transform: 'rotate('+item.watermark_info.angle+'deg)',opacity:(100-item.watermark_info.opacity*1)*0.01,color:item.watermark_info.color,fontSize:item.watermark_info.text_font+'px'}">
|
|
|
+ :style="{transform: 'rotate('+item.watermark_info.angle+'deg)',color:`rgba(${hexToRgb(item.watermark_info.color).rgb},${(100-item.watermark_info.opacity*1)*0.01})`,fontSize:item.watermark_info.text_font+'px'}">
|
|
|
<image :src="BASE_URL+item.watermark_info.image" mode=""
|
|
|
v-if="item.watermark_info.image&&item.watermark_info.type==2"></image>
|
|
|
<text
|
|
@@ -330,6 +330,36 @@
|
|
|
|
|
|
})
|
|
|
|
|
|
+ function hexToRgb (val) { //HEX十六进制颜色值转换为RGB(A)颜色值
|
|
|
+ // 16进制颜色值的正则
|
|
|
+ var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
|
|
|
+ // 把颜色值变成小写
|
|
|
+ var color = val.toLowerCase();
|
|
|
+ var result = '';
|
|
|
+ if (reg.test(color)) {
|
|
|
+ // 如果只有三位的值,需变成六位,如:#fff => #ffffff
|
|
|
+ if (color.length === 4) {
|
|
|
+ var colorNew = "#";
|
|
|
+ for (var i = 1; i < 4; i += 1) {
|
|
|
+ colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
|
|
|
+ }
|
|
|
+ color = colorNew;
|
|
|
+ }
|
|
|
+ // 处理六位的颜色值,转为RGB
|
|
|
+ var colorChange = [];
|
|
|
+ for (var i = 1; i < 7; i += 2) {
|
|
|
+ colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
|
|
|
+ }
|
|
|
+ result = colorChange.join(",")
|
|
|
+ return { rgb: result, r: colorChange[0], g: colorChange[1], b: colorChange[2] };
|
|
|
+ } else {
|
|
|
+ result = '无效';
|
|
|
+ return { rgb: result };
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
function getspan(str) {
|
|
|
// let st=str.replace(new RegExp('font', 'g'), 'span')
|
|
|
var list1 = str.split('</span>')
|