2

キャンバスを img に変換する際に問題があります。 toDataURL() を使用して img src に挿入する最良の方法は何ですか? スクリプトを起動すると、正しいキャンバスが表示されますが、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>

4

1 に答える 1

3

コードはまったく問題ありません。データ 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-08T06:08:27.440 に答える