@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/watermark/utils/generateBase64Url.js

@@ -0,0 +1,360 @@
+import { loadImage } from '../../common/canvas/index';
+import { getWindowInfo } from '../../common/utils';
+
+const ratio = getWindowInfo().pixelRatio || 1;
+
+// 元素中心为旋转点执行旋转
+const drawRotate = (
+  ctx,
+  x,
+  y,
+  rotate,
+) => {
+  ctx.translate(x, y);
+  ctx.rotate((Math.PI / 180) * Number(rotate));
+  ctx.translate(-x, -y);
+};
+
+// 绘制文字
+const drawText = (
+  ctx,
+  x,
+  y,
+  markHeight,
+  text,
+  fontWeight,
+  fontSize,
+  fontFamily,
+  fillStyle,
+) => {
+  ctx.font = `normal normal ${fontWeight} ${
+    fontSize * ratio
+  }px/${markHeight}px ${fontFamily}`;
+
+  ctx.fillStyle = fillStyle;
+  ctx.textAlign = 'start';
+  ctx.textBaseline = 'top';
+
+  ctx.fillText(text, x, y);
+};
+
+export default async function generateBase64Url(
+  canvas,
+  canvasId,
+  {
+    width,
+    height,
+    gapX,
+    gapY,
+    offsetLeft,
+    offsetTop,
+    rotate,
+    alpha,
+    watermarkContent,
+    lineSpace,
+    watermarkColor,
+    layout,
+  },
+  onFinish,
+  onFinally,
+) {
+  const isHexagonal = layout === 'hexagonal';
+
+  let ctx;
+
+  // #ifdef MP || H5
+  ctx = canvas.getContext('2d', { willReadFrequently: true });
+  // #endif
+
+  if (!ctx) {
+    ctx = uni.createCanvasContext(canvasId, this);
+  }
+  if (!ctx) {
+    console.warn('当前环境不支持Canvas, 无法绘制水印');
+    onFinish('');
+    return;
+  }
+
+  let actualBackgroundSize = {
+    width: gapX + width,
+  };
+
+  const canvasWidth = (gapX + width) * ratio;
+  const canvasHeight = (gapY + height) * ratio;
+
+  const markWidth = width * ratio;
+  const markHeight = height * ratio;
+
+  const dislocationRotateX = canvasWidth;
+  const dislocationRotateY = canvasHeight;
+  const dislocationDrawX = (gapX + width) * ratio;
+  const dislocationDrawY = (gapY + height) * ratio;
+
+  canvas.width = canvasWidth;
+  canvas.height = canvasHeight;
+
+  if (isHexagonal) {
+    canvas.width = canvasWidth * 2;
+    canvas.height = canvasHeight * 2;
+
+    // 两倍宽度+间距
+    actualBackgroundSize = {
+      width: gapX + width * 2 + width / 2,
+    };
+  }
+
+  ctx.globalAlpha = alpha;
+
+  // h5需要全局缩放
+  // #ifdef H5 || APP-PLUS
+  ctx.scale(1 / ratio, 1 / ratio);
+  // #endif
+
+  ctx.fillStyle = 'transparent';
+  ctx.fillRect(0, 0, markWidth, markHeight);
+
+  ctx.translate(offsetLeft * ratio, offsetTop * ratio);
+
+  const contents = Array.isArray(watermarkContent)
+    ? watermarkContent
+    : [{ ...watermarkContent }];
+
+  let top = 0;
+
+  // 预处理
+  contents.forEach((item) => {
+    item.top = top;
+    if (item.url) {
+      top += height;
+    } else if (item.text) {
+      top += lineSpace;
+    }
+  });
+
+
+  // 绘制水印内容
+  const renderWatermarkItem = async (
+    item,
+    offsetX = 0,
+    offsetY = 0,
+    rotateX = 0,
+    rotateY = 0,
+  ) => {
+    if (item.url) {
+      const { url, isGrayscale = false } = item;
+      const img = await loadImage({
+        canvas,
+        src: url,
+      });
+
+      ctx.save?.();
+      drawRotate(ctx, rotateX, rotateY, rotate);
+
+      // TODO：其他技术栈修复了「灰度效果只影响图片，不影响文字」的bug，因为小程序不能创建临时canvas，暂时没有想到比较优雅的解决方案
+      if (isGrayscale) {
+        // #ifdef APP-PLUS
+        ctx.drawImage(
+          img,
+          offsetX,
+          offsetY + item.top * ratio,
+          width * ratio / 2,
+          height * ratio / 2,
+        );
+        // #endif
+
+        // #ifndef APP-PLUS
+        ctx.drawImage(
+          img,
+          offsetX,
+          offsetY + item.top * ratio,
+          width * ratio,
+          height * ratio,
+        );
+        // #endif
+        const imgData = await getImageData(ctx, {
+          x: 0,
+          y: 0,
+          width,
+          height,
+        });
+        const pixels = imgData.data;
+        for (let i = 0; i < pixels.length; i += 4) {
+          const lightness = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3;
+          pixels[i] = lightness;
+          pixels[i + 1] = lightness;
+          pixels[i + 2] = lightness;
+        }
+        await putImageData(ctx, imgData, {
+          x: 0,
+          y: 0,
+        });
+      } else {
+        // #ifdef APP-PLUS
+        ctx.drawImage(
+          img,
+          offsetX,
+          (offsetY + item.top * ratio),
+          width * ratio / 2,
+          height * ratio / 2,
+        );
+        // #endif
+
+        // #ifndef APP-PLUS
+        ctx.drawImage(
+          img,
+          offsetX,
+          offsetY + item.top * ratio,
+          width * ratio,
+          height * ratio,
+        );
+        // #endif
+      }
+
+      ctx.restore?.();
+      return;
+    }
+
+    if (item.text) {
+      const {
+        text,
+        fontSize = 16,
+        fontFamily = 'normal',
+        fontWeight = 'normal',
+      } = item;
+      const fillStyle = item?.fontColor || watermarkColor;
+
+      ctx.save?.();
+      drawRotate(ctx, rotateX, rotateY, rotate);
+      drawText(
+        ctx,
+        offsetX,
+        offsetY + item.top * ratio,
+        markHeight,
+        text,
+        fontWeight,
+        fontSize,
+        fontFamily,
+        fillStyle,
+      );
+      ctx.restore?.();
+    }
+  };
+
+  // 矩形水印
+  for (const item of contents) {
+    await renderWatermarkItem(item, 0, 0, 0, 0);
+  }
+
+  // 六边形水印
+  if (isHexagonal) {
+    for (const item of contents) {
+      await renderWatermarkItem(
+        item,
+        dislocationDrawX,
+        dislocationDrawY,
+        dislocationRotateX,
+        dislocationRotateY,
+      );
+    }
+  }
+  // #ifdef APP-PLUS
+  ctx.draw();
+  // #endif
+
+
+  // 没有图片
+  const canvasUrl = await exportCanvasImage.call(this, canvas, canvasId);
+  onFinish(canvasUrl, actualBackgroundSize, ratio);
+
+  onFinally?.();
+}
+// 跨平台 Canvas 导出方法
+export function exportCanvasImage(canvas, canvasId) {
+  return new Promise((resolve, reject) => {
+    let parsed = false;
+    // #ifdef H5 || MP
+    resolve(canvas.toDataURL('image/png'));
+    parsed = true;
+    // #endif
+
+    if (parsed) return;
+    const query = uni.createSelectorQuery().in(this);
+
+    query
+      .select(`#${canvasId}`)
+      .fields({ node: true, size: true })
+      .exec(async (res) => {
+        if (!res[0]?.node) {
+          console.error('Canvas node not found');
+          return;
+        }
+
+        uni.canvasToTempFilePath({
+          // #ifdef MP
+          canvas: res[0].node,
+          // #endif
+          // #ifndef MP
+          canvasId,
+          // #endif
+          success: res => resolve(res.tempFilePath),
+          fail: reject,
+        });
+      });
+  });
+}
+
+
+async function getImageData(ctx, options) {
+  let result;
+  // #ifdef H5 || MP
+  result = ctx.getImageData(options.x, options.y, options.width, options.height);
+  // #endif
+
+  if (!result) {
+    result = new Promise((resolve) => {
+      uni.canvasGetImageData({
+        canvasId: options.canvasId,
+        x: options.x,
+        y: options.y,
+        width: options.width,
+        height: options.height,
+        success: (res) => {
+        // 小程序/App 返回的数据结构需要转换
+          resolve({
+            data: new Uint8ClampedArray(res.data),
+            width: res.width,
+            height: res.height,
+          });
+        },
+      }, this);
+    });
+  }
+
+  return result;
+}
+
+
+async function putImageData(ctx, imageData, options) {
+  let result;
+  // #ifdef H5 || MP
+  ctx.putImageData(imageData, options.x, options.y);
+  result = Promise.resolve();
+  // #endif
+
+  if (!result) {
+    result = new Promise((resolve, reject) => {
+      uni.canvasPutImageData({
+        canvasId: options.canvasId,
+        x: options.x,
+        y: options.y,
+        width: imageData.width,
+        height: imageData.height,
+        data: imageData.data,
+        success: resolve,
+        fail: reject,
+      }, this);
+    });
+  }
+
+  return result;
+}

