上传时使用pdfjs将pdf转换为图像 [英] Using pdfjs to convert pdf to image while uploading

问题描述

我创建了一个Excel加载项，用户可以在html元素中打开图像。我的问题是我的许多用户将他们的文件存储为PDF。这需要使用PDFjs将PDF文件转换为可用图像（最好是PNG）。我已经尝试了有用角度 [ ^ ]和 Github [ ^ ]。销售很有帮助，但我不确定如何将修改代码合并到我用于将图像上传到图像输入的javascript代码中。如果可能的话，我想在imgupload函数内（if（ext == string）循环之前）进行转换。我该怎么做呢。



这是我的html元素：

I have created an Excel Add-in where the user can open an image inside an html element. My issue is that many of my users store their files as PDFs. This necessitates the use of PDFjs to convert the PDF file into a usable image (preferably PNG). I've tried out some conversion code from Useful Angle[^] and Github[^]. The sales were helpful, but I'm not sure how to incorporate the coversion codes into my javascript code used for uploading images to an image input. I want to do the conversion within the imgupload function (before the if (ext == string) loop) if possible. How should I go about doing this.

Here are my html elements:

<canvas id="the-canvas" style="visibility:hidden"></canvas>

<button id="convertPDF" type="button">Convert PDF</button>
<input type="file" id="imgupload" style="display:none" />
<button id="OpenImgUpload">Image Upload</button>

<div class="picontainer" >
    <input id="pic" type="image"/>
</div>

这是我用来上传和显示图片的代码：

Here is my code used to upload and display the image:

$('#OpenImgUpload').click(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);
    }
}

我的尝试：



我尝试从链接中强制使用Github代码，但它似乎没有做任何事情。

有用角度代码仅在画布中渲染pdf时才有效。

What I have tried:

I tried forcing in the Github code from the link, but it didn't seem to do anything.
The Useful Angle code only works once you render the pdf in a canvas.

推荐答案

（'＃OpenImgUpload'）。click（imgload） ）;
函数imgload（）{

('#OpenImgUpload').click(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）;
//创建文件阅读器
var reader = new FileReader（）;
//设置图像一旦加载到文件阅读器中
reader.onload = function（e）{
img.src = e.target.result;

var canvas = document.createElement（canvas）;
// var canvas =

('#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;
}
}否则{
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;
}
//将文件加载到文件阅读器
reader.readAsDataURL（selectedFile）;
}
}

("<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); } }

我的尝试：



我尝试从链接中强制使用Github代码，但它似乎没有做任何事情。

只有在画布中渲染pdf时，有用角度代码才有效。

What I have tried:

I tried forcing in the Github code from the link, but it didn't seem to do anything.
The Useful Angle code only works once you render the pdf in a canvas.

这篇关于上传时使用pdfjs将pdf转换为图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！