tdesign-vue/es/qrcode/components/qrcode-canvas.js

tdesign-vue

/**
 * tdesign v1.15.0
 * (c) 2026 tdesign
 * @license MIT
 */

import { defineComponent, computed, ref } from '@vue/composition-api';
import { QRCodeSubComponentProps } from './props.js';
import { DEFAULT_MINVERSION, DEFAULT_NEED_MARGIN, excavateModules, isSupportPath2d, generatePath } from '../../_common/js/qrcode/utils.js';
import { useQRCode } from '../hooks/useQRCode.js';
import '../../_common/js/qrcode/qrcodegen.js';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import '@babel/runtime/helpers/defineProperty';

var QRCodeCanvas = defineComponent({
  name: "QRCodeCanvas",
  props: QRCodeSubComponentProps,
  setup: function setup(props) {
    var imgSrc = computed(function () {
      var _props$imageSettings;
      return (_props$imageSettings = props.imageSettings) === null || _props$imageSettings === void 0 ? void 0 : _props$imageSettings.src;
    });
    var imgCrossOrigin = ref("");
    return {
      imgSrc: imgSrc,
      imgCrossOrigin: imgCrossOrigin
    };
  },
  methods: {
    renderQRCode: function renderQRCode() {
      var _this$$refs$canvasRef, _calculatedImageSetti, _this$$refs$imageRef;
      var _useQRCode = useQRCode({
          value: this.value,
          level: this.level,
          minVersion: DEFAULT_MINVERSION,
          includeMargin: DEFAULT_NEED_MARGIN,
          marginSize: this.marginSize,
          imageSettings: this.imageSettings,
          size: this.size
        }),
        margin = _useQRCode.margin,
        cells = _useQRCode.cells,
        numCells = _useQRCode.numCells,
        calculatedImageSettings = _useQRCode.calculatedImageSettings;
      if (!this.$refs.canvasRef) {
        return;
      }
      var canvas = (_this$$refs$canvasRef = this.$refs.canvasRef) !== null && _this$$refs$canvasRef !== void 0 ? _this$$refs$canvasRef : null;
      var ctx = canvas === null || canvas === void 0 ? void 0 : canvas.getContext("2d");
      if (!ctx) {
        return;
      }
      this.imgCrossOrigin = (_calculatedImageSetti = calculatedImageSettings.value) === null || _calculatedImageSetti === void 0 ? void 0 : _calculatedImageSetti.crossOrigin;
      var cellsToDraw = cells;
      var image = (_this$$refs$imageRef = this.$refs.imageRef) !== null && _this$$refs$imageRef !== void 0 ? _this$$refs$imageRef : null;
      if (image) {
        image.crossOrigin = calculatedImageSettings.value.crossOrigin;
      }
      var haveImageToRender = calculatedImageSettings.value && image !== null && image.complete && image.naturalHeight !== 0 && image.naturalWidth !== 0;
      if (haveImageToRender && calculatedImageSettings.value.excavation != null) {
        cellsToDraw = computed(function () {
          return excavateModules(cells.value, calculatedImageSettings.value.excavation);
        });
      }
      var pixelRatio = window.devicePixelRatio || 1;
      canvas.height = this.size * pixelRatio;
      canvas.width = this.size * pixelRatio;
      var scale = this.size / numCells.value * pixelRatio;
      ctx.scale(scale, scale);
      ctx.fillStyle = this.bgColor;
      ctx.fillRect(0, 0, numCells.value, numCells.value);
      ctx.fillStyle = this.fgColor;
      if (isSupportPath2d) {
        ctx.fill(new Path2D(generatePath(cellsToDraw.value, margin.value)));
      } else {
        cells.value.forEach(function (row, rdx) {
          row.forEach(function (cell, cdx) {
            if (cell) {
              ctx.fillRect(cdx + margin.value, rdx + margin.value, 1, 1);
            }
          });
        });
      }
      if (this.calculatedImageSettings) {
        ctx.globalAlpha = calculatedImageSettings.value.opacity;
      }
      if (haveImageToRender) {
        ctx.globalAlpha = calculatedImageSettings.value.opacity;
        ctx.drawImage(image, calculatedImageSettings.value.x + margin.value, calculatedImageSettings.value.y + margin.value, calculatedImageSettings.value.w, calculatedImageSettings.value.h);
      }
    }
  },
  mounted: function mounted() {
    this.renderQRCode();
  },
  watch: {
    value: function value() {
      this.renderQRCode();
    },
    size: function size() {
      this.renderQRCode();
    },
    level: function level() {
      this.renderQRCode();
    },
    bgColor: function bgColor() {
      this.renderQRCode();
    },
    fgColor: function fgColor() {
      this.renderQRCode();
    }
  },
  render: function render() {
    var h = arguments[0];
    var styles = {
      display: "flex",
      alignSelf: "stretch",
      flex: "auto",
      minWidth: "0"
    };
    return h("div", {
      "style": styles
    }, [h("canvas", {
      "ref": "canvasRef",
      "style": styles,
      "attrs": {
        "role": "img"
      }
    }), this.imgSrc != null ? h("img", {
      "ref": "imageRef",
      "on": {
        "load": this.renderQRCode
      },
      "style": {
        display: "none"
      },
      "attrs": {
        "src": this.imgSrc
      }
    }) : null]);
  }
});

export { QRCodeCanvas as default };
//# sourceMappingURL=qrcode-canvas.js.map