标签: html2canvas
使用html2canvas获取<body>的屏幕截图并将img存储为JS var
我试图让我的网站上的用户按下一个按钮来截取当前屏幕的截图(一切都在正文中).
根据我的研究,html2canvas似乎是一种可以实现这一目标的资源.
我的问题是文档没有提供示例代码,我正在努力控制所涉及的步骤.
http://html2canvas.hertzen.com/documentation.html
以下SO问题(如何使用html2canvas上传截图？)让我有点困惑.我只是想知道如何在这一点上获得一个图像.
从他的代码.
$(window).ready(function(){
('body').html2canvas();
var canvasRecord = new html2canvas(document.body).canvas;
//At this point does the .toDataURL method return a png?
});
在这一点上,我迷失在图像的位置,甚至是如何/何时创建它.我担心以后会把它发送到服务器.
任何信息赞赏.谢谢!(甚至需要html2canvas？)
推荐指数
解决办法
查看次数
HTML2Canvas 将 2 个捕获的画布合二为一
使用 HTML2Canvas 我试图捕获一个 googleMap（它工作正常）然后捕获#overlay它顶部的div（它允许人们在特定位置的 googleMap 上放置图像）（工作正常）。
该页面然后在页面上显示这两个canvas元素，然后我想再次捕获以将两个画布组合成一个图像，然后它们可以下载。
到目前为止我遇到的问题是，canvas当我尝试捕获我的#previewdiv时，HTML2Canvas 似乎没有拾取它创建的元素。
HTML：
<div id="mainPanel">
<div id="overlay">
</div>
<button class="download">Download as PDF</button>
<button onclick="startEdit();" class="edit_button">Start Editing</button>
<div id="map">
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map-canvas"></div>
</div>
<div id="preview">
</div>
</div>
HTML2Canvas JQuery：
$(".download").click(function() {
html2canvas($("#map"), {
logging: true,
proxy: "https://html2canvas.appspot.com/query",
onrendered: function(canvas) {
// var img = canvas.toDataURL("image/png");
$(canvas).css({"position" : "absolute", "z-index" : "999"});
document.getElementById("preview").appendChild(canvas);
html2canvas($("#overlay"), {
logging: true,
onrendered: function(canvas1) { …推荐指数
解决办法
查看次数
addHtml() 和跨域图像的 jsPDF 问题？
我正在使用 addHtml() 对我的网页进行“屏幕截图”并另存为 PDF。文字看起来不错，但是没有显示图像。我读到这可能是由于具有跨域图像。有没有解决的办法？
根据 html2canvas 文档，您可以使用“allowTaint”选项允许跨域图像：http ://html2canvas.hertzen.com/documentation.html#available-options
有没有办法将 html2canvas 选项集成到我的 jsPDF 函数中？到目前为止，我有：
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML($("#pageContent"), 0, 0, options, function () {
pdf.save('pageContent.pdf');
});
推荐指数
解决办法
查看次数
html2canvas - 错误 - 对象 HTMLCanvasElement
我需要使用javascript打印div..这个div的内容是生成的条形码..使用打印div元素的正常方法不起作用，因为条形码图像是由php文件生成的并且没有出现在打印页面中..所以我决定使用html2canvas方法来“渲染”div然后打印它..这是我的代码：
HTML：
<div id="source" onClick="capture()"> Some content and img of barcode </div>
JavaScript：
function capture() {
html2canvas( [ document.getElementById('source') ], {
onrendered: function (canvas) {
var mywindow = window.open('', 'my div', 'height=400,width=1000');
mywindow.document.write('<html><head><title>Print Div:</title>');
mywindow.document.write('</head><body >');
mywindow.document.write(canvas);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
return true;
}
});
}
mywindow 打开，但不包含我需要打印的 div 内容。我收到此错误： [object HTMLCanvasElement]
谢谢关注。。
推荐指数
解决办法
查看次数
html2canvas : 删除图片上方的空白区域
这让我发疯。我只是想 html2canvas 捕获图像
我有这个：
<div id="post" class="xx">Déposer</div>
<canvas width="500" height="200"></canvas>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
var canvas = document.querySelector("canvas");
html2canvas($("#post"), {canvas: canvas}).then(function(canvas) {
var img = canvas.toDataURL()
window.open(img);
});
</script>
结果是这张图：
该按钮出现在画布的底部，我只想保留该按钮，关于如何仅获取该按钮的任何想法？
如果我改变画布的大小，那么结果是这样的：
这是按钮的代码：
<div id="post">
<div style="float:left;background:url(g.png);width:21px;height:53px;"></div>
<div id="c" style="float:left;background:url(c.png) repeat-x;height:53px;font-family:arial;text-shadow: -1px -1px rgba(0, 0, 0, 0.3);padding: 12px 20px;font-size: 20px;line-height: 24px;color: rgb(255, 255, 255);text-align: center;vertical-align: middle;text-decoration: none;">Déposer</div>
<div style="float:left;background:url(d.png);width:21px;height:53px;"></div>
</div>
和文件：
这使得这个按钮（页面中没有额外的 css）：
推荐指数
解决办法
查看次数
html2canvas 只转换窗口的可见区域
我为此使用 html2canvas 插件。
我目前正在使用此代码。
html2canvas($("#chartDiv"), {
onrendered: function (canvas) {
var win = window.open();
win.document.write("<br><img src='" + canvas.toDataURL() + "'/>");
win.print();
}
});
当我将 div 转换为画布时，只有窗口的可见部分变成了画布。
我需要找到一个解决方案，如果 div 超过窗口的大小，我可以将 div 打印成多页。?
预先感谢
推荐指数
解决办法
查看次数
将包含 SVG 元素的 HTML 转换为图像文件
我正在尝试将 html 代码转换为图像文件（png、jpg 等）。但是，我尝试过的所有方法都不起作用，因为我的 HTML 代码具有这样的 SVG 元素：
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 150.000000 150.000000" preserveAspectRatio="xMidYMid meet" class="img30p icon-main-color">
<g transform="translate(0.000000,150.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M572 1430 c-233 -62 -408 -227 -490 -459 -24 -69 -27 -89 -27 -221 0 -132 3 -152 27 -221 39 -110 92 -194 172 -275 81 -80 165 -133 275 -172 69 -24 89 -27 221 -27 132 0 152 3 221 27 110 39 194 92 275 172 80 81 133 165 172 …推荐指数
解决办法
查看次数
Html2Canvas foreignObjectRendering 只渲染视点
我目前在使用 Html2Canvas 包将复杂的 DIV 元素渲染为 CANVAS 元素时遇到问题。问题是我想写到 CANVAS 的 DIV，有
overflow: auto
所以DIV大于屏幕比例。并在火上加油，上述所有内容都在 Angular 5 组件中，这意味着当我访问 .css 时 CSS 不可用ElementRef.nativeElement.innerHTML。
Encapsulation.None 在这里也不适合我。
HTML 到画布设置：
async: true,
logging: false,
backgroundColor: null,
allowTaint: true,
foreignObjectRendering: true,
removeContainer: true
结果：
注意图像周围的黑色空间，是屏幕比例，但无法渲染。
当我设置时：
foreignObjectRendering: false
我得到了非常满意的质量和我想要的尺寸。但图表如下所示：
提前致谢！这对我来说非常重要。我保证，如果我能解决这个问题，我将创建一个非常有用的 NPM 包，以在 Angular 2+ 中将元素导出为 PDF 文件
为方便起见，还附上 Html2Canvas 文档：http ://html2canvas.hertzen.com/configuration/
推荐指数
解决办法
查看次数
html2canvas灰色背景去除
如下图所示，我用 html2canvas 生成的画布有一个奇怪的深色背景。我已经将 body、html 和大多数 div 背景调整为白色，但没有任何效果。我可以使用一个选项来修改它吗？
谢谢
推荐指数
解决办法
查看次数
通过 PWA 的社交媒体分享图像
在我的 Nuxt PWA 中，我有一个函数可以使用这个包将 HTML 转换为 Canvas 。生成的图像采用 64 进制。现在我希望能够通过以下方式共享该图像：Whatsapp、Facebook、电子邮件、Instagram 等。我找到了几个软件包，但它们似乎都不支持仅共享文件 URL 和文本。
这是我的分享功能：
shareTicket(index) {
html2canvas(this.$refs['ticket-' + index][0], {
backgroundColor: '#efefef',
useCORS: true, // if the contents of screenshots, there are images, there may be a case of cross-domain, add this parameter, the cross-domain file to solve the problem
}).then((canvas) => {
let url = canvas.toDataURL('image/png') // finally produced image url
if (navigator.share) {
navigator.share({
title: 'Title to be shared',
text: 'Text to be shared',
url: this.url,
}) …推荐指数
解决办法
查看次数
标签 统计
html2canvas ×10
javascript ×9
html ×5
jquery ×4
canvas ×2
php ×2
angular ×1
image ×1
jspdf ×1
nuxt.js ×1
printing ×1
screenshot ×1
svg ×1
vue.js ×1
web-share ×1