Как скачать изображения из Google Sheets?
Вы когда-нибудь задумывались, а как скачать изображения из Google Sheets на комп? Или хотя бы выгрузить на Гугл Диск. Я задумывался. Нет такой возможности. Да-да, представьте себе, в Excel есть, а тут нет. Поэтому, поскольку я пишу много Google Apps скриптов, я подумал: «Напишу-ка ещё один, который закроет эту брешь». В итоге сделал расширение для Хрома Sheets Image Exporter.
Кстати, как-то меня озадачило отсутствие в Календаре Гугл возможности удалять события скопом. Серьёзно, вы до сих пор вынуждены тыкать в Удалить по одному. А если у вас куча евентов? Может, вы — евент-агентство или просто графики смен или отпусков составляете. Так вот, я тогда написал дополнение Good Events Planner, которое восполняло этот недостаток.
Впрочем, я не о нём, а о Sheets Image Exporter.
Легко сохраняйте изображения локально и экспортируйте их на Google Drive из Google Таблиц с помощью расширения Sheets Image Exporter для Chrome. Этот инструмент упрощает работу с изображениями, позволяя сохранять их на Google Диск или скачивать на устройство.
Основная инновация: механизм обнаружения изображений
Одной из главных трудностей при разработке Sheets Image Exporter было надежное определение изображений в Google Sheets, особенно различение выбранных и невыбранных изображений. Изначально я исследовал Google Sheets API, надеясь использовать метод getUrl() класса OverGridImage для получения данных изображений, но этот подход оказался проблемным.
Проблемы с Google Sheets API
Google Sheets API, несмотря на свои возможности, имеет значительные ограничения при работе с изображениями. Класс OverGridImage, представляющий изображения, плавающие над таблицей, не позволяет надежно различать изображения или определять, выбрано ли изображение пользователем. Метод getUrl(), предназначенный для получения URL изображения, и ранее был ненадежен, а недавно Google полностью сделал его непригодным для использования.
В документации Google Apps Script для OverGridImage метод getUrl() помечен, как устаревший:
Устарело.
Для большинства вновь вставленных изображений исходный URL недоступен.
Это создало проблему в программном доступе к данным изображений через API, что потребовало пересмотра подхода.
Решение на основе DOM
Столкнувшись с этими ограничениями, я обратился к объектной модели документа (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:
const defaultSelector = 'div.waffle-borderless-embedded-object-overlay[style*="cursor: -webkit-grab"]';Этот селектор нацелен на элементы <div> с классом waffle-borderless-embedded-object-overlay, имеющие стиль cursor: -webkit-grab, что соответствует изображениям, выделеннным пользователем мышью в интерфейсе Google Sheets.
Гибкость с пользовательскими селекторами
Предполагая, что пользователи могут захотеть настроить обнаружение изображений, я добавил возможность ввода пользовательского CSS-селектора через интерфейс всплывающего окна расширения. Это позволяет опытным пользователям нацеливаться на конкретные элементы в DOM. Например, чтобы получить все изображения (включая невыбранные), можно использовать селектор div.waffle-borderless-embedded-object-overlay[style*="cursor: default"], который нацелен на все, включая невыделенные, изображения.
Логика обработки селекторов, включая возврат к селектору по умолчанию при некорректном пользовательском селекторе, реализована в content.js:
try {
selectedImageContainers = document.querySelectorAll(selector);
} catch (e) {
console.warn(`Некорректный селектор: ${selector}, возврат к умолчанию: ${defaultSelector}`);
selector = defaultSelector;
selectedImageContainers = document.querySelectorAll(defaultSelector);
}Этот код обеспечивает возврат к селектору по умолчанию при некорректном пользовательском селекторе, сохраняя функциональность и предоставляя обратную связь через консоль.
Обработка изображений в DOM
После обнаружения изображений расширение обрабатывает их, извлекая URL-адреса blob и преобразуя их в dataURL для дальнейшего использования (например, сохранения в Google Drive или локальной загрузки). Это реализовано в content.js:
const img = container.querySelector('img[src^="blob:https://docs.google.com/"], img[src^="filesystem:https://docs.google.com/"]');
if (img) {
processImage(img, index, () => {
completed++;
if (completed === selectedImageContainers.length) {
const filteredDataUrls = dataUrls.filter(url => url !== null);
console.log(`Отправлено ${filteredDataUrls.length} уникальных изображений.`);
sendResponse({ images: filteredDataUrls, selectorUsed: selector });
}
});
}Этот фрагмент показывает, как расширение определяет элементы <img> с URL-адресами blob или filesystem, преобразует их в dataURL и отправляет результаты в скрипт всплывающего окна для отображения или экспорта.
Почему это важно
Механизм обнаружения изображений на основе DOM является сердцем Sheets Image Exporter. Отказ от Google Sheets API и использование DOM позволяет преодолеть ограничения устаревшего метода getUrl() и обеспечивает надежный способ определения и извлечения изображений. Селектор по умолчанию упрощает использование для большинства пользователей, а возможность пользовательского селектора добавляет гибкость для продвинутых сценариев. Этот подход не только решает техническую задачу, но и улучшает пользовательский опыт, делая извлечение изображений интуитивным и надежным.
Практическое применение
Расширение применимо в различных ситуациях:
- Электронная коммерция: Извлечение изображений товаров из таблиц инвентаризации для использования на сайтах или маркетплейсах.
- Образование: Получение визуальных активов из учебных материалов или студенческих проектов для отчётов или цифровых портфолио.
- Управление проектами: Экспорт изображений, таких как логотипы или скриншоты, из таблиц для включения в отчёты или презентации.
- Маркетинг: Доступ к визуальным материалам кампаний, например графике для социальных сетей или баннерам, прямо из таблицы.
Эти примеры показывают, как расширение решает важную задачу для пользователей, работающих с визуальными данными в Google Sheets.
Основные функции
- Выбор изображений мышью: Выделяйте одно или несколько изображений в Google Таблицах с помощью мыши (удерживайте Ctrl или Shift для множественного выбора).
- Быстрое удаление изображений: Удаляйте выбранные изображения из таблицы клавишей Delete после сохранения.
- Настройки качества изображения: Выбирайте формат (PNG/JPEG) и уровень сжатия (для локального экспорта).
- Сохранение на Google Диск: Загружайте изображения в указанную папку Google Диска.
- Локальный экспорт: Скачивайте изображения в виде zip-архива на устройство в выбранном формате.
- Настраиваемый CSS-селектор: Используйте собственный CSS-селектор для выбора изображений, с оптимизированным стандартным селектором.
- Удобный интерфейс: Просматривайте и выбирайте изображения с помощью флажков.
- Безопасная аутентификация: Использует OAuth 2.0 от Google для безопасного доступа к Google Диску.
Как использовать
- Откройте Google Таблицы с изображениями.
- Выделите изображения, удерживая Ctrl/Shift для множественного выбора.
- Нажмите на иконку расширения.
- Введите ID папки Google Диска (из URL:
https://drive.google.com/drive/folders/FOLDER_ID) или оставьте пустым для локального скачивания. - (Опционально) Настройте CSS-селектор или используйте стандартный. Например, если в селекторе заменить «cursor: -webkit-grab» на «cursor: default», то будут выбраны все изображения, а не только выделенные.
- (Опционально) Настройте степень сжатия (0.2 — 1.0) и выберите тип (JPG/PNG).
- Выберите изображения в списке и нажмите «Save to Drive» или «Download Locally».
- (Опционально) Удалите выделенные изображения клавишей Delete.
Системные требования
- Учетная запись Google с доступом к Google Таблицам и Google Диску (для сохранения на Drive).
- Браузер Google Chrome (рекомендуется последняя версия).
- Подключение к интернету для работы с API (если используется Google Диск).
Конфиденциальность и безопасность
Мы уважаем вашу конфиденциальность. Расширение:
- Собирает только данные, необходимые для работы (ID папки, CSS-селектор, временный OAuth-токен, изображения).
- Не передает данные третьим лицам.
- Соответствует политике пользовательских данных Google API.
- Хранит настройки безопасно в хранилище Chrome и удаляет OAuth-токены после использования.
Подробности см. в Политике конфиденциальности для Sheets Image Exporter.
Теперь скачать изображения из Google Sheets легко и просто. Упростите управление изображениями в Google Таблицах!
Обновление
Сегодня, наконец, закинул всё необходимое для публикации этого расширения в Гугл Хром Стор, жду рассмотрения и одобрения.
Как только одобрят, так сразу закину сюда ссылку на расширение.
Обновление 2
Одобрили, вот ссылка: Sheets Image Exporter, пробуйте.
0 комментариев