xdesign-vue-next/es/_common/js/watermark/generateBase64Url.mjs.map

XDesign Component for vue-next

{"version":3,"file":"generateBase64Url.mjs","sources":["../../../../src/_common/js/watermark/generateBase64Url.ts"],"sourcesContent":["import { WatermarkText, WatermarkImage } from './type';\n\nexport default function generateBase64Url({\n  width,\n  height,\n  gapX,\n  gapY,\n  offsetLeft,\n  offsetTop,\n  rotate,\n  alpha,\n  watermarkContent,\n  lineSpace\n}: {\n  width: number,\n  height: number,\n  gapX:number,\n  gapY: number,\n  offsetLeft:number,\n  offsetTop:number,\n  rotate:number,\n  alpha:number,\n  watermarkContent: WatermarkText | WatermarkImage | Array<WatermarkText | WatermarkImage>,\n  lineSpace:number\n}, onFinish: (url: string) => void): string {\n  const canvas = document.createElement('canvas');\n  const ctx = canvas.getContext('2d');\n  if (!ctx) {\n    // eslint-disable-next-line no-console\n    console.warn('当前环境不支持Canvas, 无法绘制水印');\n    onFinish('');\n    return;\n  }\n  const ratio = window.devicePixelRatio || 1;\n  const canvasWidth = (gapX + width) * ratio;\n  const canvasHeight = (gapY + height) * ratio;\n\n  canvas.width = canvasWidth;\n  canvas.height = canvasHeight;\n  canvas.style.width = `${gapX + width}px`;\n  canvas.style.height = `${gapY + height}px`;\n\n  ctx.translate(offsetLeft * ratio, offsetTop * ratio);\n  ctx.rotate((Math.PI / 180) * Number(rotate));\n  ctx.globalAlpha = alpha;\n\n  const markWidth = width * ratio;\n  const markHeight = height * ratio;\n\n  ctx.fillStyle = 'transparent';\n  ctx.fillRect(0, 0, markWidth, markHeight);\n\n  const contents = Array.isArray(watermarkContent) ? watermarkContent : [{ ...watermarkContent }];\n  let top = 0;\n  contents.forEach((item: WatermarkText & WatermarkImage & { top: number }) => {\n    if (item.url) {\n      const { url, isGrayscale = false } = item;\n      // eslint-disable-next-line no-param-reassign\n      item.top = top;\n      top += height;\n      const img = new Image();\n      img.crossOrigin = 'anonymous';\n      img.referrerPolicy = 'no-referrer';\n      img.src = url;\n      img.onload = () => {\n        // ctx.filter = 'grayscale(1)';\n        ctx.drawImage(img, 0, item.top * ratio, width * ratio, height * ratio);\n        if (isGrayscale) {\n          const imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);\n          const pixels = imgData.data;\n          for (let i = 0; i < pixels.length; i += 4) {\n            const lightness = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3;\n            pixels[i] = lightness;\n            pixels[i + 1] = lightness;\n            pixels[i + 2] = lightness;\n          }\n          ctx.putImageData(imgData, 0, 0);\n        }\n        onFinish(canvas.toDataURL());\n      };\n    } else if (item.text) {\n      const {\n        text,\n        fontColor = 'rgba(0, 0, 0, 0.1)',\n        fontSize = 16,\n        fontWeight = 'normal',\n      } = item;\n      // eslint-disable-next-line no-param-reassign\n      item.top = top;\n      top += lineSpace;\n      const markSize = Number(fontSize) * ratio;\n      // TODO 后续完善font 渲染控制 目前font-family 暂时为 undefined\n      ctx.font = `normal normal ${fontWeight} ${markSize}px/${markHeight}px undefined`;\n      ctx.textAlign = 'start';\n      ctx.textBaseline = 'top';\n      ctx.fillStyle = fontColor;\n      ctx.fillText(text, 0, item.top * ratio);\n    }\n  });\n  onFinish(canvas.toDataURL());\n}\n"],"names":["console","ctx","contents","isGrayscale","top","pixels","onFinish","fontColor","fontSize","fontWeight"],"mappings":"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"}