Mixing
HTML2Canvas not rendering image in Safari browser
0
I read other answers which told that images will render when we host it in the server. In my case I have the images coming dynamically from server. Its working perfect in Chrome and Firefox but not in Safari. Here is my code using JsPDF and HTML2Canvas:
$(document).on('click', '#download_pdf', function(){
$('.hide-pdf').hide();
html2canvas(document.body,{
useCORS: true,
logging:true,
onrendered:function(canvas){
$('.loading-wrap').hide();
var img=canvas.toDataURL("image/png");
var imgData = canvas.toDataURL('image/png');
var imgWidth = 210;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
var doc = new jsPDF('p', 'mm');
var position = 0;
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
doc.save('bulldata.pdf');
}
}
);
$('.hide-pdf').show();
}
);
Can anyone help me to check why images are not rendering only in Safari browser.
javascript jquery safari jspdf html2canvas
asked Nov 19 '18 at 12:32
AKNair
401312
add a comment |
0
I read other answers which told that images will render when we host it in the server. In my case I have the images coming dynamically from server. Its working perfect in Chrome and Firefox but not in Safari. Here is my code using JsPDF and HTML2Canvas:
$(document).on('click', '#download_pdf', function(){
$('.hide-pdf').hide();
html2canvas(document.body,{
useCORS: true,
logging:true,
onrendered:function(canvas){
$('.loading-wrap').hide();
var img=canvas.toDataURL("image/png");
var imgData = canvas.toDataURL('image/png');
var imgWidth = 210;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
var doc = new jsPDF('p', 'mm');
var position = 0;
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
doc.save('bulldata.pdf');
}
}
);
$('.hide-pdf').show();
}
);
Can anyone help me to check why images are not rendering only in Safari browser.
javascript jquery safari jspdf html2canvas
asked Nov 19 '18 at 12:32
AKNair
401312
You might want to define exactly what "not working" means...
– Steve
Nov 19 '18 at 12:34
Thanks for your response Steve. I have already mentioned in my question title that images are not rendering in Safari browser and also mentioned about the same in details. Will edit the last line also, if its confusing.
– AKNair
Nov 19 '18 at 12:37
What I meant was - are you getting a blank/black image for example, no image at all. Would it be helpful for people to see a version of the correctly rendered image in a browser versus how it appears in safari. Are you getting errors from the console?
– Steve
Nov 19 '18 at 12:42
Please check the screenshot for logs: i.imgur.com/PAhmh0t.png , Chrome rendering correct pdf : i.imgur.com/6YP7Sln.png, safari missing the image : i.imgur.com/l1nHe29.png
– AKNair
Nov 19 '18 at 13:09
add a comment |
0
0
0
I read other answers which told that images will render when we host it in the server. In my case I have the images coming dynamically from server. Its working perfect in Chrome and Firefox but not in Safari. Here is my code using JsPDF and HTML2Canvas:
$(document).on('click', '#download_pdf', function(){
$('.hide-pdf').hide();
html2canvas(document.body,{
useCORS: true,
logging:true,
onrendered:function(canvas){
$('.loading-wrap').hide();
var img=canvas.toDataURL("image/png");
var imgData = canvas.toDataURL('image/png');
var imgWidth = 210;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
var doc = new jsPDF('p', 'mm');
var position = 0;
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
doc.save('bulldata.pdf');
}
}
);
$('.hide-pdf').show();
}
);
Can anyone help me to check why images are not rendering only in Safari browser.
javascript jquery safari jspdf html2canvas
asked Nov 19 '18 at 12:32
AKNair
401312
I read other answers which told that images will render when we host it in the server. In my case I have the images coming dynamically from server. Its working perfect in Chrome and Firefox but not in Safari. Here is my code using JsPDF and HTML2Canvas:
$(document).on('click', '#download_pdf', function(){
$('.hide-pdf').hide();
html2canvas(document.body,{
useCORS: true,
logging:true,
onrendered:function(canvas){
$('.loading-wrap').hide();
var img=canvas.toDataURL("image/png");
var imgData = canvas.toDataURL('image/png');
var imgWidth = 210;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
var doc = new jsPDF('p', 'mm');
var position = 0;
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
doc.save('bulldata.pdf');
}
}
);
$('.hide-pdf').show();
}
);
Can anyone help me to check why images are not rendering only in Safari browser.
javascript jquery safari jspdf html2canvas
javascript jquery safari jspdf html2canvas
asked Nov 19 '18 at 12:32
AKNair
401312
asked Nov 19 '18 at 12:32
AKNair
401312
edited Nov 19 '18 at 12:38
asked Nov 19 '18 at 12:32
AKNair
401312
asked Nov 19 '18 at 12:32
AKNair
401312
asked Nov 19 '18 at 12:32
AKNair
401312
401312
You might want to define exactly what "not working" means...
– Steve
Nov 19 '18 at 12:34
Thanks for your response Steve. I have already mentioned in my question title that images are not rendering in Safari browser and also mentioned about the same in details. Will edit the last line also, if its confusing.
– AKNair
Nov 19 '18 at 12:37
What I meant was - are you getting a blank/black image for example, no image at all. Would it be helpful for people to see a version of the correctly rendered image in a browser versus how it appears in safari. Are you getting errors from the console?
– Steve
Nov 19 '18 at 12:42
Please check the screenshot for logs: i.imgur.com/PAhmh0t.png , Chrome rendering correct pdf : i.imgur.com/6YP7Sln.png, safari missing the image : i.imgur.com/l1nHe29.png
– AKNair
Nov 19 '18 at 13:09
add a comment |
You might want to define exactly what "not working" means...
– Steve
Nov 19 '18 at 12:34
Thanks for your response Steve. I have already mentioned in my question title that images are not rendering in Safari browser and also mentioned about the same in details. Will edit the last line also, if its confusing.
– AKNair
Nov 19 '18 at 12:37
What I meant was - are you getting a blank/black image for example, no image at all. Would it be helpful for people to see a version of the correctly rendered image in a browser versus how it appears in safari. Are you getting errors from the console?
– Steve
Nov 19 '18 at 12:42
Please check the screenshot for logs: i.imgur.com/PAhmh0t.png , Chrome rendering correct pdf : i.imgur.com/6YP7Sln.png, safari missing the image : i.imgur.com/l1nHe29.png
– AKNair
Nov 19 '18 at 13:09
You might want to define exactly what "not working" means...
– Steve
Nov 19 '18 at 12:34
You might want to define exactly what "not working" means...
– Steve
Nov 19 '18 at 12:34
Thanks for your response Steve. I have already mentioned in my question title that images are not rendering in Safari browser and also mentioned about the same in details. Will edit the last line also, if its confusing.
– AKNair
Nov 19 '18 at 12:37
Thanks for your response Steve. I have already mentioned in my question title that images are not rendering in Safari browser and also mentioned about the same in details. Will edit the last line also, if its confusing.
– AKNair
Nov 19 '18 at 12:37
What I meant was - are you getting a blank/black image for example, no image at all. Would it be helpful for people to see a version of the correctly rendered image in a browser versus how it appears in safari. Are you getting errors from the console?
– Steve
Nov 19 '18 at 12:42
What I meant was - are you getting a blank/black image for example, no image at all. Would it be helpful for people to see a version of the correctly rendered image in a browser versus how it appears in safari. Are you getting errors from the console?
– Steve
Nov 19 '18 at 12:42
Please check the screenshot for logs: i.imgur.com/PAhmh0t.png , Chrome rendering correct pdf : i.imgur.com/6YP7Sln.png, safari missing the image : i.imgur.com/l1nHe29.png
– AKNair
Nov 19 '18 at 13:09
Please check the screenshot for logs: i.imgur.com/PAhmh0t.png , Chrome rendering correct pdf : i.imgur.com/6YP7Sln.png, safari missing the image : i.imgur.com/l1nHe29.png
– AKNair
Nov 19 '18 at 13:09
add a comment |
active
oldest
votes
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%2f53374756%2fhtml2canvas-not-rendering-image-in-safari-browser%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53374756%2fhtml2canvas-not-rendering-image-in-safari-browser%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
You might want to define exactly what "not working" means...
– Steve
Nov 19 '18 at 12:34
Thanks for your response Steve. I have already mentioned in my question title that images are not rendering in Safari browser and also mentioned about the same in details. Will edit the last line also, if its confusing.
– AKNair
Nov 19 '18 at 12:37
What I meant was - are you getting a blank/black image for example, no image at all. Would it be helpful for people to see a version of the correctly rendered image in a browser versus how it appears in safari. Are you getting errors from the console?
– Steve
Nov 19 '18 at 12:42
Please check the screenshot for logs: i.imgur.com/PAhmh0t.png , Chrome rendering correct pdf : i.imgur.com/6YP7Sln.png, safari missing the image : i.imgur.com/l1nHe29.png
– AKNair
Nov 19 '18 at 13:09