Javascript Pdfjs Canvas to Img

キャンバスをimgに変換する際に問題がありました。 toDataURL（）を使用してimg srcに挿入するのに最適な方法は何ですか？私は、スクリプトを起動したとき、それは私に正しいキャンバスを与えるが、IMGが空白..ですこれは私のコードです：Javascript Pdfjs Canvas to 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>

出典

2016-07-05 Alessandro Clarea

あなたのコードは完全に罰金です、あなただけのを待つ必要がありますキャンバスをレンダリングしてからデータURLに変換します。

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>

出典

2016-09-08 06:08:27

答えて

関連する問題