ideaz-element/es/element/watermark/src/index.mjs.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.mjs","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","defineComponent","name","props","slots","ns","useNamespace","t","base64Url","ref","onMounted","rotate","offsetLeft","offsetTop","fontStyle","fontWeight","fontColor","fontFamily","height","convertToPx","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","createVNode","position","_a","markClassName","left","top","backgroundSize","pointerEvents","backgroundRepeat","backgroundImage"],"mappings":";;;;;;AAGA,MAAAA,IAAA,CAAAC,MAAA;AACE,MAAA,CAAAA,EAAA,QAAA;;AAWA,UAAA,OAAA,oBAAA,KAAAC;AACF,GAEAC,KAAA,gBAAAC,EAAA;AAAA,EACEC,MAAAA;AAAAA,EACAC,OAAAA;AAAAA;IACeC,OAAAA;AAAAA,EAAM,GAAA;AACnB,UAAAC,IAAAC,EAAA,WAAA;MACQC,GAAAA;AAAAA,aACRC,IAAAC,EAAA,EAAA;AAEAC,WAAAA,EAAAA,MAAAA;;;;;;QAMIC,QAAAA,IAAAA;AAAAA;AAAAA;;QAGAC,YAAAA;AAAAA,QACAC,WAAAA;AAAAA,QACAC,WAAAA,IAAAA;AAAAA,QACAC,YAAAA,IAAAA;AAAAA,QACAC,WAAAA,IAAAA;AAAAA;QAEAC,YAAAA,IAAAA;AAAAA,MACF,IAAAd,GAEAe,IAAAC,EAAAC,CAAA,GACAC,IAAAF,EAAAG,CAAA,GACAC,IAAAJ,EAAAK,CAAA,GACAb,IAAAQ,EAAAM,CAAA,GACAC,IAAAP,EAAAQ,CAAA,GACAC,IAAAT,EAAAU,CAAA,GACAjB,IAAAO,EAAAW,KAAA,CAAA,GACAjB,IAAAM,EAAAY,KAAA,CAAA,GAEAC,IAAA,SAAA,cAAA,QAAA,GACAC,IAAAD,EAAA,WAAA,IAAA,GACAE,IAAArC,EAAAoC,CAAA,mDAIAE,IAAAvB,KAAAgB,IAAA,GACAQ,IAAAvB,KAAAa,IAAA;AAKA,UAHAM,EAAAA,aAAAA,SAAAA,CAAAA,GACAA,EAAAA,aAAAA,UAAAA,CAAAA,GAEAC,GAAA;mCAEEA,EAAAA,OAAAA,KAAAA,KAAAA,MAAAA,OAAAA,CAAAA,CAAAA;AACA,cAAAI,IAAAhB,IAAAa,GACAI,IAAApB,IAAAgB;AAEA,YAAAK,GAAA;AACE,gBAAAC,IAAA,IAAA,MAAA;;AAKEP,YAAAA,EAAAA,UAAAA,GAAAA,GAAAA,GAAAA,GAAAA,CAAAA,GACAzB,EAAAA,QAAAA,EAAAA,UAAAA;AAAAA;;AAIF,gBAAAiC,IAAA,OAAAlB,CAAA,IAAAW;AACAD,UAAAA,EAAAA,OAAAA,GAAAA,CAAAA,WAAAA,CAAAA,IAAAA,CAAAA,MAAAA,CAAAA,MAAAA,CAAAA,qBAEA,MAAA,QAAAS,CAAA,IACEA,KAAAA,QAAAA,EAAAA,QAAAA,CAAAA,GAAAA,MAAAA;;UAEA,0BAKFlC,EAAAA,QAAAA,EAAAA,UAAAA;AAAAA,QACF;AAAA,MACF;AAEEmC,gBAAAA,MAAAA,EAAAA,eAAAA,CAAAA;AAAAA,IAEJ,CAAA,GAEA,MAAA;;;;;QAIIC,QAAAA,IAAAA;AAAAA;;;QAIAC,WAAAA;AAAAA,MACF,IAAA1C,GACAkB,IAAAF,EAAAG,CAAA,GACAM,IAAAT,EAAAU,CAAA;AAEA,aAAAiB,EAAA,OAAA;AAAA;UAGMC,UAAAA;AAAAA;;;MAGiC,GAAA,EAAAC,IAAA5C,EAAA,YAAA,gBAAA4C,EAAA,KAAA5C,IAAA0C,EAAA,OAAA;AAAA,QAEjB,OAAAG;AAAA;UAIdL,QAAAA,OAAAA,CAAAA;AAAAA,UACAG,UAAAA;AAAAA,UACAG,MAAAA;AAAAA,UACAC,KAAAA;AAAAA,UACA9B,OAAAA;AAAAA,UACAH,QAAAA;AAAAA,UACAkC,gBAAAA,GAAAA,IAAAA,CAAAA;AAAAA,UACAC,eAAAA;AAAAA,UACAC,kBAAAA;AAAAA;YAGMC,iBAAAA,QAAAA,EAAAA,KAAAA;AAAAA;;QAIR;AAAA,MAAC,GAAA,IAAA,CAAA,CAAA;AAAA;EAKX;AACF,CAAA;"}