html javascript php保存图像并显示不起作用

时间：2018-08-01 15:58:54

标签： javascript php html pdf

我有这么长的代码：

<!DOCTYPE html>
<html lang="en">

<script src=jquery-2.1.1.min.js"></script>
<script /prism.js"></script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script src="pdf.js"></script><style type="text/css">

#post-header {
    margin: 0 0 50px 0; 
}

#post-header h1 {
    font-size: 33px;
    margin: 0;
    line-height: 2;
    text-align: center;
}

#image-thumb-container {
    text-align: center; 
    margin: 20px 0;
}

#image-thumb-container img {
    width: 100px;
    border-radius: 50%;
}

#post-header time {
    text-align: center;
    color: #999999;
    display: block;
}




.italic-content {
    font-style: italic;
}



.post-related-image img {
    display: table-cell;
    vertical-align: middle;
    width: 75px;
}

.post-related-text {
    display: table-cell;
    vertical-align: middle;
}

#paypal-donate-container {
    margin: 50px 0;
    font-size: 20px;
    padding: 20px;
    border-radius: 2px;
    text-align: center;
    font-weight: 500;
    border: 2px dashed #2980b9;
    color: #2980b9;
    line-height: 1;
}


#disqus_thread {
    margin: 50px 0 0 0;
}

@media screen and (min-width:320px) and (max-width:1023px) {
    #main-inner-container {
        padding: 0 20px;
    }

    #post-header h1 {
        line-height: 1.5;
    }
}

@media screen and (min-width:320px) and (max-width:414px) {

}

@media screen and (min-width:1024px) and (max-width:1024px) {
    #main-inner-container {
        padding: 0 20px;
    }

    #left-content {
        width: 634px;
        margin: 0 50px 0 0 !important;
        box-sizing: border-box;
    }

    #right-content {
        width: 300px;
    }
}

</style>
<style type="text/css">
#upload-button {
    background-color: white;
        border: 2px solid #2980b9;
        color: #2980b9;
        cursor: pointer;
        display: block;
        margin: 50px auto;
        padding: 10px;
        width: 200px;
}

#file-to-upload {
    display: none;
}

#pdf-main-container {
    width: 400px;
    margin: 50px auto;
}

#pdf-loader {
    display: none;
    text-align: center;
    color: #999999;
    font-size: 13px;
    line-height: 100px;
    height: 100px;
}

#pdf-contents {
    display: none;
}

#pdf-meta {
    overflow: hidden;
    margin: 0 0 20px 0;
}

#pdf-buttons {
    float: left;
}

#page-count-container {
    float: right;
}

#pdf-current-page {
    display: inline;
}

#pdf-total-pages {
    display: inline;
}

#pdf-canvas {
    border: 1px solid rgba(0,0,0,0.2);
    box-sizing: border-box;
}

#page-loader {
    height: 100px;
    line-height: 100px;
    text-align: center;
    display: none;
    color: #999999;
    font-size: 13px;
}

#download-image {
    width: 150px;
    display: block;
    margin: 10px auto 0 auto;
    font-size: 14px;
    text-align: center;
    font-weight: 700;
}</style>
</head>

<body>
<form action="pdfimage.php" method="get"><input type="text" name="name"><input type="submit"></form>

<form action="pdfimage.php" method="get"><input type="text" name="namess" id="idd"><input type="submit"></form>


<?php $name=$_GET['name']?>
<?php echo $name?>
<img src="yeso.png">
<BUTTON onclick="con()"></button>


<button id="upload-button">Select PDF</button> 
<input type="file" id="file-to-upload" accept="application/pdf" />
<div id="pdf-main-container">
    <div id="pdf-loader">Loading document ...</div>
    <div id="pdf-contents">
        <div id="pdf-meta">
            <div id="pdf-buttons">
                <button id="pdf-prev">Previous</button>
                <button id="pdf-next">Next</button>
            </div>
            <div id="page-count-container">Page <div id="pdf-current-page"></div> of <div id="pdf-total-pages"></div></div>
        </div>
        <canvas id="pdf-canvas" width="400"></canvas>
        <div id="page-loader">Loading page ...</div>
        <a id="download-image" href="#">Download PNG</a>
    </div>
    <a id="thiss" href="#">thissssss</a>
</div>

</div>
    </div>
</div> 


<script>
var __PDF_DOC,
    __CURRENT_PAGE,
    __TOTAL_PAGES,
    __PAGE_RENDERING_IN_PROGRESS = 0,
    __CANVAS = $('#pdf-canvas').get(0),
    __CANVAS_CTX = __CANVAS.getContext('2d');

