Javascript Pdfjs Canvas zu Img

Ich habe ein Problem, Canvas zu img zu konvertieren. Was ist der beste Ansatz zu ToDataURL() zu verwenden und es in img src einfügen? wenn ich das Skript starten es gibt mir die richtige Leinwand aber das img leer .. dies ist mein Code:Javascript Pdfjs Canvas zu Img

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
<script type='text/javascript' src='//code.jquery.com/jquery-2.2.3.js'></script> 
 
<script type="text/javascript" src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script> 
 
</head> 
 
<body> 
 
<div id='anteprima' ></div> 
 
<div id='anteprima_img' ></div> 
 

 
<script type="text/javascript"> 
 
var file = 'http://www.businessmodelgeneration.com/downloads/businessmodelgeneration_preview.pdf'; 
 
pdftoimg(file, 1, 0.5, 'anteprima'); 
 

 
function pdftoimg(file, num, scale2, idd) { 
 
    PDFJS.disableWorker = true; 
 
    PDFJS.getDocument(file).then(function(pdf) { 
 
     pdf.getPage(num).then(function(page) { 
 
      var canvas = document.createElement('canvas'); 
 
      canvas.id = 'pag' + num; 
 
      canvas.className = 'grande'; 
 
      canvasContainer = document.getElementById(idd); 
 
      var context = canvas.getContext('2d'); 
 
      var viewport = page.getViewport(scale2); 
 
      canvas.height = viewport.height; 
 
      canvas.width = viewport.width; 
 
      var renderContext = { 
 
       canvasContext: context, 
 
       viewport: viewport 
 
      }; 
 
      page.render(renderContext); 
 
      canvasContainer.appendChild(canvas); 
 

 
      var dataUrl = canvas.toDataURL(); 
 
      image = document.createElement('img'); 
 
      image.src = dataUrl; 
 
      $('#anteprima_img').html(image); 
 

 

 
     }); 
 
    }); 
 
}; 
 

 
</script> 
 
</body> 
 
</html>

Quelle

2016-07-05 Alessandro Clarea

Ihr Code völlig in Ordnung ist, man muss nur warten, Rendern Sie Canvas, bevor Sie es in Daten-URL konvertieren.

page.render(renderContext).then(function(){ 

    // code for converting data url 

}); 



             
   
    
    <!DOCTYPE HTML> 
 
    <html> 
 
    <head> 
 
    <script type='text/javascript' src='//code.jquery.com/jquery-2.2.3.js'></script> 
 
    <script type="text/javascript" src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script> 
 
    </head> 
 
    <body> 
 
    <div id='anteprima' ></div> 
 
    <div id='anteprima_img' ></div> 
 

 
    <script type="text/javascript"> 
 
    var file = 'http://www.businessmodelgeneration.com/downloads/businessmodelgeneration_preview.pdf'; 
 
    pdftoimg(file, 1, 0.5, 'anteprima'); 
 

 
    function pdftoimg(file, num, scale2, idd) { 
 
     PDFJS.disableWorker = true; 
 
     PDFJS.getDocument(file).then(function(pdf) { 
 
      pdf.getPage(num).then(function(page) { 
 
       var canvas = document.createElement('canvas'); 
 
       canvas.id = 'pag' + num; 
 
       canvas.className = 'grande'; 
 
       canvasContainer = document.getElementById(idd); 
 
       var context = canvas.getContext('2d'); 
 
       var viewport = page.getViewport(scale2); 
 
       canvas.height = viewport.height; 
 
       canvas.width = viewport.width; 
 
       var renderContext = { 
 
        canvasContext: context, 
 
        viewport: viewport 
 
       }; 
 
       page.render(renderContext).then(function(){ 
 
        canvasContainer.appendChild(canvas); 
 
        var dataUrl = canvas.toDataURL(); 
 
        image = document.createElement('img'); 
 
        image.src = dataUrl; 
 
        $('#anteprima_img').html(image); 
 
       }); 
 
      }); 
 
     }); 
 
    }; 
 

 
    </script> 
 
    </body> 
 
    </html>

Quelle

2016-09-08 06:08:27

Antwort

Verwandte Themen