xdesign-vue-next/lib/_common/js/watermark/generateBase64Url.js

XDesign Component for vue-next

/**
 * xdesign v1.0.6
 * (c) 2023 xdesign
 * @license MIT
 */

import _defineProperty from '@babel/runtime/helpers/defineProperty';

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function generateBase64Url(_ref, onFinish) {
  var width = _ref.width,
    height = _ref.height,
    gapX = _ref.gapX,
    gapY = _ref.gapY,
    offsetLeft = _ref.offsetLeft,
    offsetTop = _ref.offsetTop,
    rotate = _ref.rotate,
    alpha = _ref.alpha,
    watermarkContent = _ref.watermarkContent,
    lineSpace = _ref.lineSpace;
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  if (!ctx) {
    console.warn("\u5F53\u524D\u73AF\u5883\u4E0D\u652F\u6301Canvas, \u65E0\u6CD5\u7ED8\u5236\u6C34\u5370");
    onFinish("");
    return;
  }
  var ratio = window.devicePixelRatio || 1;
  var canvasWidth = (gapX + width) * ratio;
  var canvasHeight = (gapY + height) * ratio;
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;
  canvas.style.width = "".concat(gapX + width, "px");
  canvas.style.height = "".concat(gapY + height, "px");
  ctx.translate(offsetLeft * ratio, offsetTop * ratio);
  ctx.rotate(Math.PI / 180 * Number(rotate));
  ctx.globalAlpha = alpha;
  var markWidth = width * ratio;
  var markHeight = height * ratio;
  ctx.fillStyle = "transparent";
  ctx.fillRect(0, 0, markWidth, markHeight);
  var contents = Array.isArray(watermarkContent) ? watermarkContent : [_objectSpread({}, watermarkContent)];
  var top = 0;
  contents.forEach(function (item) {
    if (item.url) {
      var url = item.url,
        _item$isGrayscale = item.isGrayscale,
        isGrayscale = _item$isGrayscale === void 0 ? false : _item$isGrayscale;
      item.top = top;
      top += height;
      var img = new Image();
      img.crossOrigin = "anonymous";
      img.referrerPolicy = "no-referrer";
      img.src = url;
      img.onload = function () {
        ctx.drawImage(img, 0, item.top * ratio, width * ratio, height * ratio);
        if (isGrayscale) {
          var imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
          var pixels = imgData.data;
          for (var i = 0; i < pixels.length; i += 4) {
            var lightness = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3;
            pixels[i] = lightness;
            pixels[i + 1] = lightness;
            pixels[i + 2] = lightness;
          }
          ctx.putImageData(imgData, 0, 0);
        }
        onFinish(canvas.toDataURL());
      };
    } else if (item.text) {
      var text = item.text,
        _item$fontColor = item.fontColor,
        fontColor = _item$fontColor === void 0 ? "rgba(0, 0, 0, 0.1)" : _item$fontColor,
        _item$fontSize = item.fontSize,
        fontSize = _item$fontSize === void 0 ? 16 : _item$fontSize,
        _item$fontWeight = item.fontWeight,
        fontWeight = _item$fontWeight === void 0 ? "normal" : _item$fontWeight;
      item.top = top;
      top += lineSpace;
      var markSize = Number(fontSize) * ratio;
      ctx.font = "normal normal ".concat(fontWeight, " ").concat(markSize, "px/").concat(markHeight, "px undefined");
      ctx.textAlign = "start";
      ctx.textBaseline = "top";
      ctx.fillStyle = fontColor;
      ctx.fillText(text, 0, item.top * ratio);
    }
  });
  onFinish(canvas.toDataURL());
}

export { generateBase64Url as default };
//# sourceMappingURL=generateBase64Url.js.map