标签: html2canvas
如何使用 HTML2Canvas 和 jspdf 添加图像后拆分页面
使用 html2canvas 和 JsPDF 将 HTML 转换为 pdf，并使用下面的代码生成代码，此代码会将 div 的完整 HTML 转换为单个图像，并将在 pdf 中显示为单个页面。
import * as jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
htmltoPDF()
{
// parentdiv is the html element which has to be converted to PDF
html2canvas(document.querySelector("#parentdiv")).then(canvas => {
var pdf = new jsPDF('p', 'pt', [canvas.width, canvas.height]);
var imgData = canvas.toDataURL("image/jpeg", 1.0);
pdf.addImage(imgData,0,0,canvas.width, canvas.height);
pdf.save('converteddoc.pdf');
});
}
为了分割代码，我使用下面的代码将页面分割成多个页面，但没有正确分割空间，因为我的 pdf 附加了小图像。
var imgWidth = 210;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var …推荐指数
解决办法
查看次数
html2canvas 向下移动文本
我正在尝试使用 html2canvas 将 a 转换<div>为图像。然而，有一个问题。<div>红色圆圈标记内的文本Figure 1没有填充或任何引入参数的偏移量。但当转换为图像时，文本上方会出现错误间隙，如 中的红色圆圈所示Figure 2。我用过<h3>（标有黑色背景）和一个<span>（标有绿色背景）。
Figure 1
Figure 2
为什么会这样？有办法解决这个问题吗？
推荐指数
解决办法
查看次数
如何使用html2canvas存储屏幕截图？
我试图使用html2canvas 0.34保存网站的屏幕截图.
但我不知道屏幕截图的保存位置,如何将屏幕截图存储到我的数据库中,或者用新窗口打开图像.
我的代码如下:
<script type="text/javascript">
$('div').html2canvas({
onrendered: function( canvas ) {
var img = canvas.toDataURL();
window.open(img);
}
});
</script>
</head>
<body>
<h1>Testing</h1>
<div>
<img src='http://25.media.tumblr.com/tumblr_mcc5k9YRli1rt6zh0o1_500.jpg'>
</div>
</body></html>
我想将图像的屏幕截图存储到数据库中或在另一个窗口中打开.
非常感谢你.
推荐指数
解决办法
查看次数
HTML2canvas和Canvas2image,下载的截图不会显示我的HTML图像
我一直在研究一个我想要转换成图像的HTML页面.
我一直在使用html2canvas和canvas2image脚本并在此处使用此代码http://jsfiddle.net/8ypxW/3/,这使我能够创建一个按钮,该按钮将截取屏幕并将我的HTML页面下载为图像.
我遇到的问题是我下载的截图图像显示的是我的文字而不是我的图像,即使它们来自同一个来源.我不确定我的HTML,HTML2canvas或canvas2image是否存在问题.
我的例子还没有,但我的代码如下:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="html2canvas.js"></script>
<script src="Canvas2Image.js"></script>
<div id="wrapper" style="background-color: white"; width="1000px" height="900px">
<img src="header.jpg" width= "900px">
tecno diagnostics
</div><!---- End Wrapper ---->
<br/>
<input type="button" id="btnSave" value="Save PNG"/>
<div id="img-out"></div>
<script type="text/javascript">
$(function() {
$("#btnSave").click(function() {
html2canvas($("#wrapper"), {
onrendered: function(canvas) {
// Convert and download as image
Canvas2Image.saveAsPNG(canvas);
$("#img-out").append(canvas);
// Clean up
//document.body.removeChild(canvas);
}
});
});
});
</script>
如果有人能帮助我或指出我正确的方向,将非常感激.
提前致谢
推荐指数
解决办法
查看次数
使用html2canvas打印页面
我正在使用构建网页打印功能html2canvas。
function printthispage() {
html2canvas($("#mydiv"), {
onrendered: function (canvas) {
var myImage = canvas.toDataURL("image/png");
var printWindow = window.open(myImage);
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}
});
}
但是，窗户立即打开和关闭。我试过删除close()，图像显示在新窗口上，但未触发打印功能。有什么不对？
推荐指数
解决办法
查看次数
捕获iframe的截图 - html2canvas无法正常工作
我有以下iframe:
<iframe name="content" src="" style="position: absolute; left: 0px; top: 28px;" allowtransparency="true" border="0" scrolling="yes" width="100%" frameborder="0" height="90%" id="MyFrame"></iframe>
我只是想捕捉iframe内容的截图,我已经尝试了html2canvas,但它似乎不起作用.我已经尝试将iframe放在div中但没有快乐.
我已经看到使用php实现这一目标的各种方法,但似乎没有什么是明确的.谁能摆脱任何光明？
推荐指数
解决办法
查看次数
Html2canvas在IE11中呈现错误布局的页面未打开devtools
我正在尝试通过html2canvasIE11 修复与将网页渲染到画布相关的错误.问题有点令人困惑:站点使用bootstrap 2.3网格实现负责任的布局.
当开发人员工具未打开时,它会像表/智能手机屏幕一样呈现.
但是,如果我按下F12(开发者工具打开,没有执行任何其他操作)并单击以呈现它按预期呈现的页面,用于宽屏幕.
删除了旧应用程序的过时链接.它不存在于指定的地址上.
这个问题在IE11中重现了onli并且一旦devtool被打开就消失了,所以我的事件不知道如何调试它.
推荐指数
解决办法
查看次数
HTML2Canvas图像被剪切
我使用Html2Canvas，然后使用jsPdf导出图像。
这是功能：
function exportPdf() {
content = $("#print");
var useWidth = content.prop('scrollWidth');
var useHeight = content.prop('scrollHeight');
debugger;
html2canvas((content), { width: useWidth, height: useHeight}).then(function (canvas) {
debugger;
var img = canvas.toDataURL("image/png");
var doc = new jsPDF({
unit:'px',
format:'a4'
});
debugger;
doc.addImage(img, 'JPEG', 0, 0);
doc.save('test.pdf');
});
}
我认为正在考虑视口，就像在做一个打印屏幕一样，当然，滚动下方的任何内容都不会考虑。
有任何想法吗？
推荐指数
解决办法
查看次数
HTML2Canvas创建多个div
我正在尝试使用jsPDF和HTML2Canvas创建PDF。我有多个要插入PDF的DIV。如果我尝试将所有DIV放入容器中并渲染一次，那么它只会将第一页高度放入PDF中。无法弄清楚如何呈现多个div并将其粘贴在同一PDF中，从而使其一页一页地前进。
JAVASCRIPT
function genPDF() {
html2canvas(document.getElementById("container"), {
onrendered: function (canvas) {
var img = canvas.toDataURL();
var doc = new jsPDF();
doc.addImage(img, 'PNG');
doc.addPage();
doc.save('test.pdf');
}
});
}
的HTML
<div id="container">
<div class="divEl" id="div1">Hi <img src="img1.JPG"> </div>
<div class="divEl" id="div2">Why <img src="img2.PNG"> </div>
</div>
<button onClick="genPDF()"> Click Me </button>
推荐指数
解决办法
查看次数
jsPDF&html2canvas没有将图像写入pdf
使用jspdf和html2canvas在表配置器上拍摄用户选择配置的快照(选择顶部/侧面/层压板颜色).它通过使用透明png改变每个图像的来源来实现.
我在将图像插入pdf时遇到问题.我可以将它附加到文档中,没有任何问题,并将文本和其他图像写入pdf而不会出现问题.我担心我的形象太大了.生成的base64输出很大.
我把它写到控制台:
var doc = new jsPDF('p', 'pt','a4',true);
doc.setFontSize(16);
doc.setTextColor(80, 77, 78);
doc.text(15, 2, 'should be an image under here');
html2canvas($("#prod"), {
useCORS : true,
onrendered: function(canvas) {
var imgData = canvas.toDataURL('image/jpeg');
doc.addImage(imgData, 'JPEG', 15, 0, 34, 37);
console.log(imgData);
$('#prod').append(canvas);
}
});
doc.save('Spec_Sheet.pdf');
https://jsfiddle.net/x3x0e6ws/51/
所有图像都来自本地服务器.我在每个元素上都有一个最小高度,我甚至尝试在div中投掷文本以强制高度.
我该如何解决这个问题？
谢谢,
推荐指数
解决办法
查看次数
标签 统计
html2canvas ×10
javascript ×6
html ×4
jspdf ×4
angular ×1
iframe ×1
jquery ×1
php ×1
tailwind-css ×1