Below code is taking a screenshot using html2canvas, and outputs the base64 string to an input field, an also append the screenshot to the canvas (below code does not work in snippet, but works fully on website) .. I have tried setting width and height on <div id="output"...> using both normal HTML and CSS, and searched to find away to scale the output image, using JavaScript/jQuery, to a smaller size on screen but nothing works, it prints the full width and height to the screen no matter what I do .. can someone guide me in what to do to solve this?
function screenshot() {
html2canvas(document.body, {
background: '#fff'
}).then(function(canvas) {
document.body.appendChild(canvas);
// Get base64URL
var base64URL = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
console.log(base64URL);
document.getElementById('screenshot_input').value = base64URL;
document
.getElementById('output')
.appendChild(canvas);
});
}<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<button onclick="screenshot()">Take Screenshot</button
<br>
<h2>This is the Canvas</h2>
<h3>This is more Canvas</h3>
<br>
This is an input with Base64 output: <input name="screenshot" type='text' id='screenshot_input' />
<br>
<br>
Below here should be the screenshot (Not working in this Snippet but on webpage)
<div id="output" style="width: 50%; height: 50%;"></div>