UNPKG

react-watermark-component

Version:

react-watermark-component is a component that can generate a water mark background image.

50 lines (42 loc) 5.93 kB
'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = getWaterMarkCanvas; function getWaterMarkCanvas(text, options) { var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var canvasWidth = 4000; var canvasHeight = 4000; canvas.width = canvasWidth; canvas.height = canvasHeight; ctx.textAlign = options.textAlign; ctx.textBaseline = options.textBaseline; ctx.globalAlpha = options.globalAlpha; ctx.font = options.font; ctx.translate(canvasWidth / 2, canvasHeight / 2); ctx.rotate(options.rotateAngle); ctx.translate(-canvasWidth / 2 * 1.2, -canvasHeight / 2 * 1.2); ctx.fillStyle = options.fillStyle; var waterMarkText = []; var chunkWidth = options.chunkWidth; var chunkHeight = options.chunkHeight; var horizontalChunkCount = Math.ceil(canvasWidth / chunkWidth) + 1; var verticalChunkCount = Math.ceil(canvasHeight / chunkHeight) + 1; for (var j = 0, initY = chunkHeight / 2, indent = 0; j <= verticalChunkCount; j += 1) { indent = parseInt(j % 2); for (var i = 0, initX = chunkWidth / 2; i <= horizontalChunkCount; i += 1) { waterMarkText.push({ text: text, x: i * chunkWidth + indent * initX, y: j * chunkHeight + initY }); } } waterMarkText.forEach(function (item) { ctx.fillText(item.text, item.x, item.y); }); return ctx.canvas.toDataURL(); } module.exports = exports['default']; //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9XYXRlck1hcmtDYW52YXMuanMiXSwibmFtZXMiOlsiZ2V0V2F0ZXJNYXJrQ2FudmFzIiwidGV4dCIsIm9wdGlvbnMiLCJjYW52YXMiLCJkb2N1bWVudCIsImNyZWF0ZUVsZW1lbnQiLCJjdHgiLCJnZXRDb250ZXh0IiwiY2FudmFzV2lkdGgiLCJjYW52YXNIZWlnaHQiLCJ3aWR0aCIsImhlaWdodCIsInRleHRBbGlnbiIsInRleHRCYXNlbGluZSIsImdsb2JhbEFscGhhIiwiZm9udCIsInRyYW5zbGF0ZSIsInJvdGF0ZSIsInJvdGF0ZUFuZ2xlIiwiZmlsbFN0eWxlIiwid2F0ZXJNYXJrVGV4dCIsImNodW5rV2lkdGgiLCJjaHVua0hlaWdodCIsImhvcml6b250YWxDaHVua0NvdW50IiwiTWF0aCIsImNlaWwiLCJ2ZXJ0aWNhbENodW5rQ291bnQiLCJqIiwiaW5pdFkiLCJpbmRlbnQiLCJwYXJzZUludCIsImkiLCJpbml0WCIsInB1c2giLCJ4IiwieSIsImZvckVhY2giLCJpdGVtIiwiZmlsbFRleHQiLCJ0b0RhdGFVUkwiXSwibWFwcGluZ3MiOiI7Ozs7O2tCQUF3QkEsa0I7QUFBVCxTQUFTQSxrQkFBVCxDQUE0QkMsSUFBNUIsRUFBa0NDLE9BQWxDLEVBQTJDO0FBQ3hELE1BQU1DLFNBQVNDLFNBQVNDLGFBQVQsQ0FBdUIsUUFBdkIsQ0FBZjtBQUNBLE1BQU1DLE1BQU1ILE9BQU9JLFVBQVAsQ0FBa0IsSUFBbEIsQ0FBWjtBQUNBLE1BQU1DLGNBQWMsSUFBcEI7QUFDQSxNQUFNQyxlQUFlLElBQXJCO0FBQ0FOLFNBQU9PLEtBQVAsR0FBZUYsV0FBZjtBQUNBTCxTQUFPUSxNQUFQLEdBQWdCRixZQUFoQjtBQUNBSCxNQUFJTSxTQUFKLEdBQWdCVixRQUFRVSxTQUF4QjtBQUNBTixNQUFJTyxZQUFKLEdBQW1CWCxRQUFRVyxZQUEzQjtBQUNBUCxNQUFJUSxXQUFKLEdBQWtCWixRQUFRWSxXQUExQjtBQUNBUixNQUFJUyxJQUFKLEdBQVdiLFFBQVFhLElBQW5COztBQUVBVCxNQUFJVSxTQUFKLENBQWNSLGNBQWMsQ0FBNUIsRUFBK0JDLGVBQWUsQ0FBOUM7QUFDQUgsTUFBSVcsTUFBSixDQUFXZixRQUFRZ0IsV0FBbkI7O0FBRUFaLE1BQUlVLFNBQUosQ0FBYyxDQUFDUixXQUFELEdBQWUsQ0FBZixHQUFtQixHQUFqQyxFQUFzQyxDQUFDQyxZQUFELEdBQWdCLENBQWhCLEdBQW9CLEdBQTFEO0FBQ0FILE1BQUlhLFNBQUosR0FBZ0JqQixRQUFRaUIsU0FBeEI7O0FBRUEsTUFBTUMsZ0JBQWdCLEVBQXRCO0FBQ0EsTUFBTUMsYUFBYW5CLFFBQVFtQixVQUEzQjtBQUNBLE1BQU1DLGNBQWNwQixRQUFRb0IsV0FBNUI7QUFDQSxNQUFNQyx1QkFBdUJDLEtBQUtDLElBQUwsQ0FBVWpCLGNBQWNhLFVBQXhCLElBQXNDLENBQW5FO0FBQ0EsTUFBTUsscUJBQXFCRixLQUFLQyxJQUFMLENBQVVoQixlQUFlYSxXQUF6QixJQUF3QyxDQUFuRTs7QUFFQSxPQUFLLElBQUlLLElBQUksQ0FBUixFQUFXQyxRQUFRTixjQUFjLENBQWpDLEVBQW9DTyxTQUFTLENBQWxELEVBQXFERixLQUFLRCxrQkFBMUQsRUFBOEVDLEtBQUssQ0FBbkYsRUFBc0Y7QUFDcEZFLGFBQVNDLFNBQVNILElBQUksQ0FBYixDQUFUOztBQUVBLFNBQUssSUFBSUksSUFBSSxDQUFSLEVBQVdDLFFBQVFYLGFBQWEsQ0FBckMsRUFBd0NVLEtBQUtSLG9CQUE3QyxFQUFtRVEsS0FBSyxDQUF4RSxFQUEyRTtBQUN6RVgsb0JBQWNhLElBQWQsQ0FBbUI7QUFDakJoQyxrQkFEaUI7QUFFakJpQyxXQUFHSCxJQUFJVixVQUFKLEdBQWlCUSxTQUFTRyxLQUZaO0FBR2pCRyxXQUFHUixJQUFJTCxXQUFKLEdBQWtCTTtBQUhKLE9BQW5CO0FBS0Q7QUFDRjs7QUFFRFIsZ0JBQWNnQixPQUFkLENBQXNCLFVBQUNDLElBQUQsRUFBVTtBQUM5Qi9CLFFBQUlnQyxRQUFKLENBQWFELEtBQUtwQyxJQUFsQixFQUF3Qm9DLEtBQUtILENBQTdCLEVBQWdDRyxLQUFLRixDQUFyQztBQUNELEdBRkQ7O0FBSUEsU0FBTzdCLElBQUlILE1BQUosQ0FBV29DLFNBQVgsRUFBUDtBQUNEIiwiZmlsZSI6IldhdGVyTWFya0NhbnZhcy5qcyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIGdldFdhdGVyTWFya0NhbnZhcyh0ZXh0LCBvcHRpb25zKSB7XG4gIGNvbnN0IGNhbnZhcyA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2NhbnZhcycpXG4gIGNvbnN0IGN0eCA9IGNhbnZhcy5nZXRDb250ZXh0KCcyZCcpXG4gIGNvbnN0IGNhbnZhc1dpZHRoID0gNDAwMFxuICBjb25zdCBjYW52YXNIZWlnaHQgPSA0MDAwXG4gIGNhbnZhcy53aWR0aCA9IGNhbnZhc1dpZHRoXG4gIGNhbnZhcy5oZWlnaHQgPSBjYW52YXNIZWlnaHRcbiAgY3R4LnRleHRBbGlnbiA9IG9wdGlvbnMudGV4dEFsaWduXG4gIGN0eC50ZXh0QmFzZWxpbmUgPSBvcHRpb25zLnRleHRCYXNlbGluZVxuICBjdHguZ2xvYmFsQWxwaGEgPSBvcHRpb25zLmdsb2JhbEFscGhhXG4gIGN0eC5mb250ID0gb3B0aW9ucy5mb250XG5cbiAgY3R4LnRyYW5zbGF0ZShjYW52YXNXaWR0aCAvIDIsIGNhbnZhc0hlaWdodCAvIDIpXG4gIGN0eC5yb3RhdGUob3B0aW9ucy5yb3RhdGVBbmdsZSlcblxuICBjdHgudHJhbnNsYXRlKC1jYW52YXNXaWR0aCAvIDIgKiAxLjIsIC1jYW52YXNIZWlnaHQgLyAyICogMS4yKVxuICBjdHguZmlsbFN0eWxlID0gb3B0aW9ucy5maWxsU3R5bGVcblxuICBjb25zdCB3YXRlck1hcmtUZXh0ID0gW11cbiAgY29uc3QgY2h1bmtXaWR0aCA9IG9wdGlvbnMuY2h1bmtXaWR0aFxuICBjb25zdCBjaHVua0hlaWdodCA9IG9wdGlvbnMuY2h1bmtIZWlnaHRcbiAgY29uc3QgaG9yaXpvbnRhbENodW5rQ291bnQgPSBNYXRoLmNlaWwoY2FudmFzV2lkdGggLyBjaHVua1dpZHRoKSArIDFcbiAgY29uc3QgdmVydGljYWxDaHVua0NvdW50ID0gTWF0aC5jZWlsKGNhbnZhc0hlaWdodCAvIGNodW5rSGVpZ2h0KSArIDFcblxuICBmb3IgKGxldCBqID0gMCwgaW5pdFkgPSBjaHVua0hlaWdodCAvIDIsIGluZGVudCA9IDA7IGogPD0gdmVydGljYWxDaHVua0NvdW50OyBqICs9IDEpIHtcbiAgICBpbmRlbnQgPSBwYXJzZUludChqICUgMilcblxuICAgIGZvciAobGV0IGkgPSAwLCBpbml0WCA9IGNodW5rV2lkdGggLyAyOyBpIDw9IGhvcml6b250YWxDaHVua0NvdW50OyBpICs9IDEpIHtcbiAgICAgIHdhdGVyTWFya1RleHQucHVzaCh7XG4gICAgICAgIHRleHQsXG4gICAgICAgIHg6IGkgKiBjaHVua1dpZHRoICsgaW5kZW50ICogaW5pdFgsXG4gICAgICAgIHk6IGogKiBjaHVua0hlaWdodCArIGluaXRZXG4gICAgICB9KVxuICAgIH1cbiAgfVxuXG4gIHdhdGVyTWFya1RleHQuZm9yRWFjaCgoaXRlbSkgPT4ge1xuICAgIGN0eC5maWxsVGV4dChpdGVtLnRleHQsIGl0ZW0ueCwgaXRlbS55KVxuICB9KVxuXG4gIHJldHVybiBjdHguY2FudmFzLnRvRGF0YVVSTCgpXG59XG4iXX0=