ideaz-element/lib/element/watermark/src/index.cjs.map

<p align="center"> <a href="" target="_blank" rel="noopener noreferrer"> <img src="./docs/public/logo.svg" alt="Ideaz Element" width="180" style="width: 180px;" /> </a> </p>

{"version":3,"file":"index.cjs","sources":["../../../../../packages/element/watermark/src/index.tsx"],"sourcesContent":["import { convertToPx } from '@ideaz/utils'\nimport { watermarkProps } from './watermark'\n\nconst getPixelRatio = (context: any) => {\n  if (!context)\n    return 1\n\n  const backingStore\n    = context.backingStorePixelRatio\n    || context.webkitBackingStorePixelRatio\n    || context.mozBackingStorePixelRatio\n    || context.msBackingStorePixelRatio\n    || context.oBackingStorePixelRatio\n    || context.backingStorePixelRatio\n    || 1\n  return (window.devicePixelRatio || 1) / backingStore\n}\n\nexport default defineComponent({\n  name: 'ZWatermark',\n  props: watermarkProps,\n  setup(props, { slots }) {\n    const ns = useNamespace('watermark')\n    const { t } = useLocale()\n    const base64Url = ref('')\n\n    onMounted(() => {\n      const {\n        gapX: propsGapX = 212,\n        gapY: propsGapY = 222,\n        width: propsWidth = 120,\n        height: propsHeight = 64,\n        rotate: propsRotate = -22, // default -22\n        image,\n        content,\n        offsetLeft: propsOffsetLeft,\n        offsetTop: propsOffsetTop,\n        fontStyle = 'normal',\n        fontWeight = 'normal',\n        fontColor = 'rgba(0,0,0,.15)',\n        fontSize: propsFontSize = 16,\n        fontFamily = 'sans-serif',\n      } = props\n      // translate string(such as '20', '20px') and number to number\n      const height = convertToPx(propsHeight)\n      const width = convertToPx(propsWidth)\n      const fontSize = convertToPx(propsFontSize)\n      const rotate = convertToPx(propsRotate)\n      const gapY = convertToPx(propsGapY)\n      const gapX = convertToPx(propsGapX)\n      const offsetLeft = convertToPx(propsOffsetLeft || 0)\n      const offsetTop = convertToPx(propsOffsetTop || 0)\n\n      const canvas = document.createElement('canvas')\n      const ctx = canvas.getContext('2d')\n      const ratio = getPixelRatio(ctx)\n\n      const canvasWidth = `${(gapX + width) * ratio}px`\n      const canvasHeight = `${(gapY + height) * ratio}px`\n      const canvasOffsetLeft = offsetLeft || gapX / 2\n      const canvasOffsetTop = offsetTop || gapY / 2\n\n      canvas.setAttribute('width', canvasWidth)\n      canvas.setAttribute('height', canvasHeight)\n\n      if (ctx) {\n        ctx.translate(canvasOffsetLeft * ratio, canvasOffsetTop * ratio)\n        ctx.rotate((Math.PI / 180) * Number(rotate))\n        const markWidth = width * ratio\n        const markHeight = height * ratio\n\n        if (image) {\n          const img = new Image()\n          img.crossOrigin = 'anonymous'\n          img.referrerPolicy = 'no-referrer'\n          img.src = image\n          img.onload = () => {\n            ctx.drawImage(img, 0, 0, markWidth, markHeight)\n            base64Url.value = canvas.toDataURL()\n          }\n        }\n        else if (content) {\n          const markSize = Number(fontSize) * ratio\n          ctx.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`\n          ctx.fillStyle = fontColor\n          if (Array.isArray(content)) {\n            content?.forEach((item, index) => {\n              ctx.fillText(item, 0, index * 50)\n            })\n          }\n          else {\n            ctx.fillText(content, 0, 0)\n          }\n          base64Url.value = canvas.toDataURL()\n        }\n      }\n      else {\n        console.error(t('watermark.tip'))\n      }\n    })\n\n    return () => {\n      const {\n        style,\n        markStyle,\n        zIndex = 9,\n        gapX: propsGapX = 212,\n        width: propsWidth = 120,\n        markClassName,\n        className,\n      } = props\n      const width = convertToPx(propsWidth)\n      const gapX = convertToPx(propsGapX)\n\n      return (\n        <div\n          style={{\n            position: 'relative',\n            ...style,\n          }}\n          class={[ns.b('wrapper'), className]}\n        >\n          {slots.default?.()}\n          <div\n            class={markClassName}\n            style={{\n              zIndex: Number(zIndex),\n              position: 'absolute',\n              left: 0,\n              top: 0,\n              width: '100%',\n              height: '100%',\n              backgroundSize: `${gapX + width}px`,\n              pointerEvents: 'none',\n              backgroundRepeat: 'repeat',\n              ...(base64Url.value\n                ? {\n                    backgroundImage: `url('${base64Url.value}')`,\n                  }\n                : {}),\n              ...markStyle,\n            }}\n          />\n        </div>\n      )\n    }\n  },\n})\n"],"names":["getPixelRatio","context","backingStore","WaterMark","vue","name","props","slots","ns","useNamespace","t","base64Url","onMounted","rotate","offsetLeft","offsetTop","fontStyle","fontWeight","fontColor","fontFamily","height","string","propsHeight","width","propsWidth","fontSize","propsFontSize","propsRotate","gapY","propsGapY","gapX","propsGapX","propsOffsetLeft","propsOffsetTop","canvas","ctx","ratio","canvasOffsetLeft","canvasOffsetTop","markWidth","markHeight","image","img","markSize","content","console","zIndex","className","position","_a","markClassName","left","top","backgroundSize","pointerEvents","backgroundRepeat","backgroundImage"],"mappings":"yOAGAA,EAAAC,GAAA,CACE,GAAA,CAAAA,EAAA,MAAA,qLAWA,OAAA,OAAA,kBAAA,GAAAC,CACF,EAEAC,EAAAC,EAAA,gBAAA,CACEC,KAAAA,aACAC,MAAAA,EAAAA,wBACeC,MAAAA,CAAM,EAAA,CACnB,MAAAC,EAAAC,EAAA,aAAA,WAAA,GACQC,EAAAA,iBACRC,EAAAP,EAAA,IAAA,EAAA,EAEAQ,OAAAA,EAAAA,UAAAA,IAAAA,qDAMIC,OAAAA,EAAAA,sBAGAC,WAAAA,EACAC,UAAAA,EACAC,UAAAA,EAAAA,SACAC,WAAAA,EAAAA,SACAC,UAAAA,EAAAA,gCAEAC,WAAAA,EAAAA,YACF,EAAAb,EAEAc,EAAAC,EAAA,YAAAC,CAAA,EACAC,EAAAF,EAAA,YAAAG,CAAA,EACAC,EAAAJ,EAAA,YAAAK,CAAA,EACAb,EAAAQ,EAAA,YAAAM,CAAA,EACAC,EAAAP,EAAA,YAAAQ,CAAA,EACAC,EAAAT,EAAA,YAAAU,CAAA,EACAjB,EAAAO,EAAA,YAAAW,GAAA,CAAA,EACAjB,EAAAM,EAAA,YAAAY,GAAA,CAAA,EAEAC,EAAA,SAAA,cAAA,QAAA,EACAC,EAAAD,EAAA,WAAA,IAAA,EACAE,EAAApC,EAAAmC,CAAA,oCAIAE,EAAAvB,GAAAgB,EAAA,EACAQ,EAAAvB,GAAAa,EAAA,EAKA,GAHAM,EAAAA,aAAAA,QAAAA,CAAAA,EACAA,EAAAA,aAAAA,SAAAA,CAAAA,EAEAC,EAAA,sBAEEA,EAAAA,OAAAA,KAAAA,GAAAA,IAAAA,OAAAA,CAAAA,CAAAA,EACA,MAAAI,EAAAhB,EAAAa,EACAI,EAAApB,EAAAgB,EAEA,GAAAK,EAAA,CACE,MAAAC,EAAA,IAAA,qFAKEP,EAAAA,UAAAA,EAAAA,EAAAA,EAAAA,EAAAA,CAAAA,EACAxB,EAAAA,MAAAA,EAAAA,UAAAA,cAIF,MAAAgC,EAAA,OAAAlB,CAAA,EAAAW,EACAD,EAAAA,KAAAA,GAAAA,CAAAA,WAAAA,CAAAA,IAAAA,CAAAA,MAAAA,CAAAA,MAAAA,CAAAA,iBAEA,MAAA,QAAAS,CAAA,EACEA,GAAAA,MAAAA,EAAAA,QAAAA,CAAAA,EAAAA,IAAAA,qBAEA,qBAKFjC,EAAAA,MAAAA,EAAAA,UAAAA,CACF,CACF,MAEEkC,QAAAA,MAAAA,EAAAA,eAAAA,CAAAA,CAEJ,CAAA,EAEA,IAAA,iCAIIC,OAAAA,EAAAA,yCAIAC,UAAAA,CACF,EAAAzC,EACAiB,EAAAF,EAAA,YAAAG,CAAA,EACAM,EAAAT,EAAA,YAAAU,CAAA,EAEA,OAAA3B,EAAA,YAAA,MAAA,QAGM4C,SAAAA,yCAGiC,EAAA,EAAAC,EAAA1C,EAAA,UAAA,YAAA0C,EAAA,KAAA1C,GAAAH,EAAA,YAAA,MAAA,CAEjB,MAAA8C,SAIdJ,OAAAA,OAAAA,CAAAA,EACAE,SAAAA,WACAG,KAAAA,EACAC,IAAAA,EACA7B,MAAAA,OACAH,OAAAA,OACAiC,eAAAA,GAAAA,EAAAA,CAAAA,KACAC,cAAAA,OACAC,iBAAAA,qBAGMC,gBAAAA,QAAAA,EAAAA,KAAAA,aAIR,CAAC,EAAA,IAAA,CAAA,CAAA,EAKX,CACF,CAAA"}