How to resize canvas output in DIV from html2Canvas?
Question
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>
1 answers
solution1
0 ACCPTED 2021-04-14 23:05:54
What I would do is create a permanent canvas then we draw into it.
See working sample here:
https://raw.githack.com/heldersepu/hs-scripts/master/HTML/screenshot.html
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<body>
<button onclick="screenshot()">Take Screenshot</button>
<div id='input'>
<h2>This is a test</h2>
<h3>Hello World</h3> <br>
Base64 output:
<input name="screenshot" type='text' id='screenshot_input' /><br><br>
</div>
<div id="output">
<canvas id=c width=100 height=100 style="border:1px solid #000;"></canvas>
</div>
</body>
<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
function screenshot() {
html2canvas(document.getElementById('input'), {
background: '#fff'
}).then(function(h2c) {
var base64URL = h2c.toDataURL('image/png').replace('image/png', 'image/octet-stream');
document.getElementById('screenshot_input').value = base64URL;
console.log(base64URL);
canvas.width = h2c.width/2
canvas.height = h2c.height/2
ctx.drawImage(h2c, 0, 0, h2c.width/2, h2c.height/2);
});
}
</script>
Like that we can resize the canvas and also the image/screenshot we are taking, on this case I'm making the image half the size of the original
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.