|
|
@@ -32,6 +32,57 @@ Vue.use(Viewer, {
|
|
|
loading: false
|
|
|
}
|
|
|
})
|
|
|
+// 注册一个全局自定义指令 `v-watermark`
|
|
|
+Vue.directive('watermark', {
|
|
|
+ inserted: function (el, binding) {
|
|
|
+ // 获取绑定的水印文字
|
|
|
+ // const text = binding.value || '水印';
|
|
|
+ // const canvas = document.createElement('canvas');
|
|
|
+ // const ctx = canvas.getContext('2d');
|
|
|
+ // canvas.width = 250;
|
|
|
+ // canvas.height = 200;
|
|
|
+ // ctx.font = '16px Arial';
|
|
|
+ // ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
|
|
|
+ // ctx.textAlign = 'center';
|
|
|
+ // ctx.textBaseline = 'middle';
|
|
|
+ // ctx.translate(canvas.width / 2, canvas.height / 2);
|
|
|
+ // ctx.rotate(-30*Math.PI/180);
|
|
|
+ // ctx.fillText(text,0,10);
|
|
|
+ // const base64 = canvas.toDataURL('image/png');
|
|
|
+ // el.style.backgroundImage = `url('${base64}')`;
|
|
|
+ // el.style.backgroundColor = '#fff';
|
|
|
+
|
|
|
+
|
|
|
+ const watermarkText = binding.value || '默认水印';
|
|
|
+ const canvas = document.createElement('canvas');
|
|
|
+ const ctx = canvas.getContext('2d');
|
|
|
+ canvas.width = 300;
|
|
|
+ canvas.height = 250;
|
|
|
+ ctx.fillStyle = 'rgba(180, 180, 180, 0.3)';
|
|
|
+ // ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
+ ctx.font = '16px Arial';
|
|
|
+ ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
|
|
|
+ ctx.textAlign = 'center';
|
|
|
+ ctx.textBaseline = 'middle';
|
|
|
+ ctx.translate(canvas.width / 2, canvas.height / 2);
|
|
|
+ ctx.rotate(-30*Math.PI/180);
|
|
|
+ ctx.fillText(watermarkText, 0, 0);
|
|
|
+ const base64 = canvas.toDataURL('image/png');
|
|
|
+ const watermarkDiv = document.createElement('div');
|
|
|
+ watermarkDiv.style.position = 'absolute';
|
|
|
+ watermarkDiv.style.top = '0px';
|
|
|
+ watermarkDiv.style.left = '0px';
|
|
|
+ watermarkDiv.style.width = `${el.offsetWidth}px`;
|
|
|
+ watermarkDiv.style.height = `${el.offsetHeight}px`;
|
|
|
+ watermarkDiv.style.pointerEvents = 'none';
|
|
|
+ watermarkDiv.style.backgroundImage = `url('${base64}')`;
|
|
|
+ // watermarkDiv.style.backgroundSize = '100% 100%';
|
|
|
+ // watermarkDiv.style.backgroundColor = 'rgba(255,255,255,0.1)';
|
|
|
+ watermarkDiv.style.zIndex = '1000';
|
|
|
+ console.log(el.offsetHeight,222222222222);
|
|
|
+ el.appendChild(watermarkDiv);
|
|
|
+ }
|
|
|
+});
|
|
|
// ElementUI.Dialog.props.lockScroll.default = false;
|
|
|
Vue.config.productionTip = false;
|
|
|
VueClipboard.config.autoSetContainer = true
|