Вопрос или проблема
Я рисую комикс и хочу поделиться им на своем личном сайте. Проблема в том, что я не знаю никаких классных плагинов для js / reactjs, чтобы создать читалку комиксов.
Мне нужно что-то плавное и классное, что, желательно, адаптировалось бы к размеру экрана и переключалось между чтением на двух страницах и прокруткой (первый вариант отлично подойдет для иммерсивного чтения, второй очень поможет при чтении на мобильных устройствах).
Знаете ли вы какой-либо проект на GitHub или даже платный скрипт, который мог бы мне помочь?
Большое спасибо.
IDR Solutions имеют конвертер PDF в HTML5, который создает довольно классную версию PDF с перелистыванием страниц, когда я пробовал его около года назад. У него было довольно много опций для рендеринга HTML 5, так что вам, возможно, стоит его попробовать. Найдите несколько достойных примеров PDF, используйте инструмент для создания HTML5-версий с переводом страниц и посмотрите, подходит ли это вашим требованиям.
Комиксы представляют собой ZIP/RAR/TAR файлы изображений
Архивированные файлы комиксов содержат страницы комиксов в форматах изображений, таких как PNG, JPEG, BMP и GIF. Изображения хранятся в сжатом архивном формате.
Файлы комиксов могут существовать в сжатых форматах RAR, ZIP, TAR, 7Z или ACE.
Таким образом, это не простой формат для использования на веб-странице HTML.
С более старыми браузерами это было возможно, но ShockWave/Flash сломали динамические аспекты многих прежних альтернативных читалок. Таким образом, в настоящее время статические HTML-изображения являются самыми простыми в использовании.
Существуют несколько приложений для настольных и мобильных устройств для офлайн-использования, и некоторые из них могут по-прежнему работать с онлайн-архивами, если вы сможете найти те, которые просто предлагают традиционный доступ для более старых методологий).
Тем не менее, эта блокировка настоящих читателей CBx породила тысячи новых онлайн-HTML-офертов, таких как этот.
Ответ или решение
Создание веб-страницы для отображения комиксов может быть увлекательной задачей, и важно правильно выбрать инструменты, чтобы обеспечить гладкий и приятный опыт для пользователей. Вот несколько советов и решений, которые помогут вам реализовать вашу идею.
1. Выбор формата изображений
Как упомянуто, комиксы обычно хранятся в виде ZIP/RAR/TAR файлов с изображениями, такими как PNG или JPEG. Чтобы ваш комикс был доступен на веб-сайте, вам нужно будет расшифровать эти файлы и представить страницы как отдельные изображения.
2. Javascript/ReactJS решения
Существует несколько библиотек и компонентов на JavaScript/ReactJS, которые могут помочь вам реализовать читатель комиксов с возможностью переключения между режимами чтения (двойная страница и прокрутка):
-
React-Comic-Reader: Это компонент, который позволяет загружать изображения страниц комиксов и переключаться между ними. Он также может адаптироваться к размеру экрана. Можно найти его на GitHub и настроить под свои нужды.
-
WebComics: Это более комплексное приложение, которое поддерживает функцию прокрутки и возможность переключения между страницами. Эта библиотека также может помочь вам адаптировать отображение страниц под разные устройства.
-
Comic Book Viewer: Это ещё одна простая в использовании библиотека, которая предоставляет функции переключения между режимами и позволяет пользователям выбирать удобный для них вид отображения.
3. HTML5 и PDF преобразование
Как упоминалось, вы можете использовать инструменты преобразования PDF в HTML5. Примером может быть IDR Solutions, который предлагает вам возможности для создания интерактивной версии вашего комикса. Это может быть хорошим решением, особенно если вы уже имеете готовые PDF-файлы.
4. Адаптивный дизайн
Не забудьте сделать ваш дизайн адаптивным. Используйте CSS Flexbox или Grid для обеспечения правильного отображения на разных устройствах. Библиотека styled-components может помочь вам в стилизации компонентов в ReactJS, чтобы они красиво отображались на разных экранах.
5. Примеры использования
Например, в случае использования React-Comic-Reader, вы можете создать простейший компонент следующим образом:
import React from 'react';
import ComicReader from 'react-comic-reader';
const MyComicReader = () => {
const pages = [
'path/to/page1.jpg',
'path/to/page2.jpg',
// Добавьте остальные страницы
];
return (
<ComicReader
pages={pages}
width={window.innerWidth}
height={window.innerHeight}
enableDoublePage={true}
/>
);
};
export default MyComicReader;Заключение
Создание читателя комиксов на вашем сайте — это вполне выполнимая задача благодаря доступным инструментам. Рекомендуется исследовать различные библиотеки на GitHub, протестировать их и выбрать наиболее подходящую для ваших нужд. Удачи в вашем проекте!