Блог

vid (String, 3 characters ) 624

uid (String, 1 characters ) 1

title (String, 67 characters ) NodeJS: Как поставить текст на картинку?...

log (String, 0 characters )

status (String, 1 characters ) 1

comment (String, 1 characters ) 2

promote (String, 1 characters ) 0

sticky (String, 1 characters ) 0

nid (String, 3 characters ) 620

type (String, 4 characters ) blog

language (String, 2 characters ) ru

created (String, 10 characters ) 1590308321

changed (String, 10 characters ) 1591249274

tnid (String, 1 characters ) 0

translate (String, 1 characters ) 0

revision_timestamp (String, 10 characters ) 1591249274

revision_uid (String, 1 characters ) 1

body (Array, 1 element)

und (Array, 1 element)
- 0 (Array, 5 elements)
 - value (String, 16291 characters ) Для нашей <a href="https://vk.com/affirmaciy...
 
 Для нашей <a href="https://vk.com/affirmaciya" target="_blank">группы ВКонтакте</a> регулярно требуются картинки с текстом, которые выкладывает Люба. Создавать же эти картинки в фотошопе достаточно долго. Для этого необходимо проделать очень много однотипных действий.  Есть несколько важных параметров итогового изображения: <ul> <li>текст должен влезать на картинку, чтобы выглядел симметрично и красиво;</li> <li>у текста должна быть читаемость независимо от типа картинки на фоне(тёмная или светлая);</li> </ul> В итоге, написал небольшой скрипт на NodeJS, который подгоняет текст под размер картинки и выдаёт результат, который виден в конце этой страницы. Скачать код можно тут: <a href="https://yadi.sk/d/OLLUXtCDsTha4Q" target="_blank">https://yadi.sk/d/OLLUXtCDsTha4Q</a>. Чтобы посмотреть примеры - скроль до конца страницы. Чтобы использовать скрипт нужно установить NodeJS. Его можно скачать для своей платформы с официального сайта. После этого скачать код с Яндекс.Диска, распаковать его в папку и в консоли написать команду npm install. После установки всех зависимостей можно запускать скрипт: из консоли node generate. Возможно сделать исполняемый файл для Windows(нужно будет установить себе <a href="https://www.npmjs.com/package/pkg" target="_blank">пакет pkg</a>). Для этого в консоли npm run generate. После создания исполняемого файла, всё что нужно будет находится в папке dist. При первом запуске скрипт попросит всё, что ему нужно для работы, плюс создаст файл с настройками. Настройки можно менять и если всё совсем перестало работать, тогда можно удалить файл и он пересоздастся с настройками по умолчанию. Важный момент: для файла с текстами(text.txt) необходимо указать кодировку utf-8, а в Windows по умолчанию создаётся windows-1251 из-за чего текст будет отображаться некорректно. Сам код написан грязно, но может быть кому-то сгодится для черпания новых идей. <pre> <code class="language-javascript">const { createCanvas } = require('canvas') const fs = require('fs'); const yaml = require('yaml') const Jimp = require("jimp"); const dir = './images'; const resultDir = './result'; const file = './text.txt'; const settings = getSettings(fs, yaml, './settings.yaml'); if (!fs.existsSync(dir)) { error('В папке с скриптом создай папку '+dir+' и положи в неё картинки');return; } if (!fs.existsSync(file)) { error('В папке с скриптом создай файл '+file+' и на каждой его строке напиши тексты'); return; } if(!fs.existsSync(resultDir)){ error('Создана папка для хранения результатов: ' + resultDir); fs.mkdirSync(resultDir); } var images = fs.readdirSync(dir); var texts = fs.readFileSync(file, 'utf8'); var textsArr = texts.split(/\r?\n/g); if(!images.length){ error('Папка ' +dir+ ' пустая, положи в неё картинки'); return; } if(!textsArr.length){ error('В файле '+file+' нет аффирмаций, добавь их по одной аффирмации на строку'); return } //Начальные настройки var imageIndex = 0; var canvases = []; var ctxs = []; var buffers = []; var resultCount = 0; //Запускаем обработку текстов в цикле textsArr.forEach((text, index) => { var imageName = images[imageIndex]; var newImagePath = resultDir + '/' + index + imageName; imageIndex++; if(images.length == imageIndex){ imageIndex = 0; } canvases[index] = createCanvas(settings.width, settings.height); ctxs[index] = canvases[index].getContext('2d'); ctxs[index].font = `${settings.font.style} ${settings.font.size}px ${settings.font.name}`; //Подбираем размер шрифта, чтобы влезал по ширине var newFontSize = chooseFontSize(ctxs[index], text, settings.maxWidth, settings); var lineHeight = newFontSize * settings.font.lineHeightMultiplicator; ctxs[index].font = `${settings.font.style} ${newFontSize}px ${settings.font.name}`; var lines = wrapLines(ctxs[index], textsArr[index], settings.maxWidth); var marginTop = (settings.height - lines.length * lineHeight) / 2 + lineHeight / 2; //Печатаем на канвасе текст lines.forEach((line) => { ctxs[index].fillStyle = settings.font.fillStyle; ctxs[index].textBaseline = settings.font.textBaseline; ctxs[index].textAlign = settings.font.textAlign; ctxs[index].shadowOffsetX = settings.font.shadow.offsetX; ctxs[index].shadowOffsetY = settings.font.shadow.offsetY; ctxs[index].shadowColor = settings.font.shadow.color; ctxs[index].shadowBlur = settings.font.shadow.blur * settings.multiplicator; ctxs[index].strokeStyle = settings.font.stroke.style; ctxs[index].lineWidth = settings.font.stroke.lineWidth * settings.multiplicator; ctxs[index].strokeText(line, settings.width/2, marginTop); ctxs[index].fillText(line, settings.width/2, marginTop); ctxs[index].shadowOffsetX = settings.font.glow.offsetX; ctxs[index].shadowOffsetY = settings.font.glow.offsetY; ctxs[index].shadowColor = settings.font.glow.color; ctxs[index].shadowBlur = lineHeight; ctxs[index].fillText(line, settings.width/2, marginTop); marginTop += lineHeight; }); buffers[index] = canvases[index].toBuffer('image/png') //Сохраняем картинку с написанным текстом fs.writeFile(resultDir +'/'+ index + 'text.png', buffers[index], () => { console.log(`Текст "${text}" добавлен в файл ${resultDir +'/'+ index + 'text.png'}`); //Окончательно сводим все картинки, выводим результат, чистим файлы Jimp.read(dir +'/'+ imageName, (err, image) => { Jimp.read(resultDir +'/'+ index + 'text.png', (err, textImage) => { image .cover(settings.width, settings.height) .composite(textImage, 0, 0) .resize(settings.width / settings.multiplicator, settings.height / settings.multiplicator) .write(newImagePath, () => { console.log(`Текст "${text}" наложен на картинку`); fs.unlink(resultDir +'/'+ index + 'text.png', () => { console.log(`Файл ${resultDir +'/'+ index + 'text.png'} с текстом удалён`) resultCount++; if(resultCount == textsArr.length){ error('Все файлы обработаны, спасибо за использование нашей супер-программы :)'); } }); }); }); }) }) }); /** * Подбираем шрифт для печати на картинке. * Написано быстро и плохо, один и тот же код повторяется много раз * @param ctx * @param text * @param maxWidth * @returns {number} */ function chooseFontSize(ctx, text, maxWidth, settings){ var fontSize = settings.font.size; var lines = wrapLines(ctx, text, maxWidth); var marginTopMultiplikator = settings.marginTopMultiplikator; if(!lines.length){ //Шрифт слишком большой, какое-то из слов не влезает по ширине while (!lines.length){ fontSize = fontSize - 1; // Уменьшаем шрифт, чтобы всё влезло ctx.font = `${settings.font.style} ${fontSize}px ${settings.font.name}`; lines = wrapLines(ctx, text, maxWidth); if(fontSize == 0) { break; } } } else{ // Проверяем, сколько пустого места остаётся сверху var canvasHeight = ctx.canvas.height; var lineHeight = fontSize * settings.font.lineHeightMultiplicator; var marginTop = (canvasHeight - lines.length * lineHeight) / 2; if(marginTop < ((ctx.canvas.width - maxWidth) / 2) * marginTopMultiplikator){ while (marginTop < ((ctx.canvas.width - maxWidth) / 2) * marginTopMultiplikator){ fontSize--; // Увеличиваем шрифт, чтобы отступ сверху был больше lines = wrapLines(ctx, text, maxWidth); lineHeight = fontSize * settings.font.lineHeightMultiplicator; marginTop = (canvasHeight - lines.length * lineHeight) / 2; ctx.font = `${settings.font.style} ${fontSize}px ${settings.font.name}`; } } else{ while (marginTop > ((ctx.canvas.width - maxWidth) / 2) * marginTopMultiplikator && lines.length){ fontSize++; // Увеличиваем шрифт, чтобы отступ сверху был больше lines = wrapLines(ctx, text, maxWidth); lineHeight = fontSize * settings.font.lineHeightMultiplicator; marginTop = (canvasHeight - lines.length * lineHeight) / 2; ctx.font = `${settings.font.style} ${fontSize}px ${settings.font.name}`; } fontSize--; } lines = wrapLines(ctx, text, maxWidth); if(!lines.length){ while (!lines.length){ fontSize = fontSize - 1; // Уменьшаем шрифт, чтобы всё влезло ctx.font = `${settings.font.style} ${fontSize}px ${settings.font.name}`; lines = wrapLines(ctx, text, maxWidth); if(fontSize == 0) { break; } } } } return fontSize; } /** * Отдаёт кол-во линий текста, которые влезают в максимальную ширину канваса. * Если отдаёт пустой массив, то одно из слов не влезает по ширине и значит шрифт нужно уменьшать * @param ctx * @param text * @param maxWidth * @returns {Array} */ function wrapLines(ctx, text, maxWidth) { var lines = [], words = text.replace(/\n\n/g,' ` ').replace(/(\n\s|\s\n)/g,'\r') .replace(/\s\s/g,' ').replace('`',' ').replace(/(\r|\n)/g,' '+' ').split(' '), space = ctx.measureText(' ').width, width = 0, line = '', word = '', len = words.length, w = 0, i; for (i = 0; i < len; i++) { word = words[i]; w = word ? ctx.measureText(word).width : 0; if (w) { width = width + space + w; } if (w > maxWidth) { return []; } else if (w && width < maxWidth) { line += (i ? ' ' : '') + word; } else { !i || lines.push(line !== '' ? line.trim() : ''); line = word; width = w; } } if (len !== i || line !== '') { lines.push(line); } return lines; } /** * Отдаёт кол-во линий в файле * @param file * @returns {number} */ function countFileLines(file){ if(file){ var match = file.match(/\r?\n/g); if(match){ return match.length + 1; } else{ return 1; } } return 1; }; /** * Выводим ошибку в консоль * @param text */ function error(text){ console.log(text); setTimeout(function(){}, 5000); } /** * Получаем настройки или, если их нет, то создаём файл с дефолтными * @param fs * @param yaml * @returns {{multiplicator: number, width: number, fontSize: number, height: number, maxWidth: number}} */ function getSettings(fs, yaml, configPath){ var config = {}; //Создаём файл и пишем дефолтные настройки if (!fs.existsSync(configPath)) { config = { multiplicator: 1, width: 1024, height: 1024, maxWidth: 900, marginTopMultiplikator: 2.5, font: { name: 'Segoe Print', style: 'bold', lineHeightMultiplicator: 1.5, size: 100, fillStyle: 'rgba(255, 255, 255,0.9)', textBaseline: 'middle', textAlign: 'center', shadow: { offsetX: 1, offsetY: 1, color: 'rgba(0, 0, 0, 0.5)', blur: 8, }, stroke: { style: 'rgba(15, 15, 15, 0.9)', lineWidth: 5, }, glow: { offsetX: 1, offsetY: 1, color: 'rgba(255, 255, 255, 1)' } } }; const doc = new yaml.Document(); doc.version = true; doc.commentBefore = [ 'Конфигурация для создания картинок. Если что-то пошло не так, то удали этот файл и он пересоздастся с настройками по умолчанию.', 'multiplicator - множитель для увеличения картинки в самом начале, а потом уменьшения. Нужен, чтобы делать сглаживание. При увеличении - увеличивается время генерации', 'width - ширина картинки', 'height - высота картинки', 'maxWidth - максимальная ширина текста', 'marginTopMultiplikator - множитель для отступа сверху. Считает отступ сбоку((width - maxWidth) / 2) и умножает его на эту цифру', 'font - настройки текста', ' name - название шрифта', ' style - стиль шрифта(bold, italic или пусто. шрифт должен уметь поддерживать этот стиль)', ' lineHeightMultiplicator - множитель для высоты строки текста. На эту цифру умножается размер шрифта', ' size - начальный размер в пикселях, отталкиваясь от этого значения идёт изменение размера', ' shadow - тень под текстом', ' strokeStyle, lineWidth - обводка текста', 'glow - свечение под текстом', ].join('\n'); doc.contents = config; fs.writeFileSync(configPath, String(doc)); } else{ const file = fs.readFileSync(configPath, 'utf8'); config = yaml.parse(file) } var multiplicateFields = ['width', 'height', 'maxWidth']; multiplicateFields.forEach((field) => { config[field] *= config.multiplicator; }); config.font.size *= config.multiplicator; return config; }</code></pre>  
 - summary (String, 0 characters )
 - format (String, 9 characters ) full_html
 - safe_value (String, 50799 characters ) Для нашей <a href="https://vk.com/affirmaciy...
 
 Для нашей <a href="https://vk.com/affirmaciya" target="_blank">группы ВКонтакте</a> регулярно требуются картинки с текстом, которые выкладывает Люба. Создавать же эти картинки в фотошопе достаточно долго. Для этого необходимо проделать очень много однотипных действий. Есть несколько важных параметров итогового изображения: <ul><li>текст должен влезать на картинку, чтобы выглядел симметрично и красиво;</li> <li>у текста должна быть читаемость независимо от типа картинки на фоне(тёмная или светлая);</li> </ul>В итоге, написал небольшой скрипт на NodeJS, который подгоняет текст под размер картинки и выдаёт результат, который виден в конце этой страницы. Скачать код можно тут: <a href="https://yadi.sk/d/OLLUXtCDsTha4Q" target="_blank">https://yadi.sk/d/OLLUXtCDsTha4Q</a>. Чтобы посмотреть примеры - скроль до конца страницы. Чтобы использовать скрипт нужно установить NodeJS. Его можно скачать для своей платформы с официального сайта. После этого скачать код с Яндекс.Диска, распаковать его в папку и в консоли написать команду npm install. После установки всех зависимостей можно запускать скрипт: из консоли node generate. Возможно сделать исполняемый файл для Windows(нужно будет установить себе <a href="https://www.npmjs.com/package/pkg" target="_blank">пакет pkg</a>). Для этого в консоли npm run generate. После создания исполняемого файла, всё что нужно будет находится в папке dist. При первом запуске скрипт попросит всё, что ему нужно для работы, плюс создаст файл с настройками. Настройки можно менять и если всё совсем перестало работать, тогда можно удалить файл и он пересоздастся с настройками по умолчанию. Важный момент: для файла с текстами(text.txt) необходимо указать кодировку utf-8, а в Windows по умолчанию создаётся windows-1251 из-за чего текст будет отображаться некорректно. Сам код написан грязно, но может быть кому-то сгодится для черпания новых идей. <pre> <div class="geshifilter"><div class="php geshifilter-php"><pre class="de1">const { createCanvas } = require('canvas') const fs = require('fs'); const yaml = require('yaml') const Jimp = require("jimp"); const <a href="http://www.php.net/dir">dir</a> = './images'; const resultDir = './result'; const <a href="http://www.php.net/file">file</a> = './text.txt'; const settings = getSettings(fs, yaml, './settings.yaml'); if (!fs.existsSync(<a href="http://www.php.net/dir">dir</a>)) { error('В папке с скриптом создай папку '+<a href="http://www.php.net/dir">dir</a>+' и положи в неё картинки');return; } if (!fs.existsSync(<a href="http://www.php.net/file">file</a>)) { error('В папке с скриптом создай файл '+<a href="http://www.php.net/file">file</a>+' и на каждой его строке напиши тексты'); return; } if(!fs.existsSync(resultDir)){ error('Создана папка для хранения результатов: ' + resultDir); fs.mkdirSync(resultDir); } var images = fs.readdirSync(<a href="http://www.php.net/dir">dir</a>); var texts = fs.readFileSync(<a href="http://www.php.net/file">file</a>, 'utf8'); var textsArr = texts.<a href="http://www.php.net/split">split</a>(/\r?\n/g); if(!images.length){ error('Папка ' +<a href="http://www.php.net/dir">dir</a>+ ' пустая, положи в неё картинки'); return; } if(!textsArr.length){ error('В файле '+<a href="http://www.php.net/file">file</a>+' нет аффирмаций, добавь их по одной аффирмации на строку'); return } //Начальные настройки var imageIndex = 0; var canvases = []; var ctxs = []; var buffers = []; var resultCount = 0; //Запускаем обработку текстов в цикле textsArr.forEach((text, index) => { var imageName = images[imageIndex]; var newImagePath = resultDir + '/' + index + imageName; imageIndex++; if(images.length == imageIndex){ imageIndex = 0; } canvases[index] = createCanvas(settings.width, settings.height); ctxs[index] = canvases[index].getContext('2d'); ctxs[index].font = `${settings.font.style} ${settings.font.size}px ${settings.font.name}`; //Подбираем размер шрифта, чтобы влезал по ширине var newFontSize = chooseFontSize(ctxs[index], text, settings.maxWidth, settings); var lineHeight = newFontSize * settings.font.lineHeightMultiplicator; ctxs[index].font = `${settings.font.style} ${newFontSize}px ${settings.font.name}`; var lines = wrapLines(ctxs[index], textsArr[index], settings.maxWidth); var marginTop = (settings.height - lines.length * lineHeight) / 2 + lineHeight / 2; //Печатаем на канвасе текст lines.forEach((line) => { ctxs[index].fillStyle = settings.font.fillStyle; ctxs[index].textBaseline = settings.font.textBaseline; ctxs[index].textAlign = settings.font.textAlign; ctxs[index].shadowOffsetX = settings.font.shadow.offsetX; ctxs[index].shadowOffsetY = settings.font.shadow.offsetY; ctxs[index].shadowColor = settings.font.shadow.color; ctxs[index].shadowBlur = settings.font.shadow.blur * settings.multiplicator; ctxs[index].strokeStyle = settings.font.stroke.style; ctxs[index].lineWidth = settings.font.stroke.lineWidth * settings.multiplicator; ctxs[index].strokeText(line, settings.width/2, marginTop); ctxs[index].fillText(line, settings.width/2, marginTop); ctxs[index].shadowOffsetX = settings.font.glow.offsetX; ctxs[index].shadowOffsetY = settings.font.glow.offsetY; ctxs[index].shadowColor = settings.font.glow.color; ctxs[index].shadowBlur = lineHeight; ctxs[index].fillText(line, settings.width/2, marginTop); marginTop += lineHeight; }); buffers[index] = canvases[index].toBuffer('image/png') //Сохраняем картинку с написанным текстом fs.writeFile(resultDir +'/'+ index + 'text.png', buffers[index], () => { console.<a href="http://www.php.net/log">log</a>(`Текст "${text}" добавлен в файл ${resultDir +'/'+ index + 'text.png'}`); //Окончательно сводим все картинки, выводим результат, чистим файлы Jimp.read(<a href="http://www.php.net/dir">dir</a> +'/'+ imageName, (err, image) => { Jimp.read(resultDir +'/'+ index + 'text.png', (err, textImage) => { image .cover(settings.width, settings.height) .composite(textImage, 0, 0) .resize(settings.width / settings.multiplicator, settings.height / settings.multiplicator) .write(newImagePath, () => { console.<a href="http://www.php.net/log">log</a>(`Текст "${text}" наложен на картинку`); fs.<a href="http://www.php.net/unlink">unlink</a>(resultDir +'/'+ index + 'text.png', () => { console.<a href="http://www.php.net/log">log</a>(`Файл ${resultDir +'/'+ index + 'text.png'} с текстом удалён`) resultCount++; if(resultCount == textsArr.length){ error('Все файлы обработаны, спасибо за использование нашей супер-программы :)'); } }); }); }); }) }) }); /** * Подбираем шрифт для печати на картинке. * Написано быстро и плохо, один и тот же код повторяется много раз * @param ctx * @param text * @param maxWidth * @returns {number} */ function chooseFontSize(ctx, text, maxWidth, settings){ var fontSize = settings.font.size; var lines = wrapLines(ctx, text, maxWidth); var marginTopMultiplikator = settings.marginTopMultiplikator; if(!lines.length){ //Шрифт слишком большой, какое-то из слов не влезает по ширине while (!lines.length){ fontSize = fontSize - 1; // Уменьшаем шрифт, чтобы всё влезло ctx.font = `${settings.font.style} ${fontSize}px ${settings.font.name}`; lines = wrapLines(ctx, text, maxWidth); if(fontSize == 0) { break; } } } else{ // Проверяем, сколько пустого места остаётся сверху var canvasHeight = ctx.canvas.height; var lineHeight = fontSize * settings.font.lineHeightMultiplicator; var marginTop = (canvasHeight - lines.length * lineHeight) / 2; if(marginTop < ((ctx.canvas.width - maxWidth) / 2) * marginTopMultiplikator){ while (marginTop < ((ctx.canvas.width - maxWidth) / 2) * marginTopMultiplikator){ fontSize--; // Увеличиваем шрифт, чтобы отступ сверху был больше lines = wrapLines(ctx, text, maxWidth); lineHeight = fontSize * settings.font.lineHeightMultiplicator; marginTop = (canvasHeight - lines.length * lineHeight) / 2; ctx.font = `${settings.font.style} ${fontSize}px ${settings.font.name}`; } } else{ while (marginTop > ((ctx.canvas.width - maxWidth) / 2) * marginTopMultiplikator && lines.length){ fontSize++; // Увеличиваем шрифт, чтобы отступ сверху был больше lines = wrapLines(ctx, text, maxWidth); lineHeight = fontSize * settings.font.lineHeightMultiplicator; marginTop = (canvasHeight - lines.length * lineHeight) / 2; ctx.font = `${settings.font.style} ${fontSize}px ${settings.font.name}`; } fontSize--; } lines = wrapLines(ctx, text, maxWidth); if(!lines.length){ while (!lines.length){ fontSize = fontSize - 1; // Уменьшаем шрифт, чтобы всё влезло ctx.font = `${settings.font.style} ${fontSize}px ${settings.font.name}`; lines = wrapLines(ctx, text, maxWidth); if(fontSize == 0) { break; } } } } return fontSize; } /** * Отдаёт кол-во линий текста, которые влезают в максимальную ширину канваса. * Если отдаёт пустой массив, то одно из слов не влезает по ширине и значит шрифт нужно уменьшать * @param ctx * @param text * @param maxWidth * @returns {Array} */ function wrapLines(ctx, text, maxWidth) { var lines = [], words = text.replace(/\n\n/g,' ` ').replace(/(\n\s|\s\n)/g,'\r') .replace(/\s\s/g,' ').replace('`',' ').replace(/(\r|\n)/g,' '+' ').<a href="http://www.php.net/split">split</a>(' '), space = ctx.measureText(' ').width, width = 0, line = '', word = '', len = words.length, w = 0, i; for (i = 0; i < len; i++) { word = words[i]; w = word ? ctx.measureText(word).width : 0; if (w) { width = width + space + w; } if (w > maxWidth) { return []; } else if (w && width < maxWidth) { line += (i ? ' ' : '') + word; } else { !i || lines.push(line !== '' ? line.<a href="http://www.php.net/trim">trim</a>() : ''); line = word; width = w; } } if (len !== i || line !== '') { lines.push(line); } return lines; } /** * Отдаёт кол-во линий в файле * @param file * @returns {number} */ function countFileLines(<a href="http://www.php.net/file">file</a>){ if(<a href="http://www.php.net/file">file</a>){ var match = <a href="http://www.php.net/file">file</a>.match(/\r?\n/g); if(match){ return match.length + 1; } else{ return 1; } } return 1; }; /** * Выводим ошибку в консоль * @param text */ function error(text){ console.<a href="http://www.php.net/log">log</a>(text); setTimeout(function(){}, 5000); } /** * Получаем настройки или, если их нет, то создаём файл с дефолтными * @param fs * @param yaml * @returns {{multiplicator: number, width: number, fontSize: number, height: number, maxWidth: number}} */ function getSettings(fs, yaml, configPath){ var config = {}; //Создаём файл и пишем дефолтные настройки if (!fs.existsSync(configPath)) { config = { multiplicator: 1, width: 1024, height: 1024, maxWidth: 900, marginTopMultiplikator: 2.5, font: { name: 'Segoe Print', style: 'bold', lineHeightMultiplicator: 1.5, size: 100, fillStyle: 'rgba(255, 255, 255,0.9)', textBaseline: 'middle', textAlign: 'center', shadow: { offsetX: 1, offsetY: 1, color: 'rgba(0, 0, 0, 0.5)', blur: 8, }, stroke: { style: 'rgba(15, 15, 15, 0.9)', lineWidth: 5, }, glow: { offsetX: 1, offsetY: 1, color: 'rgba(255, 255, 255, 1)' } } }; const doc = new yaml.Document(); doc.version = true; doc.commentBefore = [ 'Конфигурация для создания картинок. Если что-то пошло не так, то удали этот файл и он пересоздастся с настройками по умолчанию.', 'multiplicator - множитель для увеличения картинки в самом начале, а потом уменьшения. Нужен, чтобы делать сглаживание. При увеличении - увеличивается время генерации', 'width - ширина картинки', 'height - высота картинки', 'maxWidth - максимальная ширина текста', 'marginTopMultiplikator - множитель для отступа сверху. Считает отступ сбоку((width - maxWidth) / 2) и умножает его на эту цифру', 'font - настройки текста', ' name - название шрифта', ' style - стиль шрифта(bold, italic или пусто. шрифт должен уметь поддерживать этот стиль)', ' lineHeightMultiplicator - множитель для высоты строки текста. На эту цифру умножается размер шрифта', ' size - начальный размер в пикселях, отталкиваясь от этого значения идёт изменение размера', ' shadow - тень под текстом', ' strokeStyle, lineWidth - обводка текста', 'glow - свечение под текстом', ].<a href="http://www.php.net/join">join</a>('\n'); doc.contents = config; fs.writeFileSync(configPath, String(doc)); } else{ const <a href="http://www.php.net/file">file</a> = fs.readFileSync(configPath, 'utf8'); config = yaml.parse(<a href="http://www.php.net/file">file</a>) } var multiplicateFields = ['width', 'height', 'maxWidth']; multiplicateFields.forEach((field) => { config[field] *= config.multiplicator; }); config.font.size *= config.multiplicator; return config; }</pre></div> </div> </pre> 
 - safe_summary (String, 0 characters )

