Question

我创建了一个Excel加载项，用户可以在其中打开html图像输入中的图像（PNG）。我通过单击一个名为“ OpenImgUpload”的html按钮打开图片，该按钮调用了一个名为“ imgload”的函数。它还触发了一个名为“ imgupload”的html文件输入，有效地上传了文件，并同时设置了名为“ pic”的图像输入的src属性。作为一个额外的好处，我在“ imgload”函数中添加了一些代码，该函数将上传的图像调整为适当的大小。我的主要问题是，大多数用户都存储pdf文件，而不仅仅是图像。为此，我尝试使用Mozilla的PDF JS库，但收效甚微。

为了使用户更轻松，我想在用户按下名为“ OpenImgUpload”的按钮（因此将函数称为“ imgload”）时将他们的单页pdf转换为png图像。我将如何以这种方式进行转换？

这是函数“ imgload”：

function imgload() {
    $('#imgupload').trigger('click');
    var pdf = document.getElementById('imgupload');
    var selectedFile = document.getElementById('imgupload').files[0];
    var nombre = selectedFile.name;
    var ext = nombre.split('.').pop();

    if (ext == 'png' || ext == 'jpg' || ext == 'jpeg' || ext == 'gif')
    {
        var img = document.createElement("img");
        // Create a file reader
        var reader = new FileReader();
        // Set the image once loaded into file reader
        reader.onload = function (e) {
            img.src = e.target.result;

            var canvas = document.createElement("canvas");
            //var canvas = $("<canvas>", {"id":"testing"})[0];
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0);

            var MAX_WIDTH = 1800;
            var MAX_HEIGHT = 1200;
            var width = img.width;
            var height = img.height;

            if (width > height) {
                if (width > MAX_WIDTH) {
                    height *= MAX_WIDTH / width;
                    width = MAX_WIDTH;
                }
            } 
            else {
                if (height > MAX_HEIGHT) {
                    width *= MAX_HEIGHT / height;
                    height = MAX_HEIGHT;
                }
            }
            canvas.width = width;
            canvas.height = height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, width, height);

            var dataurl = canvas.toDataURL("image/png");
            document.getElementById("pic").src = dataurl;
        }
        // Load files into file reader
        reader.readAsDataURL(selectedFile);
    } 
}

我尝试将以下代码添加到“ imgload”函数中：

else if (ext == 'pdf')
{
    var url1 = window.URL.createObjectURL(selectedFile);
    pdfjsLib.getDocument(url1).then(function (pdf) {
        pdf.getPage(1).then(function (page) {
            var viewport = page.getViewport(1);

            var canvas = document.getElementById('pdf-canvas');
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            page.render(renderContext);
        });
    });
    $('#openImgUpload').attr('href', $('#pdf-canvas').get(0).toDataURL());
    var nom = nombre.replace(/\.[^/.]+$/, "");
    var newfile = nom + ".png";
    // Specfify download option with name
    $('#OpenImgUpload').attr('download', newfile);
}

我通过参考pdfjs文档建立了第二个if循环。它没有引起错误，但是似乎什么也没有发生。我想这与“下载”属性有关。我正试图避免继续下载。

上传文件时如何使用PDFJS将PDF转换为PNG

0 个答案: