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
JavaScript
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=
;