field_blog_image (Array, 1 element)

und (Array, 3 elements)
- 0 (Array, 13 elements)
 - fid (String, 4 characters ) 1330
 - uid (String, 1 characters ) 1
 - filename (String, 30 characters ) 0a4456cbf6b2dba896e61e9e50.jpg
 - uri (String, 39 characters ) public://0a4456cbf6b2dba896e61e9e50.jpg
 - filemime (String, 10 characters ) image/jpeg
 - filesize (String, 6 characters ) 696533
 - status (String, 1 characters ) 1
 - timestamp (String, 10 characters ) 1590308321
 - alt (String, 0 characters )
 - title (String, 0 characters )
 - width (String, 3 characters ) 900
 - height (String, 3 characters ) 900
 - image_field_caption (Array, 2 elements)
 
 value (String, 80 characters ) Пример короткого текста на картинке...
 
 Пример короткого текста на картинке
 
 format (String, 13 characters ) filtered_html
- 1 (Array, 13 elements)
 - fid (String, 4 characters ) 1333
 - uid (String, 1 characters ) 1
 - filename (String, 26 characters ) 2pdxbojb9jua_kopirovat.jpg
 - uri (String, 35 characters ) public://2pdxbojb9jua_kopirovat.jpg
 - filemime (String, 10 characters ) image/jpeg
 - filesize (String, 6 characters ) 246238
 - status (String, 1 characters ) 1
 - timestamp (String, 10 characters ) 1590308834
 - alt (String, 0 characters )
 - title (String, 0 characters )
 - width (String, 3 characters ) 800
 - height (String, 3 characters ) 800
 - image_field_caption (Array, 2 elements)
 
 value (String, 51 characters ) Текст среднего размера ...
 
 Текст среднего размера
 
 format (String, 13 characters ) filtered_html
