HTML5 canvas to PDF
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
14
I am working in HTML5 and using canvas as a designing tool. However, I want to save my canvas in a jpeg file with a default of image/png and I want to show the preview of my canvas in a PDF.
javascript html html5 html5-canvas
edited Nov 22 '18 at 8:42
serakfalcon
3,09411631
asked Oct 31 '13 at 5:55
justinjustin
71116
add a comment |
14
I am working in HTML5 and using canvas as a designing tool. However, I want to save my canvas in a jpeg file with a default of image/png and I want to show the preview of my canvas in a PDF.
javascript html html5 html5-canvas
edited Nov 22 '18 at 8:42
serakfalcon
3,09411631
asked Oct 31 '13 at 5:55
justinjustin
71116
Possible duplicate of stackoverflow.com/questions/13201679/…
– Paul Draper
Oct 31 '13 at 5:58
I have gone through that link which @paul thinks give the solution for my query. But I have gone through the entire solution for that question but did nt get a feasible solution.Hence I am asking here to get a particular and working solution.
– justin
Oct 31 '13 at 6:05
add a comment |
14
14
14
11
I am working in HTML5 and using canvas as a designing tool. However, I want to save my canvas in a jpeg file with a default of image/png and I want to show the preview of my canvas in a PDF.
javascript html html5 html5-canvas
edited Nov 22 '18 at 8:42
serakfalcon
3,09411631
asked Oct 31 '13 at 5:55
justinjustin
71116
I am working in HTML5 and using canvas as a designing tool. However, I want to save my canvas in a jpeg file with a default of image/png and I want to show the preview of my canvas in a PDF.
javascript html html5 html5-canvas
javascript html html5 html5-canvas
edited Nov 22 '18 at 8:42
serakfalcon
3,09411631
asked Oct 31 '13 at 5:55
justinjustin
71116
edited Nov 22 '18 at 8:42
serakfalcon
3,09411631
asked Oct 31 '13 at 5:55
justinjustin
71116
edited Nov 22 '18 at 8:42
serakfalcon
3,09411631
edited Nov 22 '18 at 8:42
serakfalcon
3,09411631
edited Nov 22 '18 at 8:42
serakfalcon
3,09411631
3,09411631
asked Oct 31 '13 at 5:55
justinjustin
71116
asked Oct 31 '13 at 5:55
justinjustin
71116
asked Oct 31 '13 at 5:55
justinjustin
71116
71116
Possible duplicate of stackoverflow.com/questions/13201679/…
– Paul Draper
Oct 31 '13 at 5:58
I have gone through that link which @paul thinks give the solution for my query. But I have gone through the entire solution for that question but did nt get a feasible solution.Hence I am asking here to get a particular and working solution.
– justin
Oct 31 '13 at 6:05
add a comment |
Possible duplicate of stackoverflow.com/questions/13201679/…
– Paul Draper
Oct 31 '13 at 5:58
I have gone through that link which @paul thinks give the solution for my query. But I have gone through the entire solution for that question but did nt get a feasible solution.Hence I am asking here to get a particular and working solution.
– justin
Oct 31 '13 at 6:05
Possible duplicate of stackoverflow.com/questions/13201679/…
– Paul Draper
Oct 31 '13 at 5:58
Possible duplicate of stackoverflow.com/questions/13201679/…
– Paul Draper
Oct 31 '13 at 5:58
I have gone through that link which @paul thinks give the solution for my query. But I have gone through the entire solution for that question but did nt get a feasible solution.Hence I am asking here to get a particular and working solution.
– justin
Oct 31 '13 at 6:05
I have gone through that link which @paul thinks give the solution for my query. But I have gone through the entire solution for that question but did nt get a feasible solution.Hence I am asking here to get a particular and working solution.
– justin
Oct 31 '13 at 6:05
add a comment |
1 Answer
1
active
oldest
votes
22
A good approach is to use a combination of jspdf.js and html2canvas.
<canvas id="canvas" width="480" height="320"></canvas>
<button id="download">Download Pdf</button>
html2canvas($("#canvas"), { onrendered: function(canvas) {
var imgData = canvas.toDataURL('image/png');
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('sample-file.pdf');
}
});
jsfiddle: http://jsfiddle.net/p4s5k59s/1222/
Tested in Google Chrome 38, IE11 and Firefox 34.
For Safari you might need to change the image format from PNG to JPEG.
edited Nov 22 '18 at 8:44
oikonomopo
2,56463661
answered Dec 9 '14 at 1:57
Razan PaulRazan Paul
9,36915954
1
This is really good way for complex css sections
– cycopepe
Aug 24 '15 at 23:05
1
@Blizzard, that is the perfect example. Simple, actuated by a button, easy to understand. (Why isn't that top of the examples at github for jspdf?) Easily displayed in jsfiddle. Many thanks.
– zipzit
Sep 13 '15 at 10:11
This library doesn't seem to be updated any more, this crashes on my browser, and there are multiple open issues regarding crashes.
– Ilan lewin
Feb 16 '16 at 10:10
1
Your Fiddle is not working
– Monkey
Aug 8 '16 at 10:05
1
Man (@Blizzard ) , I am using html2Canvas to Capture my screen , and been looking for download the canvas into pdf , I appreciate your way ( Same mind : )
– khaled Dehia
Jan 2 '17 at 0:14
|
show 1 more 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
});
}
});
draft saved
draft discarded
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%2f19699366%2fhtml5-canvas-to-pdf%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
22
A good approach is to use a combination of jspdf.js and html2canvas.
<canvas id="canvas" width="480" height="320"></canvas>
<button id="download">Download Pdf</button>
html2canvas($("#canvas"), { onrendered: function(canvas) {
var imgData = canvas.toDataURL('image/png');
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('sample-file.pdf');
}
});
jsfiddle: http://jsfiddle.net/p4s5k59s/1222/
Tested in Google Chrome 38, IE11 and Firefox 34.
For Safari you might need to change the image format from PNG to JPEG.
edited Nov 22 '18 at 8:44
oikonomopo
2,56463661
answered Dec 9 '14 at 1:57
Razan PaulRazan Paul
9,36915954
1
This is really good way for complex css sections
– cycopepe
Aug 24 '15 at 23:05
1
@Blizzard, that is the perfect example. Simple, actuated by a button, easy to understand. (Why isn't that top of the examples at github for jspdf?) Easily displayed in jsfiddle. Many thanks.
– zipzit
Sep 13 '15 at 10:11
This library doesn't seem to be updated any more, this crashes on my browser, and there are multiple open issues regarding crashes.
– Ilan lewin
Feb 16 '16 at 10:10
1
Your Fiddle is not working
– Monkey
Aug 8 '16 at 10:05
1
Man (@Blizzard ) , I am using html2Canvas to Capture my screen , and been looking for download the canvas into pdf , I appreciate your way ( Same mind : )
– khaled Dehia
Jan 2 '17 at 0:14
|
show 1 more comment
22
A good approach is to use a combination of jspdf.js and html2canvas.
<canvas id="canvas" width="480" height="320"></canvas>
<button id="download">Download Pdf</button>
html2canvas($("#canvas"), { onrendered: function(canvas) {
var imgData = canvas.toDataURL('image/png');
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('sample-file.pdf');
}
});
jsfiddle: http://jsfiddle.net/p4s5k59s/1222/
Tested in Google Chrome 38, IE11 and Firefox 34.
For Safari you might need to change the image format from PNG to JPEG.
edited Nov 22 '18 at 8:44
oikonomopo
2,56463661
answered Dec 9 '14 at 1:57
Razan PaulRazan Paul
9,36915954
1
This is really good way for complex css sections
– cycopepe
Aug 24 '15 at 23:05
1
@Blizzard, that is the perfect example. Simple, actuated by a button, easy to understand. (Why isn't that top of the examples at github for jspdf?) Easily displayed in jsfiddle. Many thanks.
– zipzit
Sep 13 '15 at 10:11
This library doesn't seem to be updated any more, this crashes on my browser, and there are multiple open issues regarding crashes.
– Ilan lewin
Feb 16 '16 at 10:10
1
Your Fiddle is not working
– Monkey
Aug 8 '16 at 10:05
1
Man (@Blizzard ) , I am using html2Canvas to Capture my screen , and been looking for download the canvas into pdf , I appreciate your way ( Same mind : )
– khaled Dehia
Jan 2 '17 at 0:14
|
show 1 more comment
22
22
22
A good approach is to use a combination of jspdf.js and html2canvas.
<canvas id="canvas" width="480" height="320"></canvas>
<button id="download">Download Pdf</button>
html2canvas($("#canvas"), { onrendered: function(canvas) {
var imgData = canvas.toDataURL('image/png');
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('sample-file.pdf');
}
});
jsfiddle: http://jsfiddle.net/p4s5k59s/1222/
Tested in Google Chrome 38, IE11 and Firefox 34.
For Safari you might need to change the image format from PNG to JPEG.
edited Nov 22 '18 at 8:44
oikonomopo
2,56463661
answered Dec 9 '14 at 1:57
Razan PaulRazan Paul
9,36915954
A good approach is to use a combination of jspdf.js and html2canvas.
<canvas id="canvas" width="480" height="320"></canvas>
<button id="download">Download Pdf</button>
html2canvas($("#canvas"), { onrendered: function(canvas) {
var imgData = canvas.toDataURL('image/png');
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('sample-file.pdf');
}
});
jsfiddle: http://jsfiddle.net/p4s5k59s/1222/
Tested in Google Chrome 38, IE11 and Firefox 34.
For Safari you might need to change the image format from PNG to JPEG.
edited Nov 22 '18 at 8:44
oikonomopo
2,56463661
answered Dec 9 '14 at 1:57
Razan PaulRazan Paul
9,36915954
edited Nov 22 '18 at 8:44
oikonomopo
2,56463661
edited Nov 22 '18 at 8:44
oikonomopo
2,56463661
edited Nov 22 '18 at 8:44
oikonomopo
2,56463661
2,56463661
answered Dec 9 '14 at 1:57
Razan PaulRazan Paul
9,36915954
answered Dec 9 '14 at 1:57
Razan PaulRazan Paul
9,36915954
answered Dec 9 '14 at 1:57
Razan PaulRazan Paul
9,36915954
9,36915954
1
This is really good way for complex css sections
– cycopepe
Aug 24 '15 at 23:05
1
@Blizzard, that is the perfect example. Simple, actuated by a button, easy to understand. (Why isn't that top of the examples at github for jspdf?) Easily displayed in jsfiddle. Many thanks.
– zipzit
Sep 13 '15 at 10:11
This library doesn't seem to be updated any more, this crashes on my browser, and there are multiple open issues regarding crashes.
– Ilan lewin
Feb 16 '16 at 10:10
1
Your Fiddle is not working
– Monkey
Aug 8 '16 at 10:05
1
Man (@Blizzard ) , I am using html2Canvas to Capture my screen , and been looking for download the canvas into pdf , I appreciate your way ( Same mind : )
– khaled Dehia
Jan 2 '17 at 0:14
|
show 1 more comment
1
This is really good way for complex css sections
– cycopepe
Aug 24 '15 at 23:05
1
@Blizzard, that is the perfect example. Simple, actuated by a button, easy to understand. (Why isn't that top of the examples at github for jspdf?) Easily displayed in jsfiddle. Many thanks.
– zipzit
Sep 13 '15 at 10:11
This library doesn't seem to be updated any more, this crashes on my browser, and there are multiple open issues regarding crashes.
– Ilan lewin
Feb 16 '16 at 10:10
1
Your Fiddle is not working
– Monkey
Aug 8 '16 at 10:05
1
Man (@Blizzard ) , I am using html2Canvas to Capture my screen , and been looking for download the canvas into pdf , I appreciate your way ( Same mind : )
– khaled Dehia
Jan 2 '17 at 0:14
1
1
This is really good way for complex css sections
– cycopepe
Aug 24 '15 at 23:05
This is really good way for complex css sections
– cycopepe
Aug 24 '15 at 23:05
1
1
@Blizzard, that is the perfect example. Simple, actuated by a button, easy to understand. (Why isn't that top of the examples at github for jspdf?) Easily displayed in jsfiddle. Many thanks.
– zipzit
Sep 13 '15 at 10:11
@Blizzard, that is the perfect example. Simple, actuated by a button, easy to understand. (Why isn't that top of the examples at github for jspdf?) Easily displayed in jsfiddle. Many thanks.
– zipzit
Sep 13 '15 at 10:11
This library doesn't seem to be updated any more, this crashes on my browser, and there are multiple open issues regarding crashes.
– Ilan lewin
Feb 16 '16 at 10:10
This library doesn't seem to be updated any more, this crashes on my browser, and there are multiple open issues regarding crashes.
– Ilan lewin
Feb 16 '16 at 10:10
1
1
Your Fiddle is not working
– Monkey
Aug 8 '16 at 10:05
Your Fiddle is not working
– Monkey
Aug 8 '16 at 10:05
1
1
Man (@Blizzard ) , I am using html2Canvas to Capture my screen , and been looking for download the canvas into pdf , I appreciate your way ( Same mind : )
– khaled Dehia
Jan 2 '17 at 0:14
Man (@Blizzard ) , I am using html2Canvas to Capture my screen , and been looking for download the canvas into pdf , I appreciate your way ( Same mind : )
– khaled Dehia
Jan 2 '17 at 0:14
|
show 1 more comment
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f19699366%2fhtml5-canvas-to-pdf%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
Possible duplicate of stackoverflow.com/questions/13201679/…
– Paul Draper
Oct 31 '13 at 5:58
I have gone through that link which @paul thinks give the solution for my query. But I have gone through the entire solution for that question but did nt get a feasible solution.Hence I am asking here to get a particular and working solution.
– justin
Oct 31 '13 at 6:05