hy-app 0.3.1 → 0.3.2

package/components/hy-watermark/hy-watermark.vue

@@ -16,33 +16,37 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-watermark',
+  name: "hy-watermark",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch, nextTick, type CSSProperties } from 'vue'
-import { addUnit, guid } from '../../utils'
+import { computed, onMounted, ref, watch, nextTick } from "vue";
+import type { CSSProperties } from "vue";
+import { addUnit, guid } from "../../utils";
 
 /**
  * 在页面或组件上添加指定的图片或文字，可用于版权保护、品牌宣传等场景。
  * @displayName hy-watermark
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 显示内容 */
-  content: String,
+  content: {
+    type: String,
+    default: "",
+  },
   /** 显示图片的地址，支持网络图片和base64（钉钉小程序仅支持网络图片） */
   image: {
     type: String,
-    default: '',
+    default: "",
   },
   /** 图片高度 */
   imageHeight: {
@@ -82,7 +86,7 @@ const props = defineProps({
   /** 水印字体颜色 */
   color: {
     type: String,
-    default: '#8c8c8c',
+    default: "#8c8c8c",
   },
   /** 水印字体大小，单位px */
   size: {
@@ -92,17 +96,17 @@ const props = defineProps({
   /** 水印字体样式（仅微信和h5支持） */
   fontStyle: {
     type: String,
-    default: '',
+    default: "",
   },
   /** 水印字体的粗细 */
   fontWeight: {
     type: String,
-    default: '',
+    default: "",
   },
   /** 水印字体系列（仅微信和h5支持） */
   fontFamily: {
     type: String,
-    default: 'PingFang SC',
+    default: "PingFang SC",
   },
   /** 水印旋转角度 */
   rotate: {
@@ -119,36 +123,40 @@ const props = defineProps({
     type: Number,
     default: 0.5,
   },
-})
+});
 
 watch(
   () => props,
   () => {
-    doReset()
+    doReset();
   },
   { deep: true },
-)
+);
 
-const canvasId = ref<string>(`watermark--${guid()}`) // canvas 组件的唯一标识符
-const waterMarkUrl = ref<string>('') // canvas生成base64水印
+const canvasId = ref<string>(`watermark--${guid()}`); // canvas 组件的唯一标识符
+const waterMarkUrl = ref<string>(""); // canvas生成base64水印
 const canvasOffScreenable = ref<boolean>(
-  uni.canIUse('createOffscreenCanvas') && Boolean(uni.createOffscreenCanvas),
-) // 是否可以使用离屏canvas
-const pixelRatio = ref<number>(uni.getSystemInfoSync().pixelRatio) // 像素比
-const canvasHeight = ref<number>((props.height + props.gutterY) * pixelRatio.value) // canvas画布高度
-const canvasWidth = ref<number>((props.width + props.gutterX) * pixelRatio.value) // canvas画布宽度
-const showCanvas = ref<boolean>(true) // 是否展示canvas
+  uni.canIUse("createOffscreenCanvas") && Boolean(uni.createOffscreenCanvas),
+); // 是否可以使用离屏canvas
+const pixelRatio = ref<number>(uni.getSystemInfoSync().pixelRatio); // 像素比
+const canvasHeight = ref<number>(
+  (props.height + props.gutterY) * pixelRatio.value,
+); // canvas画布高度
+const canvasWidth = ref<number>(
+  (props.width + props.gutterX) * pixelRatio.value,
+); // canvas画布宽度
+const showCanvas = ref<boolean>(true); // 是否展示canvas
 
 /**
  * @description 水印css类
  */
 const rootClass = computed(() => {
-  const classes: string[] = ['hy-watermark']
+  const classes: string[] = ["hy-watermark"];
   if (props.fullScreen) {
-    classes.push('is-fullscreen')
+    classes.push("is-fullscreen");
   }
-  return classes
-})
+  return classes;
+});
 
 /**
  * @description 水印样式
@@ -157,30 +165,30 @@ const rootStyle = computed(() => {
   const style: CSSProperties = {
     opacity: props.opacity,
     backgroundSize: addUnit(props.width + props.gutterX),
-  }
+  };
   if (waterMarkUrl.value) {
-    style['backgroundImage'] = `url('${waterMarkUrl.value}')`
+    style["backgroundImage"] = `url('${waterMarkUrl.value}')`;
   }
-  return style
-})
+  return style;
+});
 
 onMounted(() => {
-  doInit()
-})
+  doInit();
+});
 
 function doReset() {
-  showCanvas.value = true
-  canvasHeight.value = (props.height + props.gutterY) * pixelRatio.value
-  canvasWidth.value = (props.width + props.gutterX) * pixelRatio.value
+  showCanvas.value = true;
+  canvasHeight.value = (props.height + props.gutterY) * pixelRatio.value;
+  canvasWidth.value = (props.width + props.gutterX) * pixelRatio.value;
   nextTick(() => {
-    doInit()
-  })
+    doInit();
+  });
 }
 
 function doInit() {
   // #ifdef H5
   // h5使用document.createElement创建canvas，不用展示canvas标签
-  showCanvas.value = false
+  showCanvas.value = false;
   // #endif
   const {
     width,
@@ -197,7 +205,7 @@ function doInit() {
     image,
     imageHeight,
     imageWidth,
-  } = props
+  } = props;
 
   // 创建水印
   createWaterMark(
@@ -215,7 +223,7 @@ function doInit() {
     image,
     imageHeight,
     imageWidth,
-  )
+  );
 }
 
 /**
@@ -251,11 +259,11 @@ function createWaterMark(
   imageHeight: number,
   imageWidth: number,
 ) {
-  const canvasHeight = (height + gutterY) * pixelRatio.value
-  const canvasWidth = (width + gutterX) * pixelRatio.value
-  const contentWidth = width * pixelRatio.value
-  const contentHeight = height * pixelRatio.value
-  const fontSize = size * pixelRatio.value
+  const canvasHeight = (height + gutterY) * pixelRatio.value;
+  const canvasWidth = (width + gutterX) * pixelRatio.value;
+  const contentWidth = width * pixelRatio.value;
+  const contentHeight = height * pixelRatio.value;
+  const fontSize = size * pixelRatio.value;
   // #ifndef H5
   if (canvasOffScreenable.value) {
     createOffscreenCanvas(
@@ -273,7 +281,7 @@ function createWaterMark(
       image,
       imageHeight,
       imageWidth,
-    )
+    );
   } else {
     createCanvas(
       canvasHeight,
@@ -285,7 +293,7 @@ function createWaterMark(
       image,
       imageHeight,
       imageWidth,
-    )
+    );
   }
   // #endif
   // #ifdef H5
@@ -304,7 +312,7 @@ function createWaterMark(
     image,
     imageHeight,
     imageWidth,
-  )
+  );
   // #endif
 }
 
@@ -345,12 +353,12 @@ function createOffscreenCanvas(
   const canvas: any = uni.createOffscreenCanvas({
     height: canvasHeight,
     width: canvasWidth,
-    type: '2d',
-  })
-  const ctx: any = canvas.getContext('2d')
+    type: "2d",
+  });
+  const ctx: any = canvas.getContext("2d");
   if (ctx) {
     if (image) {
-      const img = canvas.createImage() as HTMLImageElement
+      const img = canvas.createImage() as HTMLImageElement;
       drawImageOffScreen(
         ctx,
         img,
@@ -361,7 +369,7 @@ function createOffscreenCanvas(
         contentWidth,
         contentHeight,
         canvas,
-      )
+      );
     } else {
       drawTextOffScreen(
         ctx,
@@ -375,10 +383,10 @@ function createOffscreenCanvas(
         fontWeight,
         color,
         canvas,
-      )
+      );
     }
   } else {
-    console.error('无法获取canvas上下文，请确认当前环境是否支持canvas')
+    console.error("无法获取canvas上下文，请确认当前环境是否支持canvas");
   }
 }
 
@@ -406,15 +414,23 @@ function createCanvas(
   imageHeight: number,
   imageWidth: number,
 ) {
-  const ctx = uni.createCanvasContext(canvasId.value)
+  const ctx = uni.createCanvasContext(canvasId.value);
   if (ctx) {
     if (image) {
-      drawImageOnScreen(ctx, image, imageHeight, imageWidth, rotate, contentWidth, contentHeight)
+      drawImageOnScreen(
+        ctx,
+        image,
+        imageHeight,
+        imageWidth,
+        rotate,
+        contentWidth,
+        contentHeight,
+      );
     } else {
-      drawTextOnScreen(ctx, content, contentWidth, rotate, fontSize, color)
+      drawTextOnScreen(ctx, content, contentWidth, rotate, fontSize, color);
     }
   } else {
-    console.error('无法获取canvas上下文，请确认当前环境是否支持canvas')
+    console.error("无法获取canvas上下文，请确认当前环境是否支持canvas");
   }
 }
 
@@ -431,6 +447,9 @@ function createCanvas(
  * @param fontWeight 水印字体字重
  * @param color 水印字体颜色
  * @param content 水印内容
+ * @param image canvas图片
+ * @param imageHeight canvas图片高度
+ * @param imageWidth canvas图片宽度
  */
 function createH5Canvas(
   canvasHeight: number,
@@ -448,13 +467,13 @@ function createH5Canvas(
   imageHeight: number,
   imageWidth: number,
 ) {
-  const canvas = document.createElement('canvas')
-  const ctx = canvas.getContext('2d')
-  canvas.setAttribute('width', `${canvasWidth}px`)
-  canvas.setAttribute('height', `${canvasHeight}px`)
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  canvas.setAttribute("width", `${canvasWidth}px`);
+  canvas.setAttribute("height", `${canvasHeight}px`);
   if (ctx) {
     if (image) {
-      const img = new Image()
+      const img = new Image();
       drawImageOffScreen(
         ctx,
         img,
@@ -465,7 +484,7 @@ function createH5Canvas(
         contentWidth,
         contentHeight,
         canvas,
-      )
+      );
     } else {
       drawTextOffScreen(
         ctx,
@@ -479,10 +498,10 @@ function createH5Canvas(
         fontWeight,
         color,
         canvas,
-      )
+      );
     }
   } else {
-    console.error('无法获取canvas上下文，请确认当前环境是否支持canvas')
+    console.error("无法获取canvas上下文，请确认当前环境是否支持canvas");
   }
 }
 
@@ -513,15 +532,15 @@ function drawTextOffScreen(
   color: string,
   canvas: HTMLCanvasElement,
 ) {
-  ctx.textBaseline = 'middle'
-  ctx.textAlign = 'center'
-  ctx.translate(contentWidth / 2, contentWidth / 2)
-  ctx.rotate((Math.PI / 180) * rotate)
-  ctx.font = `${fontStyle} normal ${fontWeight} ${fontSize}px ${fontFamily}`
-  ctx.fillStyle = color
-  ctx.fillText(content, 0, 0)
-  ctx.restore()
-  waterMarkUrl.value = canvas.toDataURL()
+  ctx.textBaseline = "middle";
+  ctx.textAlign = "center";
+  ctx.translate(contentWidth / 2, contentWidth / 2);
+  ctx.rotate((Math.PI / 180) * rotate);
+  ctx.font = `${fontStyle} normal ${fontWeight} ${fontSize}px ${fontFamily}`;
+  ctx.fillStyle = color;
+  ctx.fillText(content, 0, 0);
+  ctx.restore();
+  waterMarkUrl.value = canvas.toDataURL();
 }
 
 /**
@@ -541,32 +560,32 @@ function drawTextOnScreen(
   fontSize: number,
   color: string,
 ) {
-  ctx.setTextBaseline('middle')
-  ctx.setTextAlign('center')
-  ctx.translate(contentWidth / 2, contentWidth / 2)
-  ctx.rotate((Math.PI / 180) * rotate)
-  ctx.setFillStyle(color)
-  ctx.setFontSize(fontSize)
-  ctx.fillText(content, 0, 0)
-  ctx.restore()
-  ctx.draw()
+  ctx.setTextBaseline("middle");
+  ctx.setTextAlign("center");
+  ctx.translate(contentWidth / 2, contentWidth / 2);
+  ctx.rotate((Math.PI / 180) * rotate);
+  ctx.setFillStyle(color);
+  ctx.setFontSize(fontSize);
+  ctx.fillText(content, 0, 0);
+  ctx.restore();
+  ctx.draw();
   // #ifdef MP-DINGTALK
   // 钉钉小程序的canvasToTempFilePath接口与其他平台不一样
-  ;(ctx as any).toTempFilePath({
+  (ctx as any).toTempFilePath({
     success(res: any) {
-      showCanvas.value = false
-      waterMarkUrl.value = res.filePath
+      showCanvas.value = false;
+      waterMarkUrl.value = res.filePath;
     },
-  })
+  });
   // #endif
   // #ifndef MP-DINGTALK
   uni.canvasToTempFilePath({
     canvasId: canvasId.value,
     success: (res) => {
-      showCanvas.value = false
-      waterMarkUrl.value = res.tempFilePath
+      showCanvas.value = false;
+      waterMarkUrl.value = res.tempFilePath;
     },
-  })
+  });
   // #endif
 }
 
@@ -593,12 +612,12 @@ async function drawImageOffScreen(
   contentHeight: number,
   canvas: HTMLCanvasElement,
 ) {
-  ctx.translate(contentWidth / 2, contentHeight / 2)
-  ctx.rotate((Math.PI / 180) * Number(rotate))
-  img.crossOrigin = 'anonymous'
-  img.referrerPolicy = 'no-referrer'
+  ctx.translate(contentWidth / 2, contentHeight / 2);
+  ctx.rotate((Math.PI / 180) * Number(rotate));
+  img.crossOrigin = "anonymous";
+  img.referrerPolicy = "no-referrer";
 
-  img.src = image
+  img.src = image;
   img.onload = () => {
     ctx.drawImage(
       img,
@@ -606,10 +625,10 @@ async function drawImageOffScreen(
       (-imageHeight * pixelRatio.value) / 2,
       imageWidth * pixelRatio.value,
       imageHeight * pixelRatio.value,
-    )
-    ctx.restore()
-    waterMarkUrl.value = canvas.toDataURL()
-  }
+    );
+    ctx.restore();
+    waterMarkUrl.value = canvas.toDataURL();
+  };
 }
 
 /**
@@ -631,8 +650,8 @@ function drawImageOnScreen(
   contentWidth: number,
   contentHeight: number,
 ) {
-  ctx.translate(contentWidth / 2, contentHeight / 2)
-  ctx.rotate((Math.PI / 180) * Number(rotate))
+  ctx.translate(contentWidth / 2, contentHeight / 2);
+  ctx.rotate((Math.PI / 180) * Number(rotate));
 
   ctx.drawImage(
     image,
@@ -640,31 +659,31 @@ function drawImageOnScreen(
     (-imageHeight * pixelRatio.value) / 2,
     imageWidth * pixelRatio.value,
     imageHeight * pixelRatio.value,
-  )
-  ctx.restore()
+  );
+  ctx.restore();
   ctx.draw(false, () => {
     // #ifdef MP-DINGTALK
     // 钉钉小程序的canvasToTempFilePath接口与其他平台不一样
-    ;(ctx as any).toTempFilePath({
+    (ctx as any).toTempFilePath({
       success(res: any) {
-        showCanvas.value = false
-        waterMarkUrl.value = res.filePath
+        showCanvas.value = false;
+        waterMarkUrl.value = res.filePath;
       },
-    })
+    });
     // #endif
     // #ifndef MP-DINGTALK
     uni.canvasToTempFilePath({
       canvasId: canvasId.value,
       success: (res) => {
-        showCanvas.value = false
-        waterMarkUrl.value = res.tempFilePath
+        showCanvas.value = false;
+        waterMarkUrl.value = res.tempFilePath;
       },
-    })
+    });
     // #endif
-  })
+  });
 }
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>