oxy-uni-ui 1.0.1

package/components/oxy-watermark/oxy-watermark.vue

@@ -0,0 +1,486 @@
+<template>
+  <view :class="rootClass" :style="rootStyle">
+    <canvas
+      v-if="!canvasOffScreenable && showCanvas"
+      type="2d"
+      :style="{ height: canvasHeight + 'px', width: canvasWidth + 'px', visibility: 'hidden' }"
+      :canvas-id="canvasId"
+      :id="canvasId"
+    />
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-watermark',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch, nextTick, type CSSProperties } from 'vue'
+import { addUnit, buildUrlWithParams, isBase64Image, objToStyle, uuid } from '../common/util'
+import { watermarkProps } from './types'
+
+const props = defineProps(watermarkProps)
+
+watch(
+  () => props,
+  () => {
+    doReset()
+  },
+  { deep: true }
+)
+
+const canvasId = ref<string>(`water${uuid()}`) // 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
+
+/**
+ * 水印css类
+ */
+const rootClass = computed(() => {
+  let classess: string = 'oxy-watermark'
+  if (props.fullScreen) {
+    classess = `${classess} is-fullscreen`
+  }
+  return `${classess} ${props.customClass}`
+})
+
+/**
+ * 水印样式
+ */
+const rootStyle = computed(() => {
+  const style: CSSProperties = {
+    opacity: props.opacity,
+    backgroundSize: addUnit(props.width + props.gutterX)
+  }
+  if (waterMarkUrl.value) {
+    style['backgroundImage'] = `url('${waterMarkUrl.value}')`
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+onMounted(() => {
+  doInit()
+})
+
+function doReset() {
+  showCanvas.value = true
+  canvasHeight.value = (props.height + props.gutterY) * pixelRatio.value
+  canvasWidth.value = (props.width + props.gutterX) * pixelRatio.value
+  nextTick(() => {
+    doInit()
+  })
+}
+
+function doInit() {
+  // #ifdef H5
+  // h5使用document.createElement创建canvas，不用展示canvas标签
+  showCanvas.value = false
+  // #endif
+  const { width, height, color, size, fontStyle, fontWeight, fontFamily, content, rotate, gutterX, gutterY, image, imageHeight, imageWidth } = props
+
+  // 创建水印
+  createWaterMark(width, height, color, size, fontStyle, fontWeight, fontFamily, content, rotate, gutterX, gutterY, image, imageHeight, imageWidth)
+}
+
+/**
+ * 创建水印图片
+ * @param width canvas宽度
+ * @param height canvas高度
+ * @param color canvas字体颜色
+ * @param size canvas字体大小
+ * @param fontStyle canvas字体样式
+ * @param fontWeight canvas字体字重
+ * @param fontFamily canvas字体系列
+ * @param content canvas内容
+ * @param rotate 倾斜角度
+ * @param gutterX X轴间距
+ * @param gutterY Y轴间距
+ * @param image canvas图片
+ * @param imageHeight canvas图片高度
+ * @param imageWidth canvas图片宽度
+ */
+function createWaterMark(
+  width: number,
+  height: number,
+  color: string,
+  size: number,
+  fontStyle: string,
+  fontWeight: number | string,
+  fontFamily: string,
+  content: string,
+  rotate: number,
+  gutterX: number,
+  gutterY: number,
+  image: string,
+  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
+  // #ifndef H5
+  if (canvasOffScreenable.value) {
+    createOffscreenCanvas(
+      canvasHeight,
+      canvasWidth,
+      contentWidth,
+      contentHeight,
+      rotate,
+      fontSize,
+      fontFamily,
+      fontStyle,
+      fontWeight,
+      color,
+      content,
+      image,
+      imageHeight,
+      imageWidth
+    )
+  } else {
+    createCanvas(canvasHeight, contentWidth, rotate, fontSize, color, content, image, imageHeight, imageWidth)
+  }
+  // #endif
+  // #ifdef H5
+  createH5Canvas(
+    canvasHeight,
+    canvasWidth,
+    contentWidth,
+    contentHeight,
+    rotate,
+    fontSize,
+    fontFamily,
+    fontStyle,
+    fontWeight,
+    color,
+    content,
+    image,
+    imageHeight,
+    imageWidth
+  )
+  // #endif
+}
+
+/**
+ * 创建离屏canvas
+ * @param canvasHeight canvas高度
+ * @param canvasWidth canvas宽度
+ * @param contentWidth 内容宽度
+ * @param contentHeight 内容高度
+ * @param rotate 内容倾斜角度
+ * @param fontSize 字体大小
+ * @param fontFamily 字体系列
+ * @param fontStyle 字体样式
+ * @param fontWeight 字体字重
+ * @param color 字体颜色
+ * @param content 内容
+ * @param image canvas图片
+ * @param imageHeight canvas图片高度
+ * @param imageWidth canvas图片宽度
+ */
+function createOffscreenCanvas(
+  canvasHeight: number,
+  canvasWidth: number,
+  contentWidth: number,
+  contentHeight: number,
+  rotate: number,
+  fontSize: number,
+  fontFamily: string,
+  fontStyle: string,
+  fontWeight: string | number,
+  color: string,
+  content: string,
+  image: string,
+  imageHeight: number,
+  imageWidth: number
+) {
+  // 创建离屏canvas
+  const canvas: any = uni.createOffscreenCanvas({ height: canvasHeight, width: canvasWidth, type: '2d' })
+  const ctx: any = canvas.getContext('2d')
+  if (ctx) {
+    if (image) {
+      const img = canvas.createImage() as HTMLImageElement
+      drawImageOffScreen(ctx, img, image, imageHeight, imageWidth, rotate, contentWidth, contentHeight, canvas)
+    } else {
+      drawTextOffScreen(ctx, content, contentWidth, contentHeight, rotate, fontSize, fontFamily, fontStyle, fontWeight, color, canvas)
+    }
+  } else {
+    console.error('无法获取canvas上下文，请确认当前环境是否支持canvas')
+  }
+}
+
+/**
+ * 非H5创建canvas
+ * 不支持创建离屏canvas时调用
+ * @param contentHeight 内容高度
+ * @param contentWidth 内容宽度
+ * @param rotate 内容倾斜角度
+ * @param fontSize 字体大小
+ * @param color 字体颜色
+ * @param content 内容
+ * @param image canvas图片
+ * @param imageHeight canvas图片高度
+ * @param imageWidth canvas图片宽度
+ */
+function createCanvas(
+  contentHeight: number,
+  contentWidth: number,
+  rotate: number,
+  fontSize: number,
+  color: string,
+  content: string,
+  image: string,
+  imageHeight: number,
+  imageWidth: number
+) {
+  const ctx = uni.createCanvasContext(canvasId.value)
+  if (ctx) {
+    if (image) {
+      drawImageOnScreen(ctx, image, imageHeight, imageWidth, rotate, contentWidth, contentHeight)
+    } else {
+      drawTextOnScreen(ctx, content, contentWidth, rotate, fontSize, color)
+    }
+  } else {
+    console.error('无法获取canvas上下文，请确认当前环境是否支持canvas')
+  }
+}
+
+/**
+ * h5创建canvas
+ * @param canvasHeight canvas高度
+ * @param canvasWidth canvas宽度
+ * @param contentWidth 水印内容宽度
+ * @param contentHeight 水印内容高度
+ * @param rotate 水印内容倾斜角度
+ * @param fontSize 水印字体大小
+ * @param fontFamily 水印字体系列
+ * @param fontStyle 水印字体样式
+ * @param fontWeight 水印字体字重
+ * @param color 水印字体颜色
+ * @param content 水印内容
+ */
+function createH5Canvas(
+  canvasHeight: number,
+  canvasWidth: number,
+  contentWidth: number,
+  contentHeight: number,
+  rotate: number,
+  fontSize: number,
+  fontFamily: string,
+  fontStyle: string,
+  fontWeight: string | number,
+  color: string,
+  content: string,
+  image: string,
+  imageHeight: number,
+  imageWidth: number
+) {
+  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()
+      drawImageOffScreen(ctx, img, image, imageHeight, imageWidth, rotate, contentWidth, contentHeight, canvas)
+    } else {
+      drawTextOffScreen(ctx, content, contentWidth, contentHeight, rotate, fontSize, fontFamily, fontStyle, fontWeight, color, canvas)
+    }
+  } else {
+    console.error('无法获取canvas上下文，请确认当前环境是否支持canvas')
+  }
+}
+
+/**
+ * 绘制离屏文字canvas
+ * @param ctx canvas上下文
+ * @param content 水印内容
+ * @param contentWidth 水印宽度
+ * @param contentHeight 水印高度
+ * @param rotate 水印内容倾斜角度
+ * @param fontSize 水印字体大小
+ * @param fontFamily 水印字体系列
+ * @param fontStyle 水印字体样式
+ * @param fontWeight 水印字体字重
+ * @param color 水印字体颜色
+ * @param canvas canvas实例
+ */
+function drawTextOffScreen(
+  ctx: CanvasRenderingContext2D,
+  content: string,
+  contentWidth: number,
+  contentHeight: number,
+  rotate: number,
+  fontSize: number,
+  fontFamily: string,
+  fontStyle: string,
+  fontWeight: string | number,
+  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/${contentHeight}px ${fontFamily}`
+  ctx.fillStyle = color
+  ctx.fillText(content, 0, 0)
+  ctx.restore()
+  waterMarkUrl.value = canvas.toDataURL()
+}
+
+/**
+ * 绘制在屏文字canvas
+ * @param ctx canvas上下文
+ * @param content 水印内容
+ * @param contentWidth 水印宽度
+ * @param rotate 水印内容倾斜角度
+ * @param fontSize 水印字体大小
+ * @param color 水印字体颜色
+ */
+function drawTextOnScreen(ctx: UniApp.CanvasContext, content: string, contentWidth: number, rotate: number, 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()
+  // #ifdef MP-DINGTALK
+  // 钉钉小程序的canvasToTempFilePath接口与其他平台不一样
+  ;(ctx as any).toTempFilePath({
+    success(res: any) {
+      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
+    }
+  })
+  // #endif
+}
+
+/**
+ * 绘制离屏图片canvas
+ * @param ctx canvas上下文
+ * @param img 水印图片对象
+ * @param image 水印图片地址
+ * @param imageHeight 水印图片高度
+ * @param imageWidth 水印图片宽度
+ * @param rotate 水印内容倾斜角度
+ * @param contentWidth 水印宽度
+ * @param contentHeight 水印高度
+ * @param canvas canvas实例
+ */
+async function drawImageOffScreen(
+  ctx: CanvasRenderingContext2D,
+  img: HTMLImageElement,
+  image: string,
+  imageHeight: number,
+  imageWidth: number,
+  rotate: number,
+  contentWidth: number,
+  contentHeight: number,
+  canvas: HTMLCanvasElement
+) {
+  ctx.translate(contentWidth / 2, contentHeight / 2)
+  ctx.rotate((Math.PI / 180) * Number(rotate))
+  img.crossOrigin = 'anonymous'
+  img.referrerPolicy = 'no-referrer'
+
+  if (isBase64Image(image)) {
+    img.src = image
+  } else {
+    img.src = buildUrlWithParams(image, {
+      timestamp: `${new Date().getTime()}`
+    })
+  }
+  img.onload = () => {
+    ctx.drawImage(
+      img,
+      (-imageWidth * pixelRatio.value) / 2,
+      (-imageHeight * pixelRatio.value) / 2,
+      imageWidth * pixelRatio.value,
+      imageHeight * pixelRatio.value
+    )
+    ctx.restore()
+    waterMarkUrl.value = canvas.toDataURL()
+  }
+}
+
+/**
+ * 绘制在屏图片canvas
+ * @param ctx canvas上下文
+ * @param image 水印图片地址
+ * @param imageHeight 水印图片高度
+ * @param imageWidth 水印图片宽度
+ * @param rotate 水印内容倾斜角度
+ * @param contentWidth 水印宽度
+ * @param contentHeight 水印高度
+ */
+function drawImageOnScreen(
+  ctx: UniApp.CanvasContext,
+  image: string,
+  imageHeight: number,
+  imageWidth: number,
+  rotate: number,
+  contentWidth: number,
+  contentHeight: number
+) {
+  ctx.translate(contentWidth / 2, contentHeight / 2)
+  ctx.rotate((Math.PI / 180) * Number(rotate))
+
+  ctx.drawImage(
+    image,
+    (-imageWidth * pixelRatio.value) / 2,
+    (-imageHeight * pixelRatio.value) / 2,
+    imageWidth * pixelRatio.value,
+    imageHeight * pixelRatio.value
+  )
+  ctx.restore()
+  ctx.draw(false, () => {
+    // #ifdef MP-DINGTALK
+    // 钉钉小程序的canvasToTempFilePath接口与其他平台不一样
+    ;(ctx as any).toTempFilePath({
+      success(res: any) {
+        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
+      }
+    })
+    // #endif
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-watermark/types.ts

@@ -0,0 +1,76 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
+
+export const watermarkProps = {
+  ...baseProps,
+  /**
+   * 显示内容
+   */
+  content: makeStringProp(''),
+  /**
+   * 显示图片的地址，支持网络图片和base64（钉钉小程序仅支持网络图片）
+   */
+  image: makeStringProp(''),
+  /**
+   * 图片高度
+   */
+  imageHeight: makeNumberProp(100),
+  /**
+   * 图片高度
+   */
+  imageWidth: makeNumberProp(100),
+  /**
+   * X轴间距，单位px
+   */
+  gutterX: makeNumberProp(0),
+  /**
+   * Y轴间距，单位px
+   */
+  gutterY: makeNumberProp(0),
+  /**
+   * canvas画布宽度，单位px
+   */
+  width: makeNumberProp(100),
+  /**
+   * canvas画布高度，单位px
+   */
+  height: makeNumberProp(100),
+  /**
+   * 是否为全屏水印
+   */
+  fullScreen: makeBooleanProp(true),
+  /**
+   * 水印字体颜色
+   */
+  color: makeStringProp('#8c8c8c'),
+  /**
+   * 水印字体大小，单位px
+   */
+  size: makeNumberProp(14),
+  /**
+   * 水印字体样式（仅微信和h5支持），可能的值：normal、italic、oblique
+   */
+  fontStyle: makeStringProp('normal'),
+  /**
+   * 水印字体的粗细（仅微信和h5支持）
+   */
+  fontWeight: makeNumericProp('normal'),
+  /**
+   * 水印字体系列（仅微信和h5支持）
+   */
+  fontFamily: makeStringProp('PingFang SC'),
+  /**
+   * 水印旋转角度
+   */
+  rotate: makeNumberProp(-25),
+  /**
+   * 自定义层级
+   */
+  zIndex: makeNumberProp(1100),
+  /**
+   * 自定义透明度，取值 0~1
+   */
+  opacity: makeNumberProp(0.5)
+}
+
+export type WatermarkProps = ExtractPropTypes<typeof watermarkProps>

package/dayjs/constant.js

@@ -0,0 +1,26 @@
+/* eslint-disable */
+export var SECONDS_A_MINUTE = 60;
+export var SECONDS_A_HOUR = SECONDS_A_MINUTE * 60;
+export var SECONDS_A_DAY = SECONDS_A_HOUR * 24;
+export var SECONDS_A_WEEK = SECONDS_A_DAY * 7;
+export var MILLISECONDS_A_SECOND = 1e3;
+export var MILLISECONDS_A_MINUTE = SECONDS_A_MINUTE * MILLISECONDS_A_SECOND;
+export var MILLISECONDS_A_HOUR = SECONDS_A_HOUR * MILLISECONDS_A_SECOND;
+export var MILLISECONDS_A_DAY = SECONDS_A_DAY * MILLISECONDS_A_SECOND;
+export var MILLISECONDS_A_WEEK = SECONDS_A_WEEK * MILLISECONDS_A_SECOND; // English locales
+
+export var MS = 'millisecond';
+export var S = 'second';
+export var MIN = 'minute';
+export var H = 'hour';
+export var D = 'day';
+export var W = 'week';
+export var M = 'month';
+export var Q = 'quarter';
+export var Y = 'year';
+export var DATE = 'date';
+export var FORMAT_DEFAULT = 'YYYY-MM-DDTHH:mm:ssZ';
+export var INVALID_DATE_STRING = 'Invalid Date'; // regex
+
+export var REGEX_PARSE = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/;
+export var REGEX_FORMAT = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g;