- 2 (Array, 13 elements)
 - fid (String, 4 characters ) 1331
 - uid (String, 1 characters ) 1
 - filename (String, 34 characters ) 3dary-dushi-1024x718_kopirovat.jpg
 - uri (String, 43 characters ) public://3dary-dushi-1024x718_kopirovat.jpg
 - filemime (String, 10 characters ) image/jpeg
 - filesize (String, 6 characters ) 246684
 - status (String, 1 characters ) 1
 - timestamp (String, 10 characters ) 1590308701
 - alt (String, 0 characters )
 - title (String, 0 characters )
 - width (String, 3 characters ) 800
 - height (String, 3 characters ) 800
 - image_field_caption (Array, 2 elements)
 
 value (String, 121 characters ) Очень длинный текст, в котором появляются ар...
 
 Очень длинный текст, в котором появляются артефакты на тенях.
 
 format (String, 13 characters ) filtered_html

field_razdel (Array, 1 element)

field_teg (Array, 1 element)

field_video (Array, 0 elements)

field_image_view (Array, 1 element)

field_source (Array, 0 elements)

field_image_view_tiles (Array, 1 element)

metatags (Array, 1 element)

path (Array, 1 element)

cid (String, 1 characters ) 0

last_comment_timestamp (String, 10 characters ) 1590308321

last_comment_name (NULL)

last_comment_uid (String, 1 characters ) 1

comment_count (String, 1 characters ) 0

name (String, 8 characters ) Саша

picture (String, 1 characters ) 0

data (String, 189 characters ) a:6:{s:16:"ckeditor_default";s:1:"t";s:20:"cked...

Вы здесь

Главные вкладки

Вторичные вкладки

Krumo version 0.2.1a