Проблема при генерация PDF с помощью jspdf + canvas,

Question

У меня есть следующий код :

/* Image of page to PDF */

function imageToPdf() {

window.scrollTo(0, 0);

html2canvas( document.querySelector( 'body' ) ).then( canvas => {
   var fileSettings = {
        'orientation'  : pdfprnt_file_settings.orientation,
        'pageSize'     : pdfprnt_file_settings.page_size.toLowerCase(),
        'marginLeft'   : Number( pdfprnt_file_settings.margin_left ),
        'marginRight'  : Number( pdfprnt_file_settings.margin_right ),
        'marginBottom' : Number( pdfprnt_file_settings.margin_bottom ),
        'marginTop'    : Number( pdfprnt_file_settings.margin_top ),
        'fileAction'   : pdfprnt_file_settings.file_action,
        'fileName'     : pdfprnt_file_settings.file_name
    };
    var pdf = new jsPDF( fileSettings['orientation'], 'pt', fileSettings['pageSize'] );
    var width = pdf.internal.pageSize.width;
    var height = pdf.internal.pageSize.height;
    var contentWidth = canvas.width;
    var contentHeight = canvas.height;
    
    //The height of the canvas which one pdf page can show;
    var pageHeight = contentWidth / width * height;
    
    //the height of canvas that haven't render to pdf
    var leftHeight = contentHeight;
    var imgWidth = width - fileSettings['marginLeft'] - fileSettings['marginRight'];
    var imgHeight = width / contentWidth * contentHeight - fileSettings['marginTop'] - fileSettings['marginBottom'];
    
    var pageData = canvas.toDataURL( 'image/jpeg', 1.0 );
    if (leftHeight < pageHeight) {
        pdf.addImage(pageData, 'JPEG', fileSettings['marginLeft'], fileSettings['marginTop'], imgWidth, imgHeight );
    } else {
        var countPages = Math.ceil( leftHeight / pageHeight )
        var canvasNew = document.createElement( 'canvas' );
        canvasNew.width = contentWidth;
        canvasNew.height = pageHeight;
        var context = canvasNew.getContext( '2d' );
        for ( var i = 0; i < countPages-1 ; i++) {
            context.drawImage( canvas, 0, i * -pageHeight );
            imgHeight = width / contentWidth * canvasNew.height - fileSettings['marginTop']  - fileSettings['marginBottom'];
            pdf.addImage( canvasNew.toDataURL( 'image/jpeg', 1.0 ), 'JPEG', fileSettings['marginLeft'], fileSettings['marginTop'], imgWidth, imgHeight );
            leftHeight -= pageHeight;
            pdf.addPage();
        }
        canvasNew.height = leftHeight;
        context.drawImage( canvas, 0,  (countPages-1) * -pageHeight );
        imgHeight =  width / contentWidth * canvasNew.height ;
        pdf.addImage( canvasNew.toDataURL( 'image/jpeg', 1.0 ), 'JPEG', fileSettings['marginLeft'], fileSettings['marginTop'], imgWidth, imgHeight );
    }

    if ( 'open' == fileSettings['fileAction'] ) {
        pdf.setProperties({
            title: fileSettings['fileName']
        });
        window.open( pdf.output( 'bloburl') );
        
    } else {
        
        pdf.save( fileSettings['fileName'] );
    }
});

}

При разбивке на страницы, появляется следующая проблема:

Что мне придумать, чтобы картинка разрезалась не по тексту?

Answer 1

if (leftHeight < pageHeight) {
        if ( null == content_header_footer['header_footer'] ) {
            pdf.addImage(pageData, 'JPEG', fileSettings['marginLeft'], fileSettings['marginTop'], imgWidth, imgHeight );
        } else {
            pdf.fromHTML( elementy_top.html(), fileSettings['marginLeft'], 0, {} );
            pdf.addImage( pageData, 'JPEG', fileSettings['marginLeft'],  fileSettings['marginTop'] + elementy_top.height, imgWidth, imgHeight );
            pdf.fromHTML( elementy_bottom.html(), fileSettings['marginLeft'], height - elementy_bottom.height -1, {} );
        }
    } else {
        var countPages = Math.ceil( leftHeight / pageHeight );
        var theColorBody= jQuery('body').css("background-color");
        for ( var i = 0; i < countPages-1; i++) {
            var canvasNew = document.createElement( 'canvas' );
            canvasNew.width = contentWidth;
            canvasNew.height = pageHeight;
            var context = canvasNew.getContext( '2d' );
            context.drawImage( canvas, 0, i * -pageHeight );
            imgHeight = width / contentWidth * canvasNew.height - fileSettings['marginTop'] - fileSettings['marginBottom'] - elementy_top.height - elementy_bottom.height;
            var imgDatas = context.getImageData( fileSettings['marginLeft'],  fileSettings['marginTop'] + elementy_top.height, imgWidth, imgHeight );
            var n = 100;
            for ( var j = Math.round(imgDatas.data.length - imgWidth * 4 ); j < imgDatas.data.length; j+=4 ) {
               var rgb = 'rgb(' + imgDatas.data[j] + ', ' + imgDatas.data[j-1] + ', ' + imgDatas.data[j-2] + ')';
                if ( rgb != theColorBody  ) {
                    canvasNew = document.createElement( 'canvas' );
                    canvasNew.width = contentWidth;
                    canvasNew.height = pageHeight - n;
                    context = canvasNew.getContext( '2d' );
                    context.drawImage( canvas, 0, i * -pageHeight );
                }
            }
            pdf.fromHTML( elementy_top.html(), fileSettings['marginLeft'], 0, {} );
            pdf.addImage( canvasNew.toDataURL( 'image/jpeg', 1.0 ), 'JPEG', fileSettings['marginLeft'],  fileSettings['marginTop'] + elementy_top.height, imgWidth, imgHeight );
            pdf.fromHTML( elementy_bottom.html(), fileSettings['marginLeft'], height - elementy_bottom.height -1, {} );
            leftHeight -= pageHeight;
            pdf.addPage();

        }
    }

Я пытаюсь получить последний ряд пикселей, если он отличается от основного фона, то уменьшать высоту на один px. Но это пока не работает.

БЛОГ НА HUSL

Проблема при генерация PDF с помощью jspdf + canvas,

Ответы (1 шт):