Html2canvas only rendering parts of element visible in viewport
I have an element that doesn't have a set width or height that I'm taking a screenshot of. It's being pushed into local storage to be used as a background image in the next page. The problem is that if the document is zoomed in on, so is the image or if part of the element is cut off it only shows the visible part in the image. I figure the solution would be to set the width and height based on document size, but I'm not sure how to implement that because there's not a lot of documentation or threads on this.
The function for the capture is shown below:
function oncap() {
var crt = "none";
var canv = document.getElementById("allcontainer");
html2canvas(canv).then(function(canvas) {
window.localStorage.clear;
localStorage.setItem(canvasName, canvas.toDataURL("image/jpeg"));
window.location.href = 'FLOWCANVASTEST.html';
});
}
Edit: The solution ended up being on the display side rather than the capture itself. When I was pulling the image from local storage I was setting it as a background image; setting background-size to contain resolved the zooming issue for anyone else that gets this kinda thing.
javascript html html2canvas
asked Nov 15 '18 at 14:32
JeremyNeubaumJeremyNeubaum
185
add a comment |
I have an element that doesn't have a set width or height that I'm taking a screenshot of. It's being pushed into local storage to be used as a background image in the next page. The problem is that if the document is zoomed in on, so is the image or if part of the element is cut off it only shows the visible part in the image. I figure the solution would be to set the width and height based on document size, but I'm not sure how to implement that because there's not a lot of documentation or threads on this.
The function for the capture is shown below:
function oncap() {
var crt = "none";
var canv = document.getElementById("allcontainer");
html2canvas(canv).then(function(canvas) {
window.localStorage.clear;
localStorage.setItem(canvasName, canvas.toDataURL("image/jpeg"));
window.location.href = 'FLOWCANVASTEST.html';
});
}
Edit: The solution ended up being on the display side rather than the capture itself. When I was pulling the image from local storage I was setting it as a background image; setting background-size to contain resolved the zooming issue for anyone else that gets this kinda thing.
javascript html html2canvas
asked Nov 15 '18 at 14:32
JeremyNeubaumJeremyNeubaum
185
add a comment |
I have an element that doesn't have a set width or height that I'm taking a screenshot of. It's being pushed into local storage to be used as a background image in the next page. The problem is that if the document is zoomed in on, so is the image or if part of the element is cut off it only shows the visible part in the image. I figure the solution would be to set the width and height based on document size, but I'm not sure how to implement that because there's not a lot of documentation or threads on this.
The function for the capture is shown below:
function oncap() {
var crt = "none";
var canv = document.getElementById("allcontainer");
html2canvas(canv).then(function(canvas) {
window.localStorage.clear;
localStorage.setItem(canvasName, canvas.toDataURL("image/jpeg"));
window.location.href = 'FLOWCANVASTEST.html';
});
}
Edit: The solution ended up being on the display side rather than the capture itself. When I was pulling the image from local storage I was setting it as a background image; setting background-size to contain resolved the zooming issue for anyone else that gets this kinda thing.
javascript html html2canvas
asked Nov 15 '18 at 14:32
JeremyNeubaumJeremyNeubaum
185
I have an element that doesn't have a set width or height that I'm taking a screenshot of. It's being pushed into local storage to be used as a background image in the next page. The problem is that if the document is zoomed in on, so is the image or if part of the element is cut off it only shows the visible part in the image. I figure the solution would be to set the width and height based on document size, but I'm not sure how to implement that because there's not a lot of documentation or threads on this.
The function for the capture is shown below:
function oncap() {
var crt = "none";
var canv = document.getElementById("allcontainer");
html2canvas(canv).then(function(canvas) {
window.localStorage.clear;
localStorage.setItem(canvasName, canvas.toDataURL("image/jpeg"));
window.location.href = 'FLOWCANVASTEST.html';
});
}
Edit: The solution ended up being on the display side rather than the capture itself. When I was pulling the image from local storage I was setting it as a background image; setting background-size to contain resolved the zooming issue for anyone else that gets this kinda thing.
javascript html html2canvas
javascript html html2canvas
asked Nov 15 '18 at 14:32
JeremyNeubaumJeremyNeubaum
185
asked Nov 15 '18 at 14:32
JeremyNeubaumJeremyNeubaum
185
edited Nov 16 '18 at 15:27
JeremyNeubaum
asked Nov 15 '18 at 14:32
JeremyNeubaumJeremyNeubaum
185
asked Nov 15 '18 at 14:32
JeremyNeubaumJeremyNeubaum
185
asked Nov 15 '18 at 14:32
JeremyNeubaumJeremyNeubaum
185
185
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
So what you can do is before you draw your canvas you can read the size of the screen and then pass that to the canvas when it draw the image so your canvas init would look something like this:
initCanvas: function () {
canvas = document.getElementById('canvas-man');
c = canvas.getContext('2d');
canvas.width = document.getClientWidth;
canvas.height = document.getClientHeight;
return canvas;
},
Then you could pass the height and width to a put image function aswell
putImage: function (x,y) {
var img = document.createElement('img');
img.onload = function () {
c.drawImage(img, 0, 0, x, y);
}
img.src = 'images/products.jpg';
img.id = 'canvasImage';
}
answered Nov 15 '18 at 15:06
JaredJared
103
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%2f53321717%2fhtml2canvas-only-rendering-parts-of-element-visible-in-viewport%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
So what you can do is before you draw your canvas you can read the size of the screen and then pass that to the canvas when it draw the image so your canvas init would look something like this:
initCanvas: function () {
canvas = document.getElementById('canvas-man');
c = canvas.getContext('2d');
canvas.width = document.getClientWidth;
canvas.height = document.getClientHeight;
return canvas;
},
Then you could pass the height and width to a put image function aswell
putImage: function (x,y) {
var img = document.createElement('img');
img.onload = function () {
c.drawImage(img, 0, 0, x, y);
}
img.src = 'images/products.jpg';
img.id = 'canvasImage';
}
answered Nov 15 '18 at 15:06
JaredJared
103
add a comment |
So what you can do is before you draw your canvas you can read the size of the screen and then pass that to the canvas when it draw the image so your canvas init would look something like this:
initCanvas: function () {
canvas = document.getElementById('canvas-man');
c = canvas.getContext('2d');
canvas.width = document.getClientWidth;
canvas.height = document.getClientHeight;
return canvas;
},
Then you could pass the height and width to a put image function aswell
putImage: function (x,y) {
var img = document.createElement('img');
img.onload = function () {
c.drawImage(img, 0, 0, x, y);
}
img.src = 'images/products.jpg';
img.id = 'canvasImage';
}
answered Nov 15 '18 at 15:06
JaredJared
103
add a comment |
So what you can do is before you draw your canvas you can read the size of the screen and then pass that to the canvas when it draw the image so your canvas init would look something like this:
initCanvas: function () {
canvas = document.getElementById('canvas-man');
c = canvas.getContext('2d');
canvas.width = document.getClientWidth;
canvas.height = document.getClientHeight;
return canvas;
},
Then you could pass the height and width to a put image function aswell
putImage: function (x,y) {
var img = document.createElement('img');
img.onload = function () {
c.drawImage(img, 0, 0, x, y);
}
img.src = 'images/products.jpg';
img.id = 'canvasImage';
}
answered Nov 15 '18 at 15:06
JaredJared
103
So what you can do is before you draw your canvas you can read the size of the screen and then pass that to the canvas when it draw the image so your canvas init would look something like this:
initCanvas: function () {
canvas = document.getElementById('canvas-man');
c = canvas.getContext('2d');
canvas.width = document.getClientWidth;
canvas.height = document.getClientHeight;
return canvas;
},
Then you could pass the height and width to a put image function aswell
putImage: function (x,y) {
var img = document.createElement('img');
img.onload = function () {
c.drawImage(img, 0, 0, x, y);
}
img.src = 'images/products.jpg';
img.id = 'canvasImage';
}
answered Nov 15 '18 at 15:06
JaredJared
103
answered Nov 15 '18 at 15:06
JaredJared
103
answered Nov 15 '18 at 15:06
JaredJared
103
answered Nov 15 '18 at 15:06
JaredJared
103
103
add a comment |
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%2f53321717%2fhtml2canvas-only-rendering-parts-of-element-visible-in-viewport%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