package/dist/watermark/utils/randomMovingStyle.js

@@ -0,0 +1,27 @@
+/* eslint-disable no-nested-ternary */
+export default function randomMovingStyle() {
+  const align = Math.floor(Math.random() * 4);
+  const p1 = Math.floor(Math.random() * 70) + 30;
+  const leftTopLimit = 0;
+  const bottomLimit = 95;
+  const rightLimit = 90;
+  const left0 = align === 1 ? rightLimit : align === 3 ? leftTopLimit : p1;
+  const left25 = align === 0 ? rightLimit : align === 2 ? leftTopLimit : 100 - p1;
+  const left50 = align === 1 ? leftTopLimit : align === 3 ? rightLimit : 100 - p1;
+  const left75 = align === 0 ? leftTopLimit : align === 2 ? rightLimit : p1;
+  const top0 = align === 0 ? leftTopLimit : align === 2 ? bottomLimit : p1;
+  const top25 = align === 1 ? bottomLimit : align === 3 ? leftTopLimit : p1;
+  const top50 = align === 0 ? bottomLimit : align === 2 ? leftTopLimit : 100 - p1;
+  const top75 = align === 1 ? leftTopLimit : align === 3 ? bottomLimit : 100 - p1;
+
+  return {
+    left0: `${left0}%`,
+    left25: `${left25}%`,
+    left50: `${left50}%`,
+    left75: `${left75}%`,
+    top0: `${top0}%`,
+    top25: `${top25}%`,
+    top50: `${top50}%`,
+    top75: `${top75}%`,
+  };
+}

