z-react-ui/es/_utils/generateCanvasQr.js

z-react-ui，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import { isURL, isBase64 } from './isImg';
export function generateCanvasQr(_ref) {
  var posterCanvas = _ref.posterCanvas,
      posterSrc = _ref.posterSrc,
      posterWidth = _ref.posterWidth,
      posterHeight = _ref.posterHeight,
      setWH = _ref.setWH,
      qrCodeCanvas = _ref.qrCodeCanvas,
      qrWidth = _ref.qrWidth,
      qrHeight = _ref.qrHeight,
      _ref$qrX = _ref.qrX,
      qrX = _ref$qrX === void 0 ? 0 : _ref$qrX,
      _ref$qrY = _ref.qrY,
      qrY = _ref$qrY === void 0 ? 0 : _ref$qrY,
      _ref$isSeat = _ref.isSeat,
      isSeat = _ref$isSeat === void 0 ? true : _ref$isSeat,
      _ref$seatAroundDistan = _ref.seatAroundDistance,
      seatAroundDistance = _ref$seatAroundDistan === void 0 ? 8 : _ref$seatAroundDistan,
      _ref$seatRadius = _ref.seatRadius,
      seatRadius = _ref$seatRadius === void 0 ? 10 : _ref$seatRadius,
      _ref$seatFillColor = _ref.seatFillColor,
      seatFillColor = _ref$seatFillColor === void 0 ? '#FFF' : _ref$seatFillColor,
      _ref$isCors = _ref.isCors,
      isCors = _ref$isCors === void 0 ? true : _ref$isCors;
  return new Promise( /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(resolve, reject) {
      var posterCtx, posterImg, qrImg, distant;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              _context.prev = 0;
              // 需要生成的最终画布
              posterCtx = posterCanvas.getContext('2d'); // posterImg.src = posterSrc + "?" + new Date().getTime();

              _context.next = 4;
              return loadImg(posterSrc, {
                width: posterWidth,
                height: posterHeight
              }, isCors);

            case 4:
              posterImg = _context.sent;
              setWH({
                width: posterImg.width,
                height: posterImg.height
              }); // 首先绘制大图片

              posterCtx.drawImage(posterImg.img, 0, 0, posterImg.width, posterImg.height); //带圆角的白色矩形

              _context.next = 9;
              return loadImg(qrCodeCanvas.toDataURL(), {
                width: qrWidth,
                height: qrHeight
              }, isCors);

            case 9:
              qrImg = _context.sent;
              distant = seatAroundDistance;

              if (isSeat) {
                fillRoundRect(posterCtx, qrX - distant, qrY - distant, qrImg.width + distant * 2, qrImg.height + distant * 2, seatRadius, seatFillColor);
              }

              posterCtx.drawImage(qrImg.img, qrX, qrY, qrImg.width, qrImg.height);

              if (isCors) {
                posterCanvas.toBlob(resolve);
              } else {
                resolve(null);
              }

              _context.next = 19;
              break;

            case 16:
              _context.prev = 16;
              _context.t0 = _context["catch"](0);
              reject(_context.t0);

            case 19:
            case "end":
              return _context.stop();
          }
        }
      }, _callee, null, [[0, 16]]);
    }));

    return function (_x, _x2) {
      return _ref2.apply(this, arguments);
    };
  }());
}

function drawRoundRectPath(cxt, width, height, radius) {
  cxt.beginPath(); //从右下角顺时针绘制，弧度从0到1/2PI

  cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2); // //矩形下边线

  cxt.lineTo(radius, height); //左下角圆弧，弧度从1/2PI到PI

  cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI); //矩形左边线

  cxt.lineTo(0, radius); //左上角圆弧，弧度从PI到3/2PI

  cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2); //上边线

  cxt.lineTo(width - radius, 0); //右上角圆弧

  cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2); //右边线

  cxt.lineTo(width, height - radius);
  cxt.closePath();
}

function fillRoundRect(cxt, x, y, width, height, radius, fillColor) {
  //圆的直径必然要小于矩形的宽高
  if (2 * radius > width || 2 * radius > height) {
    return false;
  }

  cxt.save();
  cxt.translate(x, y); //绘制圆角矩形的各个边

  drawRoundRectPath(cxt, width, height, radius);
  cxt.fillStyle = fillColor || '#000'; //若是给定了值就用给定的值否则给予默认值

  cxt.fill();
  cxt.restore();
} // 图片加载完成


export function loadImg(src, options, isCors) {
  if (!(isURL(src) || isBase64(src))) return Promise.reject();
  return new Promise(function (resolve, reject) {
    var img = new Image(); // 图片跨越问题

    isCors && img.setAttribute('crossorigin', 'anonymous');
    img.src = src;

    if (img.complete) {
      var imgOptions = scaleImg({
        width: img.width,
        height: img.height
      }, options);
      resolve(_objectSpread(_objectSpread({}, imgOptions), {}, {
        img: img
      }));
    } else {
      img.onload = function () {
        var imgOptions = scaleImg({
          width: img.width,
          height: img.height
        }, options);
        resolve(_objectSpread(_objectSpread({}, imgOptions), {}, {
          img: img
        }));
      };

      img.onerror = reject;
    }
  });
} // 根据用户给的width和height对原始图片进行缩放

export function scaleImg(initImgObj, userImgObj) {
  var width = initImgObj.width,
      height = initImgObj.height;
  var userWidth = userImgObj.width,
      userHeight = userImgObj.height;

  if (userWidth && userHeight) {
    return userImgObj;
  } else if (userHeight) {
    return {
      height: userHeight,
      width: width * (userHeight / height)
    };
  } else if (userWidth) {
    return {
      height: height * (userWidth / width),
      width: userWidth
    };
  } else {
    return initImgObj;
  }
}