function showPDF(pdf_url) {
    $("#pdf-loader").show();

    PDFJS.getDocument({ url: pdf_url }).then(function(pdf_doc) {
        __PDF_DOC = pdf_doc;
        __TOTAL_PAGES = __PDF_DOC.numPages;

        // Hide the pdf loader and show pdf container in HTML
        $("#pdf-loader").hide();
        $("#pdf-contents").show();
        $("#pdf-total-pages").text(__TOTAL_PAGES);

        // Show the first page
        showPage(1);
    }).catch(function(error) {
        // If error re-show the upload button
        $("#pdf-loader").hide();
        $("#upload-button").show();

        alert(error.message);
    });;
}

function showPage(page_no) {
    __PAGE_RENDERING_IN_PROGRESS = 1;
    __CURRENT_PAGE = page_no;

    // Disable Prev & Next buttons while page is being loaded
    $("#pdf-next, #pdf-prev").attr('disabled', 'disabled');

    // While page is being rendered hide the canvas and show a loading message
    $("#pdf-canvas").hide();
    $("#page-loader").show();
    $("#download-image").hide();

    // Update current page in HTML
    $("#pdf-current-page").text(page_no);

    // Fetch the page
    __PDF_DOC.getPage(page_no).then(function(page) {
        // As the canvas is of a fixed width we need to set the scale of the viewport accordingly
        var scale_required = __CANVAS.width / page.getViewport(1).width;

        // Get viewport of the page at required scale
        var viewport = page.getViewport(scale_required);

        // Set canvas height
        __CANVAS.height = viewport.height;

        var renderContext = {
            canvasContext: __CANVAS_CTX,
            viewport: viewport
        };

        $("#page-loader").css({  'height': __CANVAS.height + 'px', 'line-height': __CANVAS.height + 'px' });

        // Render the page contents in the canvas
        page.render(renderContext).then(function() {
            __PAGE_RENDERING_IN_PROGRESS = 0;

            // Re-enable Prev & Next buttons
            $("#pdf-next, #pdf-prev").removeAttr('disabled');

            // Show the canvas and hide the page loader
            $("#pdf-canvas").show();
            $("#page-loader").hide();
            $("#download-image").show();
        });
    });
}

// Upon click this should should trigger click on the #file-to-upload file input element
// This is better than showing the not-good-looking file input element
$("#upload-button").on('click', function() {
    $("#file-to-upload").trigger('click');
});

// When user chooses a PDF file
$("#file-to-upload").on('change', function() {
    // Validate whether PDF
    if(['application/pdf'].indexOf($("#file-to-upload").get(0).files[0].type) == -1) {
        alert('Error : Not a PDF');
        return;
    }

    $("#upload-button").hide();

    // Send the object url of the pdf
    showPDF(URL.createObjectURL($("#file-to-upload").get(0).files[0]));
});

// Previous page of the PDF
$("#pdf-prev").on('click', function() {
    if(__CURRENT_PAGE != 1)
        showPage(--__CURRENT_PAGE);
});

// Next page of the PDF
$("#pdf-next").on('click', function() {
    if(__CURRENT_PAGE != __TOTAL_PAGES)
        showPage(++__CURRENT_PAGE);
});

// Download button
$("#download-image").on('click', function() {
    if(typeof window.navigator.msSaveBlob === 'function')
        window.navigator.msSaveBlob(new Blob( [__CANVAS.msToBlob()], {type: 'image/jpg'} ), 'page.jpg');
    else
        $(this).attr('href', __CANVAS.toDataURL()).attr('download', '<?php echo $name?>.png');
        $("thiss").attr('href', __CANVAS.toDataURL())
});

function con(__CANVAS) {
    var image = new Image();
    image.src = __CANVAS.toDataURL();
    return image;
}
con();

document.write(image);

</script>







</body>
</html>

因此，基本上应该打开一个pdf文件，然后将每个页面都转至画布上并显示图像。

除显示图像部分外，其他一切都很好。我目前唯一能做的就是根据用户指定的名称下载图像（使用简单形式）并将其下载到我的计算机上。我试图将画布显示为图像（代码的另一端），但是它根本不起作用。我什至看不到图像图标（当无法显示图像时浏览器会显示的那个绿色的小图标）。我什么都看不到。

预先感谢

如果很重要，我尝试显示图像，然后保存它，然后将其用作HTML活页簿的内容...

不用担心CSS没用了...这又是一个故事...

0 个答案:

没有答案
相关问题
最新问题