Сжатие JsPDF создает размытие PDF - PullRequest
Новая
       37

Сжатие JsPDF создает размытие PDF

0 голосов
/ 04 февраля 2019

Я использую PDFJs , чтобы комментировать pdf с использованием fabric js и сохранять полученные изображения холста в pdf с использованием JsPDF .

Вот как я его сохраняю: 

 canvas.height = viewport.height;
    canvas.width = viewport.width;
    var width = canvas.width;
    var height = canvas.height;
    var pdf = new jsPDF('p', 'pt', [width, height]);
    $.each(inst.fabricObjects, function (index, fabricObj) {
        if (index != 0) {
            pdf.addPage();
            pdf.setPage(index + 1);
        }
        var imgData = fabricObj.toDataURL({
            format: 'jpg',
            quality: 0.9
        });
        pdf.addImage(imgData, 'jpg', 0, 0, width, height, null, 'FAST');
        //pdf.addImage(imgData, 'JPEG', 0, 0, canvas.width, canvas.height);
    });
 pdf.save("sample.pdf");

Это приводит к увеличению размера PDF с 3,12 МБ до 11,2 МБ и выглядит размытым.

Этот код, который я использовал ранее, сохранял PDF с огромным размером 

 var pdf = new jsPDF();
 $.each(inst.fabricObjects, function (index, fabricObj) {
     if (index != 0) {
        pdf.addPage();
        pdf.setPage(index + 1);
      }
   pdf.addImage(fabricObj.toDataURL(), 'JPG', 0, 0, canvas.width, canvas.height);
 });

Исходный размер файла: 3.12MB

Размер сохраненного файла PDF: 213MB

1 Ответ

0 голосов
/ 04 февраля 2019

Вам следует попробовать новый API, поддерживающий вектор, pdf.html(), из jsPDF.Смотрите их образец для себя.Я использовал html2canvas.1.0.0-alpha.12.js и jspdf.debug.js.Вот рабочий код: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
    crossorigin="anonymous"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script><!-- html2canvas 1.0.0-alpha.11 or higher version is needed -->

<script>
    function download() {
        let pdf = new jsPDF('l', 'pt', [1920, 640]);
        pdf.html(document.getElementById('id'), {
            callback: function (pdf) {
                pdf.save('test.pdf');
            }
        });
    }
</script>
...