如何从 html2Canvas 调整 DIV 中的画布输出大小？
Posted
技术标签:
【中文标题】如何从 html2Canvas 调整 DIV 中的画布输出大小？【英文标题】：How to resize canvas output in DIV from html2Canvas? 【发布时间】：2021-07-09 22:52:19 【问题描述】：以下代码使用 html2canvas 截取屏幕截图，并将 base64 字符串输出到输入字段，并将屏幕截图附加到画布（以下代码在 sn-p 中不起作用，但在网站上完全起作用）.. I尝试使用普通 HTML 和 CSS 在<div id="output"...> 上设置宽度和高度，并搜索以使用 javascript/jQuery 将输出图像缩放到屏幕上的较小尺寸，但没有任何效果，它会打印完整的宽度和高度无论我做什么都到屏幕上.. 有人可以指导我如何解决这个问题吗？
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】：我要做的是创建一个永久画布，然后我们在其中绘制。
在此处查看工作示例：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>
就像我们可以调整画布的大小以及我们正在拍摄的图像/屏幕截图一样，在这种情况下，我将图像制作为原始大小的一半
【讨论】：
嗨@Helder Sepulveda ..您的解决方案在“平面”HTML文件中使用时效果很好，但是在将它放在模态中时我无法让它工作（我的坏事是我没写）..我做了以下小提琴给你看：jsfiddle.net/skolbaek/2ywzvbrL/3..知道如何解决吗？ ..（注意！我不得不将 ctx 更改为 ctxScreen，因为它正在破坏我的一个页面上的图表 :-)） SORRY .. 它的工作原理应该如此，我没有看到你将html2canvas(document.body, 更改为 html2canvas(document.getElementById('input'), 并且当我将其更改回来时，它确实可以正常工作.. 这是一个工作小提琴： jsfiddle.net/skolbaek/2ywzvbrL/7 .. 谢谢！！ :-)以上是关于如何从 html2Canvas 调整 DIV 中的画布输出大小？的主要内容，如果未能解决你的问题，请参考以下文章