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

tdesign-vue

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var VueCompositionAPI = require('@vue/composition-api');
var qrcode_components_props = require('./props.js');
var _common_js_qrcode_utils = require('../../_common/js/qrcode/utils.js');
var qrcode_hooks_useQRCode = require('../hooks/useQRCode.js');
require('../../_common/js/qrcode/qrcodegen.js');
require('@babel/runtime/helpers/classCallCheck');
require('@babel/runtime/helpers/createClass');
require('@babel/runtime/helpers/defineProperty');

var QRCodeCanvas = VueCompositionAPI.defineComponent({
  name: "QRCodeCanvas",
  props: qrcode_components_props.QRCodeSubComponentProps,
  setup: function setup(props) {
    var imgSrc = VueCompositionAPI.computed(function () {
      var _props$imageSettings;
      return (_props$imageSettings = props.imageSettings) === null || _props$imageSettings === void 0 ? void 0 : _props$imageSettings.src;
    });
    var imgCrossOrigin = VueCompositionAPI.ref("");
    return {
      imgSrc: imgSrc,
      imgCrossOrigin: imgCrossOrigin
    };
  },
  methods: {
    renderQRCode: function renderQRCode() {
      var _this$$refs$canvasRef, _calculatedImageSetti, _this$$refs$imageRef;
      var _useQRCode = qrcode_hooks_useQRCode.useQRCode({
          value: this.value,
          level: this.level,
          minVersion: _common_js_qrcode_utils.DEFAULT_MINVERSION,
          includeMargin: _common_js_qrcode_utils.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 = VueCompositionAPI.computed(function () {
          return _common_js_qrcode_utils.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 (_common_js_qrcode_utils.isSupportPath2d) {
        ctx.fill(new Path2D(_common_js_qrcode_utils.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]);
  }
});

exports["default"] = QRCodeCanvas;
//# sourceMappingURL=qrcode-canvas.js.map