@towavephone/react-watermark-component
Version:
react-watermark-component is a component that can generate a water mark background image.
50 lines (42 loc) • 6.02 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 = options.chunkWidth;
var canvasHeight = options.chunkHeight;
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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9XYXRlck1hcmtDYW52YXMuanMiXSwibmFtZXMiOlsiZ2V0V2F0ZXJNYXJrQ2FudmFzIiwidGV4dCIsIm9wdGlvbnMiLCJjYW52YXMiLCJkb2N1bWVudCIsImNyZWF0ZUVsZW1lbnQiLCJjdHgiLCJnZXRDb250ZXh0IiwiY2FudmFzV2lkdGgiLCJjaHVua1dpZHRoIiwiY2FudmFzSGVpZ2h0IiwiY2h1bmtIZWlnaHQiLCJ3aWR0aCIsImhlaWdodCIsInRleHRBbGlnbiIsInRleHRCYXNlbGluZSIsImdsb2JhbEFscGhhIiwiZm9udCIsInRyYW5zbGF0ZSIsInJvdGF0ZSIsInJvdGF0ZUFuZ2xlIiwiZmlsbFN0eWxlIiwid2F0ZXJNYXJrVGV4dCIsImhvcml6b250YWxDaHVua0NvdW50IiwiTWF0aCIsImNlaWwiLCJ2ZXJ0aWNhbENodW5rQ291bnQiLCJqIiwiaW5pdFkiLCJpbmRlbnQiLCJwYXJzZUludCIsImkiLCJpbml0WCIsInB1c2giLCJ4IiwieSIsImZvckVhY2giLCJpdGVtIiwiZmlsbFRleHQiLCJ0b0RhdGFVUkwiXSwibWFwcGluZ3MiOiI7Ozs7O2tCQUF3QkEsa0I7QUFBVCxTQUFTQSxrQkFBVCxDQUE0QkMsSUFBNUIsRUFBa0NDLE9BQWxDLEVBQTJDO0FBQ3hELE1BQU1DLFNBQVNDLFNBQVNDLGFBQVQsQ0FBdUIsUUFBdkIsQ0FBZjtBQUNBLE1BQU1DLE1BQU1ILE9BQU9JLFVBQVAsQ0FBa0IsSUFBbEIsQ0FBWjtBQUNBLE1BQU1DLGNBQWNOLFFBQVFPLFVBQTVCO0FBQ0EsTUFBTUMsZUFBZVIsUUFBUVMsV0FBN0I7QUFDQVIsU0FBT1MsS0FBUCxHQUFlSixXQUFmO0FBQ0FMLFNBQU9VLE1BQVAsR0FBZ0JILFlBQWhCO0FBQ0FKLE1BQUlRLFNBQUosR0FBZ0JaLFFBQVFZLFNBQXhCO0FBQ0FSLE1BQUlTLFlBQUosR0FBbUJiLFFBQVFhLFlBQTNCO0FBQ0FULE1BQUlVLFdBQUosR0FBa0JkLFFBQVFjLFdBQTFCO0FBQ0FWLE1BQUlXLElBQUosR0FBV2YsUUFBUWUsSUFBbkI7O0FBRUFYLE1BQUlZLFNBQUosQ0FBY1YsY0FBYyxDQUE1QixFQUErQkUsZUFBZSxDQUE5QztBQUNBSixNQUFJYSxNQUFKLENBQVdqQixRQUFRa0IsV0FBbkI7O0FBRUFkLE1BQUlZLFNBQUosQ0FBYyxDQUFDVixXQUFELEdBQWUsQ0FBZixHQUFtQixHQUFqQyxFQUFzQyxDQUFDRSxZQUFELEdBQWdCLENBQWhCLEdBQW9CLEdBQTFEO0FBQ0FKLE1BQUllLFNBQUosR0FBZ0JuQixRQUFRbUIsU0FBeEI7O0FBRUEsTUFBTUMsZ0JBQWdCLEVBQXRCO0FBQ0EsTUFBTWIsYUFBYVAsUUFBUU8sVUFBM0I7QUFDQSxNQUFNRSxjQUFjVCxRQUFRUyxXQUE1QjtBQUNBLE1BQU1ZLHVCQUF1QkMsS0FBS0MsSUFBTCxDQUFVakIsY0FBY0MsVUFBeEIsSUFBc0MsQ0FBbkU7QUFDQSxNQUFNaUIscUJBQXFCRixLQUFLQyxJQUFMLENBQVVmLGVBQWVDLFdBQXpCLElBQXdDLENBQW5FOztBQUVBLE9BQUssSUFBSWdCLElBQUksQ0FBUixFQUFXQyxRQUFRakIsY0FBYyxDQUFqQyxFQUFvQ2tCLFNBQVMsQ0FBbEQsRUFBcURGLEtBQUtELGtCQUExRCxFQUE4RUMsS0FBSyxDQUFuRixFQUFzRjtBQUNwRkUsYUFBU0MsU0FBU0gsSUFBSSxDQUFiLENBQVQ7O0FBRUEsU0FBSyxJQUFJSSxJQUFJLENBQVIsRUFBV0MsUUFBUXZCLGFBQWEsQ0FBckMsRUFBd0NzQixLQUFLUixvQkFBN0MsRUFBbUVRLEtBQUssQ0FBeEUsRUFBMkU7QUFDekVULG9CQUFjVyxJQUFkLENBQW1CO0FBQ2pCaEMsa0JBRGlCO0FBRWpCaUMsV0FBR0gsSUFBSXRCLFVBQUosR0FBaUJvQixTQUFTRyxLQUZaO0FBR2pCRyxXQUFHUixJQUFJaEIsV0FBSixHQUFrQmlCO0FBSEosT0FBbkI7QUFLRDtBQUNGOztBQUVETixnQkFBY2MsT0FBZCxDQUFzQixVQUFDQyxJQUFELEVBQVU7QUFDOUIvQixRQUFJZ0MsUUFBSixDQUFhRCxLQUFLcEMsSUFBbEIsRUFBd0JvQyxLQUFLSCxDQUE3QixFQUFnQ0csS0FBS0YsQ0FBckM7QUFDRCxHQUZEOztBQUlBLFNBQU83QixJQUFJSCxNQUFKLENBQVdvQyxTQUFYLEVBQVA7QUFDRCIsImZpbGUiOiJXYXRlck1hcmtDYW52YXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBnZXRXYXRlck1hcmtDYW52YXModGV4dCwgb3B0aW9ucykge1xuICBjb25zdCBjYW52YXMgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdjYW52YXMnKVxuICBjb25zdCBjdHggPSBjYW52YXMuZ2V0Q29udGV4dCgnMmQnKVxuICBjb25zdCBjYW52YXNXaWR0aCA9IG9wdGlvbnMuY2h1bmtXaWR0aFxuICBjb25zdCBjYW52YXNIZWlnaHQgPSBvcHRpb25zLmNodW5rSGVpZ2h0XG4gIGNhbnZhcy53aWR0aCA9IGNhbnZhc1dpZHRoXG4gIGNhbnZhcy5oZWlnaHQgPSBjYW52YXNIZWlnaHRcbiAgY3R4LnRleHRBbGlnbiA9IG9wdGlvbnMudGV4dEFsaWduXG4gIGN0eC50ZXh0QmFzZWxpbmUgPSBvcHRpb25zLnRleHRCYXNlbGluZVxuICBjdHguZ2xvYmFsQWxwaGEgPSBvcHRpb25zLmdsb2JhbEFscGhhXG4gIGN0eC5mb250ID0gb3B0aW9ucy5mb250XG5cbiAgY3R4LnRyYW5zbGF0ZShjYW52YXNXaWR0aCAvIDIsIGNhbnZhc0hlaWdodCAvIDIpXG4gIGN0eC5yb3RhdGUob3B0aW9ucy5yb3RhdGVBbmdsZSlcblxuICBjdHgudHJhbnNsYXRlKC1jYW52YXNXaWR0aCAvIDIgKiAxLjIsIC1jYW52YXNIZWlnaHQgLyAyICogMS4yKVxuICBjdHguZmlsbFN0eWxlID0gb3B0aW9ucy5maWxsU3R5bGVcblxuICBjb25zdCB3YXRlck1hcmtUZXh0ID0gW11cbiAgY29uc3QgY2h1bmtXaWR0aCA9IG9wdGlvbnMuY2h1bmtXaWR0aFxuICBjb25zdCBjaHVua0hlaWdodCA9IG9wdGlvbnMuY2h1bmtIZWlnaHRcbiAgY29uc3QgaG9yaXpvbnRhbENodW5rQ291bnQgPSBNYXRoLmNlaWwoY2FudmFzV2lkdGggLyBjaHVua1dpZHRoKSArIDFcbiAgY29uc3QgdmVydGljYWxDaHVua0NvdW50ID0gTWF0aC5jZWlsKGNhbnZhc0hlaWdodCAvIGNodW5rSGVpZ2h0KSArIDFcblxuICBmb3IgKGxldCBqID0gMCwgaW5pdFkgPSBjaHVua0hlaWdodCAvIDIsIGluZGVudCA9IDA7IGogPD0gdmVydGljYWxDaHVua0NvdW50OyBqICs9IDEpIHtcbiAgICBpbmRlbnQgPSBwYXJzZUludChqICUgMilcblxuICAgIGZvciAobGV0IGkgPSAwLCBpbml0WCA9IGNodW5rV2lkdGggLyAyOyBpIDw9IGhvcml6b250YWxDaHVua0NvdW50OyBpICs9IDEpIHtcbiAgICAgIHdhdGVyTWFya1RleHQucHVzaCh7XG4gICAgICAgIHRleHQsXG4gICAgICAgIHg6IGkgKiBjaHVua1dpZHRoICsgaW5kZW50ICogaW5pdFgsXG4gICAgICAgIHk6IGogKiBjaHVua0hlaWdodCArIGluaXRZXG4gICAgICB9KVxuICAgIH1cbiAgfVxuXG4gIHdhdGVyTWFya1RleHQuZm9yRWFjaCgoaXRlbSkgPT4ge1xuICAgIGN0eC5maWxsVGV4dChpdGVtLnRleHQsIGl0ZW0ueCwgaXRlbS55KVxuICB9KVxuXG4gIHJldHVybiBjdHguY2FudmFzLnRvRGF0YVVSTCgpXG59XG4iXX0=