yuang-framework-ui-pc/lib/ele-qr-code/components/canvas-render.cjs

yuang-framework-ui-pc Library

"use strict";
const vue = require("vue");
const qrcodegen = require("../qrcodegen");
const props = require("../props");
const util = require("../util");
const _sfc_main = vue.defineComponent({
  name: "CanvasRender",
  props: props.qrCodeProps,
  emits: props.qrCodeEmits,
  setup(props2, { emit }) {
    const imgData = vue.ref("");
    const canvasRef = vue.ref(null);
    const imageRef = vue.ref(null);
    const render = () => {
      const { value, size, level, bgColor, fgColor, margin, imageSettings } = props2;
      const canvas = canvasRef.value;
      if (!canvas) {
        return;
      }
      const ctx = canvas.getContext("2d");
      if (!ctx) {
        return;
      }
      if (!value) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        return;
      }
      let cells = qrcodegen.QrCode.encodeText(
        value,
        util.ERROR_LEVEL_MAP[level]
      ).getModules();
      const numCells = cells.length + margin * 2;
      const calculatedImageSettings = util.getImageSettings(
        imageSettings,
        size,
        margin,
        cells
      );
      const image = imageRef.value;
      const haveImageToRender = calculatedImageSettings != null && image != null && image.complete && image.naturalHeight !== 0 && image.naturalWidth !== 0;
      if (haveImageToRender && calculatedImageSettings.excavation != null) {
        cells = util.excavateModules(cells, calculatedImageSettings.excavation);
      }
      const pixelRatio = window.devicePixelRatio || 1;
      canvas.height = canvas.width = size * pixelRatio;
      const scale = size / numCells * pixelRatio;
      ctx.scale(scale, scale);
      ctx.fillStyle = bgColor;
      ctx.fillRect(0, 0, numCells, numCells);
      ctx.fillStyle = fgColor;
      if (util.SUPPORTS_PATH2D) {
        ctx.fill(new Path2D(util.generatePath(cells, margin)));
      } else {
        cells.forEach(function(row, rdx) {
          row.forEach(function(cell, cdx) {
            if (cell) {
              ctx.fillRect(cdx + margin, rdx + margin, 1, 1);
            }
          });
        });
      }
      if (haveImageToRender) {
        ctx.drawImage(
          image,
          calculatedImageSettings.x + margin,
          calculatedImageSettings.y + margin,
          calculatedImageSettings.w,
          calculatedImageSettings.h
        );
      }
      if (props2.tag === "img") {
        imgData.value = canvas.toDataURL();
      }
      emit("done");
    };
    vue.watch(
      [
        () => props2.value,
        () => props2.size,
        () => props2.level,
        () => props2.margin,
        () => props2.bgColor,
        () => props2.fgColor,
        () => props2.tag
      ],
      () => {
        render();
      }
    );
    vue.watch(
      () => props2.imageSettings,
      () => {
        render();
      },
      { deep: true }
    );
    vue.onMounted(() => {
      render();
    });
    return { imgData, canvasRef, imageRef, render };
  }
});
const _export_sfc = (sfc, props2) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props2) {
    target[key] = val;
  }
  return target;
};
const _hoisted_1 = {
  class: "ele-qr-code",
  style: { display: "inline-flex" }
};
const _hoisted_2 = ["src"];
const _hoisted_3 = ["src"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
    _ctx.tag === "img" ? (vue.openBlock(), vue.createElementBlock("img", {
      key: 0,
      src: _ctx.imgData,
      style: vue.normalizeStyle([{ width: _ctx.size + "px", height: _ctx.size + "px" }, _ctx.customStyle || {}])
    }, null, 12, _hoisted_2)) : vue.createCommentVNode("", true),
    vue.createElementVNode("canvas", {
      ref: "canvasRef",
      style: vue.normalizeStyle([
        {
          width: _ctx.size + "px",
          height: _ctx.size + "px",
          display: _ctx.tag === "img" ? "none" : void 0
        },
        _ctx.customStyle || {}
      ])
    }, null, 4),
    _ctx.imageSettings && _ctx.imageSettings.src ? (vue.openBlock(), vue.createElementBlock("img", {
      key: 1,
      ref: "imageRef",
      src: _ctx.imageSettings.src,
      crossorigin: "anonymous",
      referrerpolicy: "no-referrer",
      style: { display: "none" },
      onLoad: _cache[0] || (_cache[0] = (...args) => _ctx.render && _ctx.render(...args))
    }, null, 40, _hoisted_3)) : vue.createCommentVNode("", true)
  ]);
}
const canvasRender = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = canvasRender;