t-comm/es/canvas/multi-img.mjs

专业、稳定、纯粹的工具库

import { b as __awaiter, c as __generator } from '../tslib.es6-096fffdd.js';
import { saveBase64ImgToFile } from '../node-img/img.mjs';
import { getCanvas } from './get-canvas.mjs';

/**
 * 绘制多张图
 * @param {object} config 输入参数
 * @param {Array<string>} config.imgs base64图片列表
 * @returns {string} 图片url
 *
 * @example
 *
 * mergeMultiCanvasPic({
 *   imgs: [img, img2, img3],
 * })
 */
function mergeMultiCanvasPic(_a) {
  var imgs = _a.imgs;
  return __awaiter(this, void 0, void 0, function () {
    function drawBackground() {
      ctx.fillStyle = '#fff';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    }
    var path, sizeOf, canvasLibrary, createCanvas, loadImage, getSavePath, dimensionMap, i, img, savePath, dimensions, oHeight, oWidth, getMaxWidth, getTotalHeight, getPastHeight, ONE_HEIGHT_GAP, getPastGap, CANVAS_MARGIN_TOP, canvas, ctx, i, imgSrc, dimensions, oHeight, oWidth, image, imgUrl;
    return __generator(this, function (_b) {
      switch (_b.label) {
        case 0:
          path = require('path');
          sizeOf = require('image-size');
          canvasLibrary = getCanvas();
          if (!canvasLibrary) return [2 /*return*/, ''];
          createCanvas = canvasLibrary.createCanvas, loadImage = canvasLibrary.loadImage;
          getSavePath = function getSavePath(i) {
            return path.resolve(__dirname, "".concat(i, ".png"));
          };
          dimensionMap = {
            width: [],
            height: []
          };
          i = 0;
          _b.label = 1;
        case 1:
          if (!(i < imgs.length)) return [3 /*break*/, 4];
          img = imgs[i];
          savePath = getSavePath(i);
          return [4 /*yield*/, saveBase64ImgToFile({
            imgUrl: img,
            savePath: savePath
          })];
        case 2:
          _b.sent();
          dimensions = sizeOf(savePath);
          oHeight = dimensions.height, oWidth = dimensions.width;
          dimensionMap.width.push(oWidth);
          dimensionMap.height.push(oHeight);
          _b.label = 3;
        case 3:
          i++;
          return [3 /*break*/, 1];
        case 4:
          getMaxWidth = function getMaxWidth() {
            return Math.max.apply(Math, dimensionMap.width);
          };
          getTotalHeight = function getTotalHeight() {
            return dimensionMap.height.reduce(function (acc, item) {
              return acc + item;
            }, 0);
          };
          getPastHeight = function getPastHeight(heights, index) {
            var res = 0;
            for (var i = 0; i < heights.length; i++) {
              if (i < index) {
                res += heights[i];
              }
            }
            return res;
          };
          ONE_HEIGHT_GAP = 50;
          getPastGap = function getPastGap(index) {
            return index * ONE_HEIGHT_GAP;
          };
          CANVAS_MARGIN_TOP = 0;
          canvas = createCanvas(getMaxWidth(), getTotalHeight() + CANVAS_MARGIN_TOP + getPastGap(imgs.length - 1));
          ctx = canvas.getContext('2d');
          drawBackground();
          i = 0;
          _b.label = 5;
        case 5:
          if (!(i < imgs.length)) return [3 /*break*/, 8];
          imgSrc = getSavePath(i);
          dimensions = sizeOf(imgSrc);
          oHeight = dimensions.height, oWidth = dimensions.width;
          return [4 /*yield*/, loadImage(imgSrc)];
        case 6:
          image = _b.sent();
          ctx.drawImage(image, 0, getPastHeight(dimensionMap.height, i) + getPastGap(i), oWidth, oHeight);
          _b.label = 7;
        case 7:
          i++;
          return [3 /*break*/, 5];
        case 8:
          imgUrl = canvas.toDataURL();
          return [2 /*return*/, imgUrl];
      }
    });
  });
}

export { mergeMultiCanvasPic };