feat: watermark水印组件taro编译h5环境下适配 (#570)

src/packages/barrage/barrage.taro.tsx

@@ -67,7 +67,7 @@ const InternalBarrage: ForwardRefRenderFunction<
 
   const run = () => {
     clearInterval(timer.current)
-    timer.current = setInterval(() => {
+    timer.current = window.setInterval(() => {
       play()
       run()
     }, frequency)

src/packages/barrage/barrage.tsx

@@ -70,7 +70,7 @@ const InternalBarrage: ForwardRefRenderFunction<
 
   const run = () => {
     clearInterval(timer.current)
-    timer.current = setInterval(() => {
+    timer.current = window.setInterval(() => {
       play()
       run()
     }, frequency)

src/packages/calendaritem/calendaritem.taro.tsx

@@ -377,7 +377,7 @@ export const CalendarItem: FunctionComponent<
       if (type === 'end') {
         monthsPanel.current.style.webkitTransition = `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`
         clearTimeout(state.timer)
-        state.timer = setTimeout(() => {
+        state.timer = window.setTimeout(() => {
           loadScroll()
         }, time)
       } else {

src/packages/circleprogress/circleprogress.taro.tsx

@@ -69,13 +69,13 @@ export const CircleProgress: FunctionComponent<
       const rate = progress * (endRate - startRate) + startRate
       setOldValue(Math.min(Math.max(+rate, 0), 100))
       if (endRate > startRate ? rate < endRate : rate > endRate) {
-        rafId = requestAnimationFrame(animate)
+        rafId = window.requestAnimationFrame(animate)
       }
     }
     if (rafId) {
       cancelAnimationFrame(rafId)
     }
-    rafId = requestAnimationFrame(animate)
+    rafId = window.requestAnimationFrame(animate)
   }, [progress])
 
   const requestAnimationFrame = function (callback: Function) {

src/packages/countdown/demo.taro.tsx

@@ -35,7 +35,7 @@ const CountDownDemo = () => {
   }
 
   useEffect(() => {
-    stateRef.current.timer = setTimeout(() => {
+    stateRef.current.timer = window.setTimeout(() => {
       setAsyncEnd(Date.now() + 30 * 1000)
     }, 3000)
     return () => {

src/packages/countdown/demo.tsx

@@ -117,7 +117,7 @@ const CountDownDemo = () => {
   }
 
   useEffect(() => {
-    stateRef.current.timer = setTimeout(() => {
+    stateRef.current.timer = window.setTimeout(() => {
       setAsyncEnd(Date.now() + 30 * 1000)
     }, 3000)
     return () => {

src/packages/drag/drag.taro.tsx

@@ -123,7 +123,7 @@ export const Drag: FunctionComponent<
 
   useEffect(() => {
     eventCenter.once((getCurrentInstance() as any).router.onReady, () => {
-      timer.current = setTimeout(() => {
+      timer.current = window.setTimeout(() => {
         getInfo()
       }, 200)
     })

src/packages/noticebar/noticebar.taro.tsx

@@ -205,7 +205,10 @@ export const NoticeBar: FunctionComponent<
       height / speed / 4 < 1
         ? Number((height / speed / 4).toFixed(1)) * 1000
         : ~~(height / speed / 4) * 1000
-    const timerCurr = setInterval(showhorseLamp, time + Number(standTime))
+    const timerCurr = window.setInterval(
+      showhorseLamp,
+      time + Number(standTime)
+    )
     SetTimer(timerCurr)
   }
   const showhorseLamp = () => {
@@ -222,7 +225,7 @@ export const NoticeBar: FunctionComponent<
   }
 
   const startRoll = () => {
-    const timerCurr = setInterval(() => {
+    const timerCurr = window.setInterval(() => {
       const chunk = 100
       for (let i = 0; i < chunk; i++) {
         scroll(i, !(i < chunk - 1))

src/packages/noticebar/noticebar.tsx

@@ -202,7 +202,10 @@ export const NoticeBar: FunctionComponent<
       height / speed / 4 < 1
         ? Number((height / speed / 4).toFixed(1)) * 1000
         : ~~(height / speed / 4) * 1000
-    const timerCurr = setInterval(showhorseLamp, time + Number(standTime))
+    const timerCurr = window.setInterval(
+      showhorseLamp,
+      time + Number(standTime)
+    )
     SetTimer(timerCurr)
   }
   const showhorseLamp = () => {
@@ -219,7 +222,7 @@ export const NoticeBar: FunctionComponent<
   }
 
   const startRoll = () => {
-    const timerCurr = setInterval(() => {
+    const timerCurr = window.setInterval(() => {
       const chunk = 100
       for (let i = 0; i < chunk; i++) {
         scroll(i, !(i < chunk - 1))

src/packages/notify/notify.taro.tsx

@@ -74,7 +74,7 @@ export const Notify: FunctionComponent<
   const show = () => {
     clearTimer()
     if (duration) {
-      timer = setTimeout(() => {
+      timer = window.setTimeout(() => {
         hide()
       }, duration)
     }

src/packages/overlay/overlay.taro.tsx

@@ -90,7 +90,7 @@ export const Overlay: FunctionComponent<
     if (closeOnClickOverlay) {
       props.onClick && props.onClick(e)
       renderRef.current = false
-      const id = setTimeout(() => {
+      const id = window.setTimeout(() => {
         setShow(!visible)
       }, duration * 1000 * 0.8)
       intervalRef.current = id

src/packages/overlay/overlay.tsx

@@ -90,7 +90,7 @@ export const Overlay: FunctionComponent<
     if (closeOnClickOverlay) {
       props.onClick && props.onClick(e)
       renderRef.current = false
-      const id = setTimeout(() => {
+      const id = window.setTimeout(() => {
         setShow(!visible)
       }, duration * 1000 * 0.8)
       intervalRef.current = id

src/packages/toast/toast.taro.tsx

@@ -102,7 +102,7 @@ export const Toast: FunctionComponent<
   const show = () => {
     clearTimer()
     if (duration) {
-      timer = setTimeout(() => {
+      timer = window.setTimeout(() => {
         hide()
       }, duration * 1000)
     }

src/packages/watermark/watermark.taro.tsx

@@ -86,60 +86,70 @@ export const WaterMark: FunctionComponent<
 
   const init = () => {
     let ratio = 1
-    Taro.getSystemInfo({
-      success(res) {
-        ratio = res.pixelRatio
-      },
-    })
-    const canvasWidth = `${(gapX + width) * ratio}px`
-    const canvasHeight = `${(gapY + height) * ratio}px`
-    const markWidth = width * ratio
-    const markHeight = height * ratio
-    const canvas: any = Taro.createOffscreenCanvas({
-      type: '2d',
-      width: Number(canvasWidth),
-      height: Number(canvasHeight),
-    })
-    const ctx: any = canvas.getContext('2d')
+    Taro.getSystemInfo().then((res) => {
+      ratio = res.pixelRatio
+      const canvasWidth = `${(gapX + width) * ratio}px`
+      const canvasHeight = `${(gapY + height) * ratio}px`
+      const markWidth = width * ratio
+      const markHeight = height * ratio
+      let ctx: any
+      let canvas: any
+      if (process.env.TARO_ENV === 'h5') {
+        canvas = document.createElement('canvas')
+        ctx = canvas.getContext('2d')
+        canvas.setAttribute('width', canvasWidth)
+        canvas.setAttribute('height', canvasHeight)
+      } else {
+        canvas = Taro.createOffscreenCanvas({
+          type: '2d',
+          width: Number(canvasWidth),
+          height: Number(canvasHeight),
+        })
+        ctx = canvas.getContext('2d')
+      }
 
-    if (ctx) {
-      if (image) {
-        ctx.translate(markWidth / 2, markHeight / 2)
-        ctx.rotate((Math.PI / 180) * Number(rotate))
+      if (ctx) {
+        if (image) {
+          ctx.translate(markWidth / 2, markHeight / 2)
+          ctx.rotate((Math.PI / 180) * Number(rotate))
 
-        const img = canvas.createImage()
-        img.crossOrigin = 'anonymous'
-        img.referrerPolicy = 'no-referrer'
-        img.src = image
-        img.onload = () => {
-          ctx.drawImage(
-            img,
-            (-imageWidth * ratio) / 2,
-            (-imageHeight * ratio) / 2,
-            imageWidth * ratio,
-            imageHeight * ratio
-          )
-          ctx.restore()
+          let img: any
+          if (process.env.TARO_ENV === 'h5') {
+            img = new Image()
+          } else {
+            img = canvas.createImage()
+          }
+          img.crossOrigin = 'anonymous'
+          img.referrerPolicy = 'no-referrer'
+          img.src = image
+          img.onload = () => {
+            ctx.drawImage(
+              img,
+              (-imageWidth * ratio) / 2,
+              (-imageHeight * ratio) / 2,
+              imageWidth * ratio,
+              imageHeight * ratio
+            )
+            ctx.restore()
+            setBase64Url(canvas.toDataURL())
+          }
+        } else if (content) {
+          ctx.textBaseline = 'middle' // 设置或返回在绘制文本时使用的当前文本基线。(正中)
+          ctx.textAlign = 'center' // 设置或返回文本内容的当前对齐方式。
+          // 文字绕中间旋转
+          ctx.translate(markWidth / 2, markHeight / 2)
+          ctx.rotate((Math.PI / 180) * Number(rotate))
+          const markSize = Number(fontSize) * ratio
+          ctx.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`
+          ctx.fillStyle = fontColor
+          ctx.fillText(content, 0, 0) // 在画布上绘制"被填充的"文本。
+          ctx.restore() // 返回之前保存过的路径状态和属性。
           setBase64Url(canvas.toDataURL())
         }
-      } else if (content) {
-        ctx.textBaseline = 'middle' // 设置或返回在绘制文本时使用的当前文本基线。(正中)
-        ctx.textAlign = 'center' // 设置或返回文本内容的当前对齐方式。
-        // 文字绕中间旋转
-        ctx.translate(markWidth / 2, markHeight / 2)
-        ctx.rotate((Math.PI / 180) * Number(rotate))
-
-        const markSize = Number(fontSize) * ratio
-        ctx.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`
-        ctx.fillStyle = fontColor
-
-        ctx.fillText(content, 0, 0) // 在画布上绘制"被填充的"文本。
-        ctx.restore() // 返回之前保存过的路径状态和属性。
-        setBase64Url(canvas.toDataURL())
+      } else {
+        throw new Error(locale.watermark.errorCanvasTips)
       }
-    } else {
-      throw new Error(locale.watermark.errorCanvasTips)
-    }
+    })
   }
 
   return (

tsconfig.json

@@ -3,7 +3,7 @@
     "baseUrl": ".",
     "rootDir": ".",
     "target": "ESNext",
-    "types": ["vite/client", "jest"],
+    "types": ["vite/client", "jest", "node"],
     "allowJs": false,
     "declaration": true,
     "declarationDir": "./dist/esm/types",