Как скачать png файлы с сайта, которые расположены в файлах типа canvas?

Question

[lynikol]

Имеется сайт, где есть возможность открывать книгу для чтения. Само изображение находится в таком коде:

<canvas data-bind="
                                    attr: {
                                        id: $data.page_id,
                                        width: $data.width() * $root.device_scale(),
                                        height: $data.height()  * $root.device_scale()
                                    }, style: {top: $data.top}
                                " id="page_17" width="907.5" height="1360" style="top: 0px;"></canvas> 

При пролистывании книги, каждая новая страница (page_17) имеет соответсвующее значение (page_18, page_19 и .т.д.)
Однако у меня есть возможность вручную сохранять файл изображение в формате PNG (сохранить как).
Как мне скачать все эти изображения разом? 
Можно автоматизировать процесс?
В книге 500+ страниц.

Comments

[Сергей delphinpro]

Это просто холст для рисования, это не картинка, ее не скачаешь, пока она не нарисуется.
Найдите код, который рисует на холсте. Там могут быть варианты.
Может быть страницы подгружаются в виде графического файла и потом копируются на холст.
Может быть страницы книги подгружаются в виде текста и потом отрисовываются на холсте.
Может еще как-то.
Когда найдете источник данных для рисования, можно уже будет думать, как дернуть данные из этого источника.

[lynikol]

Сергей delphinpro, Так какие данные мне нужно получить?

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента.

Answer 1

[Василий Банников]

У объекта canvas есть метод для этого:
https://developer.mozilla.org/ru/docs/Web/API/HTML...

Тебе остаётся только получить элемент canvas и сохранить этот url

Comments

[lynikol]

Так и как это сделать?

[Василий Банников]

lynikol, через devtools в браузере.
Выбираешь вот этот canvas.
Он автоматически попадёт в переменную $0 емнип.
Затем вызываешь вот этот метод, на который я дал ссылку

[lynikol]

Вот мое решение:

// Функция для скачивания файлов последовательно с задержкой
function downloadFiles(startPage, endPage) {
  var delay = 1000; // Задержка в миллисекундах (1 секунда)
  var currentPage = startPage;
  
  // Функция для скачивания текущего файла и перехода к следующему
  function downloadNextFile() {
    var pageId = 'page_' + currentPage;
    var canvas = document.getElementById(pageId);
    
    if (canvas) {
      var link = document.createElement('a');
      var imageDataURL = canvas.toDataURL('image/png');
      
      link.href = imageDataURL;
      link.download = pageId + '.png';
      link.click();
    }
    
    currentPage++;
    
    if (currentPage <= endPage) {
      setTimeout(downloadNextFile, delay);
    }
  }
  
  // Запустить скачивание первого файла
  downloadNextFile();
}

// Использование функции для скачивания файлов от page_1 до page_480 с задержкой
downloadFiles(1, 480);

Спасибо!