Извлечение изображений из Google Sheets с помощью Sheets Image Exporter

Google Sheets — мощный инструмент для работы с данными, но, в отличие от Microsoft Excel, в нём отсутствует встроенная возможность экспорта изображений, встроенных в таблицы. Будь то фотографии товаров, визуальные активы или другие изображения, их извлечение без ручной работы невозможно и отнимает много времени. Расширение для Chrome Sheets Image Exporter устраняет этот пробел, позволяя эффективно экспортировать изображения из Google Sheets. В этой статье рассматривается, как работает Sheets Image Exporter, его практическое применение и важные аспекты использования.

Sheets Image Exporter — это расширение для Chrome, которое предоставляет возможность извлечения изображений из Google Sheets, отсутствующую в стандартных функциях платформы. Оно позволяет экспортировать все изображения из таблицы за одну операцию, сохраняя их в формате PNG или JPEG. Пользователи могут сохранять изображения на Google Drive или скачивать их на устройство. Также поддерживается настройка имён файлов на основе значений ячеек или последовательной нумерации для удобной организации.

Одной из главных трудностей при разработке Sheets Image Exporter было надежное определение изображений в Google Sheets, особенно различение выбранных и невыбранных изображений. Изначально я исследовал Google Sheets API, надеясь использовать метод getUrl() класса OverGridImage для получения данных изображений, но этот подход оказался проблемным.

Google Sheets API, несмотря на свои возможности, имеет значительные ограничения при работе с изображениями. Класс OverGridImage, представляющий изображения, плавающие над таблицей, не позволяет надежно различать изображения или определять, выбрано ли изображение пользователем. Метод getUrl(), предназначенный для получения URL изображения, и ранее был ненадежен, а недавно Google полностью сделал его непригодным для использования.

В документации Google Apps Script для OverGridImage метод getUrl() помечен, как устаревший:

Это создало проблему в программном доступе к данным изображений через API, что потребовало пересмотра подхода.

Столкнувшись с этими ограничениями, я обратился к объектной модели документа (DOM) браузера. Идея заключалась в том, чтобы обойти Google Sheets API и определять изображения напрямую в структуре DOM веб-страницы. Эксперименты показали, что изображения в Google Sheets представлены как элементы <img> с атрибутами src, начинающимися с blob:https://docs.google.com/ или filesystem:https://docs.google.com/. Это стало ключевым, позволив расширению обнаруживать изображения через запросы к DOM, а не полагаться на ненадежный API.

Для удобства и гибкости я реализовал механизм на основе CSS-селекторов для поиска изображений. Расширение использует селектор по умолчанию для определения изображений, выделенных пользователем мышью, используя специфическое CSS-свойство интерфейса Google Sheets. Выбранные изображения содержатся в элементах <div> с атрибутом style, включающим cursor: -webkit-grab. Это привело к определению селектора по умолчанию в popupImages.js:

Этот селектор нацелен на элементы <div> с классом waffle-borderless-embedded-object-overlay, имеющие стиль cursor: -webkit-grab, что соответствует изображениям, активно выбранным пользователем в интерфейсе Google Sheets.

Предполагая, что пользователи могут захотеть настроить обнаружение изображений, я добавил возможность ввода пользовательского CSS-селектора через интерфейс всплывающего окна расширения. Это позволяет опытным пользователям нацеливаться на конкретные элементы в DOM. Например, чтобы получить все изображения (включая невыбранные), можно использовать селектор div.waffle-borderless-embedded-object-overlay[style*="cursor: default"], который нацелен на все изображения.

Логика обработки селекторов, включая возврат к селектору по умолчанию при некорректном пользовательском селекторе, реализована в content.js:

Этот код обеспечивает возврат к селектору по умолчанию при некорректном пользовательском селекторе, сохраняя функциональность и предоставляя обратную связь через консоль.

После обнаружения изображений расширение обрабатывает их, извлекая URL-адреса blob и преобразуя их в dataURL для дальнейшего использования (например, сохранения в Google Drive или локальной загрузки). Это реализовано в content.js:

Этот фрагмент показывает, как расширение определяет элементы <img> с URL-адресами blob или filesystem, преобразует их в dataURL и отправляет результаты в скрипт всплывающего окна для отображения или экспорта.

Механизм обнаружения изображений на основе DOM является сердцем Sheets Image Exporter. Отказ от Google Sheets API и использование DOM позволяет преодолеть ограничения устаревшего метода getUrl() и обеспечивает надежный способ определения и извлечения изображений. Селектор по умолчанию упрощает использование для большинства пользователей, а возможность пользовательского селектора добавляет гибкость для продвинутых сценариев. Этот подход не только решает техническую задачу, но и улучшает пользовательский опыт, делая извлечение изображений интуитивным и надежным.

Расширение применимо в различных ситуациях:

Электронная коммерция: Извлечение изображений товаров из таблиц инвентаризации для использования на сайтах или маркетплейсах.

Образование: Получение визуальных активов из учебных материалов или студенческих проектов для отчётов или цифровых портфолио.

Управление проектами: Экспорт изображений, таких как логотипы или скриншоты, из таблиц для включения в отчёты или презентации.

Маркетинг: Доступ к визуальным материалам кампаний, например графике для социальных сетей или баннерам, прямо из таблицы.

Эти примеры показывают, как расширение решает важную задачу для пользователей, работающих с визуальными данными в Google Sheets.

Sheets Image Exporter предлагает несколько полезных возможностей:

Массовый экспорт: Извлечение всех изображений из таблицы за одну операцию, компенсируя отсутствие встроенной функции экспорта.

Форматы сохранения: Сохранение изображений в формате PNG или JPEG в зависимости от предпочтений пользователя.

Настройка имён файлов: Возможность именовать файлы на основе значений ячеек или последовательной нумерации.

Интеграция с Google Drive: Сохранение изображений прямо на Google Drive для удобного доступа в экосистеме Google.

Локальная загрузка: Загрузка всех выбранных изображений на ваше устройство в одном архиве ZIP.

Расширение работает через браузер Chrome и имеет простой интерфейс, требующий минимальной настройки.

При использовании Sheets Image Exporter важно учитывать несколько моментов:

Ограничения API Google: При работе с таблицами, содержащими большое количество изображений, экспорт может потребовать выполнения частями, чтобы не превысить лимиты API Google.

Типы изображений: Расширение извлекает изображения, размещённые над ячейками, но не поддерживает экспорт диаграмм или рисунков, созданных в Google Sheets.

Sheets Image Exporter предоставляет важную функцию, отсутствующую в Google Sheets: возможность экспорта изображений, встроенных в таблицы. Для пользователей, работающих с визуальными данными — будь то для бизнеса, образования или личных проектов, — это расширение для Chrome разрешает значительное ограничение. Оно доступно в Chrome Web Store и легко интегрируется в рабочий процесс с Google Sheets через браузер Chrome.