package/dist/watermark/watermark.css

@@ -0,0 +1,28 @@
+.t-watermark {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+}
+@keyframes watermark {
+  0% {
+    left: var(--watermark-left-0);
+    top: var(--watermark-top-0);
+  }
+  25% {
+    left: var(--watermark-left-25);
+    top: var(--watermark-top-25);
+  }
+  50% {
+    left: var(--watermark-left-50);
+    top: var(--watermark-top-50);
+    transform: translateX(-100%);
+  }
+  75% {
+    left: var(--watermark-left-75);
+    top: var(--watermark-top-75);
+  }
+  100% {
+    left: var(--watermark-left-0);
+    top: var(--watermark-top-0);
+  }
+}

package/dist/watermark/watermark.vue

@@ -0,0 +1,200 @@
+<template>
+  <view
+    :class="classPrefix + ' ' + tClass"
+    :style="tools._style([customStyle])"
+  >
+    <block v-if="content">
+      {{ content }}
+    </block>
+    <slot name="content" />
+    <slot />
+    <canvas
+      :id="canvasId"
+      :canvas-id="canvasId"
+      type="2d"
+      :style="canvasStyle"
+    />
+    <view
+      :class="movable ? 'watermark-move' : ''"
+      :style="tools._style(watermarkStyle)"
+    />
+  </view>
+</template>
+
+<script>
+import tools from '../common/utils.wxs';
+import watermarkProps from './props';
+import { prefix } from '../common/config';
+import { uniComponent } from '../common/src/index';
+import { appBaseInfo, nextTick } from '../common/utils';
+import generateBase64Url from './utils/generateBase64Url';
+import randomMovingStyle from './utils/randomMovingStyle';
+
+const name = `${prefix}-watermark`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [`${prefix}-class`],
+  props: {
+    ...watermarkProps,
+  },
+  data() {
+    return {
+      classPrefix: name,
+      tools,
+      watermarkStyle: {},
+      initialed: false,
+      canvasId: `watermark-canvas-${Math.random().toString(36)
+        .slice(2, 11)}`,
+    };
+  },
+  computed: {
+    canvasStyle() {
+      let result = 'width: 100px; height: 100px;';
+      let shouldHide = true;
+
+      // #ifdef APP-PLUS || MP-ALIPAY
+      if (!this.initialed) {
+        shouldHide = false;
+      }
+      // #endif
+
+      if (shouldHide) {
+        result += 'display: none;';
+      }
+      return result;
+    },
+  },
+  watch: {
+    watermarkContent: 'renderWatermark',
+    movable: 'renderWatermark',
+    rotate: 'renderWatermark',
+    x: 'renderWatermark',
+    y: 'renderWatermark',
+    width: 'renderWatermark',
+    height: 'renderWatermark',
+    alpha: 'renderWatermark',
+    lineSpace: 'renderWatermark',
+    moveInterval: 'renderWatermark',
+    zIndex: 'renderWatermark',
+    offset: 'renderWatermark',
+    removable: 'renderWatermark',
+    isRepeat: 'renderWatermark',
+    layout: 'renderWatermark',
+  },
+  async mounted() {
+    await nextTick();
+    this.renderWatermark();
+  },
+  methods: {
+    watermarkColor() {
+      return appBaseInfo.theme === 'dark'
+        ? 'rgba(238, 238, 238, 0.1)'
+        : 'rgba(0, 0, 0, 0.1)';
+    },
+    renderWatermark() {
+      const query = uni.createSelectorQuery().in(this);
+
+      query
+        .select(`#${this.canvasId}`)
+        .fields({ node: true, size: true })
+        .exec(async (res) => {
+          if (!res[0]?.node) {
+            console.error('Canvas node not found');
+            return;
+          }
+          const canvas = res[0].node;
+          const gapX = this.movable ? 0 : this.x;
+          const gapY = this.movable ? 0 : this.y;
+          const offset = this.offset || [];
+          const offsetLeft = offset[0] || gapX / 2;
+          const offsetTop = offset[1] || gapY / 2;
+
+          const bgImageOptions = {
+            width: this.width,
+            height: this.height,
+            rotate: this.movable ? 0 : this.rotate,
+            lineSpace: this.lineSpace,
+            alpha: this.alpha,
+            gapX,
+            gapY,
+            watermarkContent: this.watermarkContent,
+            offsetLeft,
+            offsetTop,
+            watermarkColor: this.watermarkColor(),
+            layout: this.layout,
+          };
+          generateBase64Url.call(
+            this,
+            canvas,
+            this.canvasId,
+            bgImageOptions,
+            (base64Url, backgroundSize) => {
+              let animationVars = {};
+              if (this.movable) {
+                const {
+                  left0,
+                  left25,
+                  left50,
+                  left75,
+                  top0,
+                  top25,
+                  top50,
+                  top75,
+                } = randomMovingStyle();
+                animationVars = {
+                  '--watermark-left-0': left0,
+                  '--watermark-left-25': left25,
+                  '--watermark-left-50': left50,
+                  '--watermark-left-75': left75,
+                  '--watermark-top-0': top0,
+                  '--watermark-top-25': top25,
+                  '--watermark-top-50': top50,
+                  '--watermark-top-75': top75,
+                  '--watermark-animation-duration': `${
+                    (this.moveInterval * 4) / 60
+                  }s`,
+                };
+              }
+
+              this.watermarkStyle = {
+                zIndex: this.zIndex,
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0,
+                width: '100%',
+                height: '100%',
+                backgroundSize: `${
+                  backgroundSize?.width || gapX + this.width
+                }px`,
+                pointerEvents: 'none',
+                backgroundRepeat: this.movable ? 'no-repeat' : 'repeat',
+                backgroundImage: `url('${base64Url}')`,
+                ...animationVars,
+              };
+            },
+            () => {
+              this.initialed = true;
+            },
+          ).catch((e) => {
+            console.log('e', e);
+          });
+        });
+    },
+  },
+});
+</script>
+
+<style scoped>
+@import './watermark.css';
+
+/* diff with td-mini */
+.watermark-move {
+  animation: watermark var(--watermark-animation-duration, 100s) linear infinite;
+}
+</style>

