Mixing
Convert pdf to image before uploading it to s3
I have a current setup in React js where I upload files to s3 using multipart upload as buffer.However if the file format is pdf,video,audio etc. I want to convert it to image before uploading to s3; think of it as thumbnail generation.I have read a lot about this but could not find a right solution for my needs, can please someone suggest some possible solution?(where backend is not involved at all)
PS:I have looked at pdf.js but dont know how to use it while my file type is buffer and what type will it return and can I upload it the same way to S3.A small example would help miles. Thanks in advance !!
var pdfData = buffer;
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.min.js';
var loadingTask = pdfjsLib.getDocument({data: pdfData});
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');
pdf.getPage(1).then(function getPageHelloWorld(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
console.log('page',viewport);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('bulk-thumbnails');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
page.render({canvasContext: context, viewport: viewport});
});
javascript reactjs amazon-s3 pdfjs
asked Nov 22 '18 at 6:14
SHIKHAR SINGHSHIKHAR SINGH
230112
add a comment |
I have a current setup in React js where I upload files to s3 using multipart upload as buffer.However if the file format is pdf,video,audio etc. I want to convert it to image before uploading to s3; think of it as thumbnail generation.I have read a lot about this but could not find a right solution for my needs, can please someone suggest some possible solution?(where backend is not involved at all)
PS:I have looked at pdf.js but dont know how to use it while my file type is buffer and what type will it return and can I upload it the same way to S3.A small example would help miles. Thanks in advance !!
var pdfData = buffer;
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.min.js';
var loadingTask = pdfjsLib.getDocument({data: pdfData});
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');
pdf.getPage(1).then(function getPageHelloWorld(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
console.log('page',viewport);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('bulk-thumbnails');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
page.render({canvasContext: context, viewport: viewport});
});
javascript reactjs amazon-s3 pdfjs
asked Nov 22 '18 at 6:14
SHIKHAR SINGHSHIKHAR SINGH
230112
add a comment |
I have a current setup in React js where I upload files to s3 using multipart upload as buffer.However if the file format is pdf,video,audio etc. I want to convert it to image before uploading to s3; think of it as thumbnail generation.I have read a lot about this but could not find a right solution for my needs, can please someone suggest some possible solution?(where backend is not involved at all)
PS:I have looked at pdf.js but dont know how to use it while my file type is buffer and what type will it return and can I upload it the same way to S3.A small example would help miles. Thanks in advance !!
var pdfData = buffer;
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.min.js';
var loadingTask = pdfjsLib.getDocument({data: pdfData});
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');
pdf.getPage(1).then(function getPageHelloWorld(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
console.log('page',viewport);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('bulk-thumbnails');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
page.render({canvasContext: context, viewport: viewport});
});
javascript reactjs amazon-s3 pdfjs
asked Nov 22 '18 at 6:14
SHIKHAR SINGHSHIKHAR SINGH
230112
I have a current setup in React js where I upload files to s3 using multipart upload as buffer.However if the file format is pdf,video,audio etc. I want to convert it to image before uploading to s3; think of it as thumbnail generation.I have read a lot about this but could not find a right solution for my needs, can please someone suggest some possible solution?(where backend is not involved at all)
PS:I have looked at pdf.js but dont know how to use it while my file type is buffer and what type will it return and can I upload it the same way to S3.A small example would help miles. Thanks in advance !!
var pdfData = buffer;
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.min.js';
var loadingTask = pdfjsLib.getDocument({data: pdfData});
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');
pdf.getPage(1).then(function getPageHelloWorld(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
console.log('page',viewport);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('bulk-thumbnails');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
page.render({canvasContext: context, viewport: viewport});
});
javascript reactjs amazon-s3 pdfjs
javascript reactjs amazon-s3 pdfjs
asked Nov 22 '18 at 6:14
SHIKHAR SINGHSHIKHAR SINGH
230112
asked Nov 22 '18 at 6:14
SHIKHAR SINGHSHIKHAR SINGH
230112
edited Nov 22 '18 at 9:35
SHIKHAR SINGH
asked Nov 22 '18 at 6:14
SHIKHAR SINGHSHIKHAR SINGH
230112
asked Nov 22 '18 at 6:14
SHIKHAR SINGHSHIKHAR SINGH
230112
asked Nov 22 '18 at 6:14
SHIKHAR SINGHSHIKHAR SINGH
230112
230112
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
According to the 2nd example of pdf.js (in the link below) you can also load pdf file using its base64 code.
https://mozilla.github.io/pdf.js/examples/index.html#interactive-examples
var pdfData = atob('PDF file in Base64...');
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
// Using DocumentInitParameters object to load binary data.
var loadingTask = pdfjsLib.getDocument({data: pdfData});
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');
});
And To load pdf file as base64 code you can actually use HTML5 FileReader like this
function getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.log(reader.result);
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
var file = document.querySelector('#files > input[type="file"]').files[0];
getBase64(file); // prints the base64 string
Referenced from
How to convert file to base64 in JavaScript?
Hope it helps
answered Nov 22 '18 at 6:41
Osama SheikhOsama Sheikh
5241611
Thanks @Osama Sheikh. I have aone more doubt what if I don't have a canvas where I am displaying the image.Its a simple img tag within a div.How do we go about it?
– SHIKHAR SINGH
Nov 22 '18 at 9:22
Not sure about image, why not just use canvas, and if you don't want to show canvas then just hide it using css tricks (like setting position fixed and moving the element out of screen using top and left properties)
– Osama Sheikh
Nov 22 '18 at 9:31
How do I get the actual image here so that I can upload it to s3 as well?
– SHIKHAR SINGH
Nov 22 '18 at 9:32
I have pasted the code that I am using currently.My aim is not to show it instantly some where but to store it as a n image and then use it elsewhere.I guess the canvas part just works for only time being because it isn't saved anywhere.Correct?
– SHIKHAR SINGH
Nov 22 '18 at 9:34
Check this thread stackoverflow.com/questions/12921052/…
– Osama Sheikh
Nov 22 '18 at 11:20
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53424884%2fconvert-pdf-to-image-before-uploading-it-to-s3%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
According to the 2nd example of pdf.js (in the link below) you can also load pdf file using its base64 code.
https://mozilla.github.io/pdf.js/examples/index.html#interactive-examples
var pdfData = atob('PDF file in Base64...');
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
// Using DocumentInitParameters object to load binary data.
var loadingTask = pdfjsLib.getDocument({data: pdfData});
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');
});
And To load pdf file as base64 code you can actually use HTML5 FileReader like this
function getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.log(reader.result);
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
var file = document.querySelector('#files > input[type="file"]').files[0];
getBase64(file); // prints the base64 string
Referenced from
How to convert file to base64 in JavaScript?
Hope it helps
answered Nov 22 '18 at 6:41
Osama SheikhOsama Sheikh
5241611
Thanks @Osama Sheikh. I have aone more doubt what if I don't have a canvas where I am displaying the image.Its a simple img tag within a div.How do we go about it?
– SHIKHAR SINGH
Nov 22 '18 at 9:22
Not sure about image, why not just use canvas, and if you don't want to show canvas then just hide it using css tricks (like setting position fixed and moving the element out of screen using top and left properties)
– Osama Sheikh
Nov 22 '18 at 9:31
How do I get the actual image here so that I can upload it to s3 as well?
– SHIKHAR SINGH
Nov 22 '18 at 9:32
I have pasted the code that I am using currently.My aim is not to show it instantly some where but to store it as a n image and then use it elsewhere.I guess the canvas part just works for only time being because it isn't saved anywhere.Correct?
– SHIKHAR SINGH
Nov 22 '18 at 9:34
Check this thread stackoverflow.com/questions/12921052/…
– Osama Sheikh
Nov 22 '18 at 11:20
add a comment |
According to the 2nd example of pdf.js (in the link below) you can also load pdf file using its base64 code.
https://mozilla.github.io/pdf.js/examples/index.html#interactive-examples
var pdfData = atob('PDF file in Base64...');
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
// Using DocumentInitParameters object to load binary data.
var loadingTask = pdfjsLib.getDocument({data: pdfData});
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');
});
And To load pdf file as base64 code you can actually use HTML5 FileReader like this
function getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.log(reader.result);
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
var file = document.querySelector('#files > input[type="file"]').files[0];
getBase64(file); // prints the base64 string
Referenced from
How to convert file to base64 in JavaScript?
Hope it helps
answered Nov 22 '18 at 6:41
Osama SheikhOsama Sheikh
5241611
Thanks @Osama Sheikh. I have aone more doubt what if I don't have a canvas where I am displaying the image.Its a simple img tag within a div.How do we go about it?
– SHIKHAR SINGH
Nov 22 '18 at 9:22
Not sure about image, why not just use canvas, and if you don't want to show canvas then just hide it using css tricks (like setting position fixed and moving the element out of screen using top and left properties)
– Osama Sheikh
Nov 22 '18 at 9:31
How do I get the actual image here so that I can upload it to s3 as well?
– SHIKHAR SINGH
Nov 22 '18 at 9:32
I have pasted the code that I am using currently.My aim is not to show it instantly some where but to store it as a n image and then use it elsewhere.I guess the canvas part just works for only time being because it isn't saved anywhere.Correct?
– SHIKHAR SINGH
Nov 22 '18 at 9:34
Check this thread stackoverflow.com/questions/12921052/…
– Osama Sheikh
Nov 22 '18 at 11:20
add a comment |
According to the 2nd example of pdf.js (in the link below) you can also load pdf file using its base64 code.
https://mozilla.github.io/pdf.js/examples/index.html#interactive-examples
var pdfData = atob('PDF file in Base64...');
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
// Using DocumentInitParameters object to load binary data.
var loadingTask = pdfjsLib.getDocument({data: pdfData});
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');
});
And To load pdf file as base64 code you can actually use HTML5 FileReader like this
function getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.log(reader.result);
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
var file = document.querySelector('#files > input[type="file"]').files[0];
getBase64(file); // prints the base64 string
Referenced from
How to convert file to base64 in JavaScript?
Hope it helps
answered Nov 22 '18 at 6:41
Osama SheikhOsama Sheikh
5241611
According to the 2nd example of pdf.js (in the link below) you can also load pdf file using its base64 code.
https://mozilla.github.io/pdf.js/examples/index.html#interactive-examples
var pdfData = atob('PDF file in Base64...');
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
// Using DocumentInitParameters object to load binary data.
var loadingTask = pdfjsLib.getDocument({data: pdfData});
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');
});
And To load pdf file as base64 code you can actually use HTML5 FileReader like this
function getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.log(reader.result);
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
var file = document.querySelector('#files > input[type="file"]').files[0];
getBase64(file); // prints the base64 string
Referenced from
How to convert file to base64 in JavaScript?
Hope it helps
answered Nov 22 '18 at 6:41
Osama SheikhOsama Sheikh
5241611
answered Nov 22 '18 at 6:41
Osama SheikhOsama Sheikh
5241611
answered Nov 22 '18 at 6:41
Osama SheikhOsama Sheikh
5241611
answered Nov 22 '18 at 6:41
Osama SheikhOsama Sheikh
5241611
5241611
Thanks @Osama Sheikh. I have aone more doubt what if I don't have a canvas where I am displaying the image.Its a simple img tag within a div.How do we go about it?
– SHIKHAR SINGH
Nov 22 '18 at 9:22
Not sure about image, why not just use canvas, and if you don't want to show canvas then just hide it using css tricks (like setting position fixed and moving the element out of screen using top and left properties)
– Osama Sheikh
Nov 22 '18 at 9:31
How do I get the actual image here so that I can upload it to s3 as well?
– SHIKHAR SINGH
Nov 22 '18 at 9:32
I have pasted the code that I am using currently.My aim is not to show it instantly some where but to store it as a n image and then use it elsewhere.I guess the canvas part just works for only time being because it isn't saved anywhere.Correct?
– SHIKHAR SINGH
Nov 22 '18 at 9:34
Check this thread stackoverflow.com/questions/12921052/…
– Osama Sheikh
Nov 22 '18 at 11:20
add a comment |
Thanks @Osama Sheikh. I have aone more doubt what if I don't have a canvas where I am displaying the image.Its a simple img tag within a div.How do we go about it?
– SHIKHAR SINGH
Nov 22 '18 at 9:22
Not sure about image, why not just use canvas, and if you don't want to show canvas then just hide it using css tricks (like setting position fixed and moving the element out of screen using top and left properties)
– Osama Sheikh
Nov 22 '18 at 9:31
How do I get the actual image here so that I can upload it to s3 as well?
– SHIKHAR SINGH
Nov 22 '18 at 9:32
I have pasted the code that I am using currently.My aim is not to show it instantly some where but to store it as a n image and then use it elsewhere.I guess the canvas part just works for only time being because it isn't saved anywhere.Correct?
– SHIKHAR SINGH
Nov 22 '18 at 9:34
Check this thread stackoverflow.com/questions/12921052/…
– Osama Sheikh
Nov 22 '18 at 11:20
Thanks @Osama Sheikh. I have aone more doubt what if I don't have a canvas where I am displaying the image.Its a simple img tag within a div.How do we go about it?
– SHIKHAR SINGH
Nov 22 '18 at 9:22
Thanks @Osama Sheikh. I have aone more doubt what if I don't have a canvas where I am displaying the image.Its a simple img tag within a div.How do we go about it?
– SHIKHAR SINGH
Nov 22 '18 at 9:22
Not sure about image, why not just use canvas, and if you don't want to show canvas then just hide it using css tricks (like setting position fixed and moving the element out of screen using top and left properties)
– Osama Sheikh
Nov 22 '18 at 9:31
Not sure about image, why not just use canvas, and if you don't want to show canvas then just hide it using css tricks (like setting position fixed and moving the element out of screen using top and left properties)
– Osama Sheikh
Nov 22 '18 at 9:31
How do I get the actual image here so that I can upload it to s3 as well?
– SHIKHAR SINGH
Nov 22 '18 at 9:32
How do I get the actual image here so that I can upload it to s3 as well?
– SHIKHAR SINGH
Nov 22 '18 at 9:32
I have pasted the code that I am using currently.My aim is not to show it instantly some where but to store it as a n image and then use it elsewhere.I guess the canvas part just works for only time being because it isn't saved anywhere.Correct?
– SHIKHAR SINGH
Nov 22 '18 at 9:34
I have pasted the code that I am using currently.My aim is not to show it instantly some where but to store it as a n image and then use it elsewhere.I guess the canvas part just works for only time being because it isn't saved anywhere.Correct?
– SHIKHAR SINGH
Nov 22 '18 at 9:34
Check this thread stackoverflow.com/questions/12921052/…
– Osama Sheikh
Nov 22 '18 at 11:20
Check this thread stackoverflow.com/questions/12921052/…
– Osama Sheikh
Nov 22 '18 at 11:20
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53424884%2fconvert-pdf-to-image-before-uploading-it-to-s3%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
