t-comm/lib/canvas/img-text.js

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

'use strict';

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

var _regeneratorRuntime = require('@babel/runtime/regenerator');
var tslib_es6 = require('../tslib.es6-0d92ef81.js');
var thirdParty_imageSize = require('../third-party/image-size.js');
var canvas_getCanvas = require('./get-canvas.js');
require('../third-party/canvas.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);

/**
 * 为图片增加文字
 *
 * @param {Object} config 配置
 * @param {number} config.width 宽度
 * @param {number} config.height 高度
 * @param {Array<string>} config.textList 文字列表，支持多行
 * @param {string} config.imgPath 图片路径
 * @returns {string} canvas.toDataURL生成的base64图片
 *
 * @example
 *
 * ```ts
 * const imgUrl = addTextForImg({
 *   width: 300,
 *   height: 300,
 *   textList: ['第一行', '第二行'],
 *   imgPath: './test.png',
 * })
 * ```
 */
function addTextForImg(_ref) {
  var width = _ref.width,
    height = _ref.height,
    textList = _ref.textList,
    imgPath = _ref.imgPath;
  return tslib_es6.__awaiter(this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee() {
    var canvasLibrary, sizeOf, createCanvas, loadImage, image, lineHeight, dpr, topHeight, dimensions, oHeight, oWidth, canvas, ctx, drawBackground, fillTitle, imgUrl;
    return _regeneratorRuntime__default["default"].wrap(function (_context) {
      while (1) switch (_context.prev = _context.next) {
        case 0:
          fillTitle = function _fillTitle(textList) {
            ctx.lineWidth = 1;
            ctx.strokeStyle = '#ccc';
            ctx.textAlign = 'start';
            ctx.font = '10px Arial';
            ctx.fillStyle = '#000';
            for (var j = 0; j < textList.length; j++) {
              ctx.fillText(textList[j], 15, 20 + j * lineHeight);
            }
          };
          drawBackground = function _drawBackground() {
            ctx.fillStyle = '#fff';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
          };
          canvasLibrary = canvas_getCanvas.getCanvas();
          if (canvasLibrary) {
            _context.next = 1;
            break;
          }
          return _context.abrupt("return", '');
        case 1:
          sizeOf = thirdParty_imageSize.getImageSize();
          createCanvas = canvasLibrary.createCanvas, loadImage = canvasLibrary.loadImage;
          _context.next = 2;
          return loadImage(imgPath);
        case 2:
          image = _context.sent;
          lineHeight = 15;
          dpr = 2;
          topHeight = textList.length * lineHeight + 15;
          dimensions = sizeOf(imgPath);
          oHeight = dimensions.height, oWidth = dimensions.width;
          if (!width) {
            width = oWidth;
          }
          if (!height) {
            height = oHeight;
          }
          canvas = createCanvas(width * dpr, (height + topHeight) * dpr);
          ctx = canvas.getContext('2d');
          ctx.scale(dpr, dpr);
          drawBackground();
          ctx.drawImage(image, 0, topHeight, width, width);
          fillTitle(textList);
          imgUrl = canvas.toDataURL();
          return _context.abrupt("return", imgUrl);
        case 3:
        case "end":
          return _context.stop();
      }
    }, _callee);
  }));
}

exports.addTextForImg = addTextForImg;