소스 검색

智能研报预览页增加水印功能

yujinwen 2 달 전
부모
커밋
c7e25a639a
1개의 변경된 파일47개의 추가작업 그리고 0개의 파일을 삭제
  1. 47 0
      src/views/smartReport/detail.vue

+ 47 - 0
src/views/smartReport/detail.vue

@@ -135,6 +135,8 @@ import { getShareInfo,reportDetail } from "@/api/api.js";
 import _ from "lodash";
 import {wxShare,injectSdk} from "../utils/wxShare.js";
 import AudioPlay from '../report/audioPlay.vue';
+import { Watermark,BlindWatermark } from 'watermark-js-plus'
+import { Base64 } from 'js-base64';
 export default {
   components: { AudioPlay },
   data() {
@@ -304,7 +306,52 @@ export default {
           wx.previewImage({ current: curImageSrc, urls: imgArray });
         }
       });
+
+      //水印
+      localStorage.setItem('waterMarkStr',this.$route.query.flag||'')
+      const temwaterMarkStr=this.$route.query.flag||localStorage.getItem('waterMarkStr')
+      let waterMarkStr=Base64.decode(temwaterMarkStr)
+      waterMarkStr=decodeURIComponent(waterMarkStr)
+      this.$nextTick(()=>{
+        if(Data.WatermarkReport==='true'){
+          this.setWaterMark(waterMarkStr)
+        }
+        this.setBlindWaterMark(waterMarkStr)
+      })
+    },
+
+    setWaterMark(str){
+      const text=str||''
+      const target=document.getElementById('resetcss')
+      const canvas = document.createElement("canvas");
+
+      const ctx = canvas.getContext("2d");
+      ctx.font = "18px Arial";
+      ctx.rotate((-45 * Math.PI) / 200);
+      ctx.fillStyle='#f1f1f1'
+      ctx.fillText(text, 30, 200);
+      ctx.fillText(text, -40, 100);
+
+      // 将canvas的内容转换为base64编码
+      const data = canvas.toDataURL("image/png");
+      target.style.background = "url(" + data + ") repeat";
     },
+
+    // 设置水印
+    setBlindWaterMark(str){
+      
+      const blindwatermark = new BlindWatermark({
+        content: str||'',
+        width: 200,
+        height: 200,
+        onSuccess: () => {
+          // success callback
+        }
+      })
+      blindwatermark.create()
+    },
+
+
     /**
      * 判断是否为移动设备
      *