2

Dentro de una API con Express.js he usado la función getTextContent() para extraer el texto de una página de un documento PDF usando el paquete pdf.js, el cual regresa los siguientes items.

 { str:
     'Si desea modificar o corregir sus datos personales, puede acudir a cualquier',
    dir: 'ltr',
    width: 307.3639090879885,
    height: 8.040038228246251,
    transform:
     [ 8.040038228246251,
       0,
       0,
       8.040038228246251,
       30.358212111551254,
       175.43839784367367 ],
    fontName: 'g_d0_f1' },
  { str: 'de la',
    dir: 'ltr',
    width: 19.747558740156638,
    height: 8.040038228246251,
    transform:
     [ 8.040038228246251,
       0,
       0,
       8.040038228246251,
       520.6837612500001,
       175.43839784367367 ],
    fontName: 'g_d0_f1' },

Supongo (No he encontrado documentación de esta API) que transform enlista información acerca de las coordenadas del bloque de texto en la viewport de la página PDF.

Hasta dónde tengo entendido este paquete puede convertir el PDF en imágenes PNG, así que me pregunto si es que puedo extraer la porción del documento a la que quiero hacer una imagén.

La finalidad es que regresar la imagén de la porción en forma de un string en Base64 a quien hace la solicitud HTTP.

1 respuesta 1

0

Una opcion es que tu pdf lo incrustes en un elemento que se exporte a imagen todo su contenido.

este ejemplo solo copia la imagen y la puedes pegar en el navegador ejemplo pegar en gmail.

window.takeScreenShot = function() {
    html2canvas(document.getElementById("target"), {
        onrendered: function (canvas) {
           // document.body.appendChild(canvas);
            //copiando a  clipboard
            
            var img = document.createElement('img');
            img.id='imgCanvas';
img.src = canvas.toDataURL()
          
            var div = document.createElement('div');
div.contentEditable = true;
div.appendChild(img);
document.body.appendChild(div);  

// do copy
SelectText(div);
div.focus();
document.execCommand('Copy');
document.body.removeChild(div);
         
        },
        width:320,
        height:220
    });
    
    function SelectText(element) {
    var doc = document;
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}
}
#target{
    width:300px;
    height:200px;
    background:blue;
    color:#fff;
    padding:10px;
}

button{
    display:block;
    height:20px;
    margin-top:10px;
    margin-bottom:10px;
    
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div id="target">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis eleifend elit. Donec lectus sem, scelerisque sit amet facilisis quis, gravida a lacus. Nunc at lorem egestas, gravida lorem quis, pulvinar ante. Quisque id tempus libero. Mauris hendrerit nunc risus, ac laoreet lectus gravida et. Nam euismod magna ac enim posuere sagittis. Fusce at egestas enim, eu hendrerit enim.
</div>

<button onclick="takeScreenShot()">copiar Imagen</button>

2
  • 1
    Muchas gracias por la respuesta, pero ahora que lo veo no especifique que esto debe ser completado en el servidor y no en el frontend.
    – user119618
    Commented el 13 mar. 2019 a las 15:54
  • 1
    jaja, pequeño detalle, si ya tienes el pdf puedes usa la libreria Ghostscript github.com/jhabjan/Ghostscript.NET Commented el 13 mar. 2019 a las 16:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.