Расширение функциональности pdfThumbnails.js для записи файла png - PullRequest
Новая
       35

Расширение функциональности pdfThumbnails.js для записи файла png

0 голосов
/ 30 октября 2019

Не столько проблема, сколько желание поделиться созданным мною решением для расширения функциональности pdfThumbnails.js для записи png-файла.

ImageMagick часто называют лучшим способомманипулировать изображениями, но ImageMagick не обязательно доступен на всех веб-серверах. Я искал альтернативный подход и обнаружил pdfThumbnails на Github - https://github.com/scandel/pdfThumbnails. Это хорошо работает, переводит первую страницу документа PDF в тег HTML <img>. Однако при этом существует небольшая задержка, и загрузка страницы может занять некоторое время, если на странице требуется много эскизов PDF. Лучшим решением было бы выписать файл изображения для более быстрой загрузки при последующих посещениях страницы.

К сожалению, pdfThumbnails, похоже, не делает этого, поэтому я добавил некоторый код, который, кажется, работает, но тем не менееСпасибо за помощь в его улучшении.

Изначально я попытался добавить код jquery для выполнения на $(document).ready(), но это не сработало, так как миниатюра отображается после события готовности документа. Я также попытался добавить задержку timeout() в две секунды, но это не очень хорошее программирование. В конце концов, изменение кода pdfThumbnail.js показалось лучшим решением.

Необходимо выполнить три шага: -

  1. Изменить код pdfThumbnails.js - всего три новые строки, прокомментированныекак таковой в приведенном ниже коде.
  2. Добавьте атрибут «imagefile» к тегу.
  3. Напишите сценарий PHP для обработки фактической записи файла

Обратите внимание, чтоатрибут src - это просто дескриптор для хранения двоичных данных изображения.

Три новые строки кода в коде pdfThumbnails.js включены во фрагмент ниже: - 

...  
   page.render({
    canvasContext: context,
    viewport: viewport
    }).then(function () {
     element.src = canvas.toDataURL();   
     // Three new lines added. These write the image to file
     var pngfile =element.getAttribute('imagefile');
     var img = canvas.toDataURL();
     $.post("writeimage.php", {image: img, file: pngfile});
     //

   });
...

HTMLкод: 

<img id="thumbnail" data-pdf-thumbnail-file="pdffile.pdf" data-pdf-thumbnail-height="225" src="pdf.png" imagefile="imagefile.png" class="invisible">

Добавлен невидимый класс Bootstrap, поскольку я хочу только записать файл, но не просматривать его изображение на данном этапе. Обратите внимание, что pdf.png на самом деле не ссылается на файл как таковой, это просто заполнитель для хранения двоичных данных визуализированного изображения.

и PHP-файл (writeimage.php) для получения POST равен 

<?php
$data = $_POST["image"];
$file = $_POST["file"];
$source = fopen($data, 'r');
$destination = fopen($file, 'w');
stream_copy_to_stream($source, $destination);
fclose($source);
fclose($destination);
?>

Это лучший способ сделать это, и есть ли какие-либо улучшения, которые я могу сделать?

...