package/global.d.ts

@@ -0,0 +1,84 @@
+declare module 'vue' {
+  export interface GlobalComponents {
+    TActionSheet: typeof import('@tdesign/uniapp/action-sheet/action-sheet.vue').default;
+    TAvatar: typeof import('@tdesign/uniapp/avatar/avatar.vue').default;
+    TAvatarGroup: typeof import('@tdesign/uniapp/avatar-group/avatar-group.vue').default;
+    TBackTop: typeof import('@tdesign/uniapp/back-top/back-top.vue').default;
+    TBadge: typeof import('@tdesign/uniapp/badge/badge.vue').default;
+    TButton: typeof import('@tdesign/uniapp/button/button.vue').default;
+    TCalendar: typeof import('@tdesign/uniapp/calendar/calendar.vue').default;
+    TCascader: typeof import('@tdesign/uniapp/cascader/cascader.vue').default;
+    TCell: typeof import('@tdesign/uniapp/cell/cell.vue').default;
+    TCellGroup: typeof import('@tdesign/uniapp/cell-group/cell-group.vue').default;
+    TCheckTag: typeof import('@tdesign/uniapp/check-tag/check-tag.vue').default;
+    TCheckbox: typeof import('@tdesign/uniapp/checkbox/checkbox.vue').default;
+    TCheckboxGroup: typeof import('@tdesign/uniapp/checkbox-group/checkbox-group.vue').default;
+    TCol: typeof import('@tdesign/uniapp/col/col.vue').default;
+    TCollapse: typeof import('@tdesign/uniapp/collapse/collapse.vue').default;
+    TCollapsePanel: typeof import('@tdesign/uniapp/collapse-panel/collapse-panel.vue').default;
+    TColorPicker: typeof import('@tdesign/uniapp/color-picker/color-picker.vue').default;
+    TCountDown: typeof import('@tdesign/uniapp/count-down/count-down.vue').default;
+    TDateTimePicker: typeof import('@tdesign/uniapp/date-time-picker/date-time-picker.vue').default;
+    TDialog: typeof import('@tdesign/uniapp/dialog/dialog.vue').default;
+    TDivider: typeof import('@tdesign/uniapp/divider/divider.vue').default;
+    TDrawer: typeof import('@tdesign/uniapp/drawer/drawer.vue').default;
+    TDropdownItem: typeof import('@tdesign/uniapp/dropdown-item/dropdown-item.vue').default;
+    TDropdownMenu: typeof import('@tdesign/uniapp/dropdown-menu/dropdown-menu.vue').default;
+    TEmpty: typeof import('@tdesign/uniapp/empty/empty.vue').default;
+    TFab: typeof import('@tdesign/uniapp/fab/fab.vue').default;
+    TFooter: typeof import('@tdesign/uniapp/footer/footer.vue').default;
+    TForm: typeof import('@tdesign/uniapp/form/form.vue').default;
+    TFormItem: typeof import('@tdesign/uniapp/form-item/form-item.vue').default;
+    TGrid: typeof import('@tdesign/uniapp/grid/grid.vue').default;
+    TGridItem: typeof import('@tdesign/uniapp/grid-item/grid-item.vue').default;
+    TGuide: typeof import('@tdesign/uniapp/guide/guide.vue').default;
+    TIcon: typeof import('@tdesign/uniapp/icon/icon.vue').default;
+    TImage: typeof import('@tdesign/uniapp/image/image.vue').default;
+    TImageViewer: typeof import('@tdesign/uniapp/image-viewer/image-viewer.vue').default;
+    TIndexes: typeof import('@tdesign/uniapp/indexes/indexes.vue').default;
+    TIndexesAnchor: typeof import('@tdesign/uniapp/indexes-anchor/indexes-anchor.vue').default;
+    TInput: typeof import('@tdesign/uniapp/input/input.vue').default;
+    TLink: typeof import('@tdesign/uniapp/link/link.vue').default;
+    TLoading: typeof import('@tdesign/uniapp/loading/loading.vue').default;
+    TMessage: typeof import('@tdesign/uniapp/message/message.vue').default;
+    TNavbar: typeof import('@tdesign/uniapp/navbar/navbar.vue').default;
+    TNoticeBar: typeof import('@tdesign/uniapp/notice-bar/notice-bar.vue').default;
+    TOverlay: typeof import('@tdesign/uniapp/overlay/overlay.vue').default;
+    TPicker: typeof import('@tdesign/uniapp/picker/picker.vue').default;
+    TPickerItem: typeof import('@tdesign/uniapp/picker-item/picker-item.vue').default;
+    TPopup: typeof import('@tdesign/uniapp/popup/popup.vue').default;
+    TProgress: typeof import('@tdesign/uniapp/progress/progress.vue').default;
+    TPullDownRefresh: typeof import('@tdesign/uniapp/pull-down-refresh/pull-down-refresh.vue').default;
+    TQrcode: typeof import('@tdesign/uniapp/qrcode/qrcode.vue').default;
+    TRadio: typeof import('@tdesign/uniapp/radio/radio.vue').default;
+    TRadioGroup: typeof import('@tdesign/uniapp/radio-group/radio-group.vue').default;
+    TRate: typeof import('@tdesign/uniapp/rate/rate.vue').default;
+    TResult: typeof import('@tdesign/uniapp/result/result.vue').default;
+    TRow: typeof import('@tdesign/uniapp/row/row.vue').default;
+    TSearch: typeof import('@tdesign/uniapp/search/search.vue').default;
+    TSideBar: typeof import('@tdesign/uniapp/side-bar/side-bar.vue').default;
+    TSideBarItem: typeof import('@tdesign/uniapp/side-bar-item/side-bar-item.vue').default;
+    TSkeleton: typeof import('@tdesign/uniapp/skeleton/skeleton.vue').default;
+    TSlider: typeof import('@tdesign/uniapp/slider/slider.vue').default;
+    TStepItem: typeof import('@tdesign/uniapp/step-item/step-item.vue').default;
+    TStepper: typeof import('@tdesign/uniapp/stepper/stepper.vue').default;
+    TSteps: typeof import('@tdesign/uniapp/steps/steps.vue').default;
+    TSticky: typeof import('@tdesign/uniapp/sticky/sticky.vue').default;
+    TSwipeCell: typeof import('@tdesign/uniapp/swipe-cell/swipe-cell.vue').default;
+    TSwiper: typeof import('@tdesign/uniapp/swiper/swiper.vue').default;
+    TSwiperNav: typeof import('@tdesign/uniapp/swiper-nav/swiper-nav.vue').default;
+    TSwitch: typeof import('@tdesign/uniapp/switch/switch.vue').default;
+    TTabBar: typeof import('@tdesign/uniapp/tab-bar/tab-bar.vue').default;
+    TTabBarItem: typeof import('@tdesign/uniapp/tab-bar-item/tab-bar-item.vue').default;
+    TTabPanel: typeof import('@tdesign/uniapp/tab-panel/tab-panel.vue').default;
+    TTabs: typeof import('@tdesign/uniapp/tabs/tabs.vue').default;
+    TTag: typeof import('@tdesign/uniapp/tag/tag.vue').default;
+    TTextarea: typeof import('@tdesign/uniapp/textarea/textarea.vue').default;
+    TToast: typeof import('@tdesign/uniapp/toast/toast.vue').default;
+    TTreeSelect: typeof import('@tdesign/uniapp/tree-select/tree-select.vue').default;
+    TUpload: typeof import('@tdesign/uniapp/upload/upload.vue').default;
+    TWatermark: typeof import('@tdesign/uniapp/watermark/watermark.vue').default;
+  }
+}
+
+export {};