标签: html2canvas
html2canvas 创建宽度和高度为零的画布？
我正在尝试使用 html2canvas 执行它在锡上所说的操作，但它不断创建宽度和高度为零的画布。我正在这样做：
var HTMLString = '<p>hello world</p>';
var HTMLStringContainer = document.createElement('div');
HTMLStringContainer.innerHTML = HTMLString;
console.log(HTMLStringContainer);
html2canvas(HTMLStringContainer,{
onrendered:function(newCanvas){
document.getElementById("image").appendChild(newCanvas);
}
});
当我打印时，HTMLStringContainer它显示<div><p>hello world</p></div>，这看起来是正确的。
片段
var HTMLString = '<p>hello world</p>';
var HTMLStringContainer = document.createElement('div');
HTMLStringContainer.innerHTML = HTMLString;
console.log(HTMLStringContainer);
html2canvas(HTMLStringContainer,{
onrendered:function(newCanvas){
document.getElementById("image").appendChild(newCanvas);
}
});
var HTMLString = '<p>hello world</p>';
var HTMLStringContainer = document.createElement('div');
HTMLStringContainer.innerHTML = HTMLString;
console.log(HTMLStringContainer);
html2canvas(HTMLStringContainer, {
onrendered: function(newCanvas) {
document.getElementById("image").appendChild(newCanvas);
}
});另外，jsfiddle： http: //jsfiddle.net/4077wxLj/
推荐指数
解决办法
查看次数
html2canvas 代码在 IE 11 上不起作用
我希望使用 html2canvas 库制作一个 div 的图像并将其放入另一个 div 中。到目前为止，它在 Safari、Chrome 和 Firefox 中运行得很好，但在 IE 中则不然（11 是我现在唯一关心的版本）。
我正在使用来自另一个 Stackoverflow 问题的 jsfiddle 中的代码来应用它：
var aaaDiv=document.getElementById('aaa');
var ttDiv=document.getElementById('tt');
html2canvas(aaaDiv).then(function(canvas) {
// assign id:avatarCanvas to canvas
canvas.id='avatarCanvas';
// append canvas to ttDiv
ttDiv.appendChild(canvas);
});
https://jsfiddle.net/m1erickson/wtchz972/
我听说 IE 不喜欢“appendChild”，但我不知道如何从那里开始。
javascript internet-explorer html2canvas internet-explorer-11
推荐指数
解决办法
查看次数
PDF 不显示图像：html2pdf 库
我使用 Angular 5 和 html2pdf 库来帮助创建 pdf 文件。 https://github.com/eKoopmans/html2pdf
这用于我的 Angular 方法。
var element = document.getElementById('document');
var opt = {
margin: [10, 0, 10, 0],
filename: `document.pdf`,
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2, useCORS: true },
jsPDF: { unit: 'mm', format: 'letter', orientation: 'portrait' }
};
html2pdf().from(element).set(opt).save();
导出 pdf 后，我无法从网上看到任何图像，但它显示了本地存储的图像。这是在线图像的示例。 https://s3.amazonaws.com/images.anterasoftware.com/5b6c5886622d5Screen_Shot_2018-06-27_at_10.37.03_AM.png
请帮助，问候。
推荐指数
解决办法
查看次数
离子 4 html2canvas
我正在尝试在 Ionic 4 应用程序中捕获 HTML 图像。我尝试使用html2canvas，但是，它不起作用并在控制台中显示此输出：
这是我的代码：
var element = document.getElementById('capture');
html2canvas(element).then(canvas => {
var imgData = canvas.toDataURL("image/png");
this.socialSharing.share(null, null, imgData);
});
推荐指数
解决办法
查看次数
html2canvas/jsPDF - 将 html 转换为 pdf 时不显示图像
我正在寻找将一些简单的 HTML 转换为 PDF 的方法。似乎最简单的方法是使用“html2canvas”js 库首先将 html 转换为 canvas，然后使用 jsPDF 创建 PDF。
我遇到的问题是，我的 HTML 中有背景图像和内嵌图像，但转换后两者都没有显示在 PDF 中。我在这里创建了一个 Codepen：https://codepen.io/adamboother/pen/NWGeqom
这是我的 js 进行转换：
function convertToPdf()
{
html2canvas(document.querySelector('#certificate')).then(canvas => {
let pdf = new jsPDF('landscape', 'mm', 'a4');
pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, pdf.internal.pageSize.width, pdf.internal.pageSize.height);
pdf.save('certificate.pdf');
});
}
有没有人找到解决这个问题的方法？
推荐指数
解决办法
查看次数
CodeSandBox：角度：错误类型错误：html2canvas_1.default 不是函数
我的项目应该将一个简单的 html 表格转换为 PDF。但我在CodeSandbox上收到此错误：
ERROR TypeError: html2canvas_1.default is not a function
at AppComponent.downloadPDF (https://3d3bh.csb.app/src/app/app.component.ts:66:30)
at new AppComponent (https://3d3bh.csb.app/src/app/app.component.ts:62:14)
这是app.component.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<p>
The .table class adds basic styling (light padding and only horizontal
dividers) to a table:
</p>
<table class="table" id="purchaseTable">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr> …推荐指数
解决办法
查看次数
jsPDF - 多个页面 - 渲染 HTML 始终转到第 1 页
我们使用 jsPDF 2.5.1 渲染多页 PDF。
我们使用 html 函数将各种 DOM 元素渲染到每个页面，这在 jsPDF 1.x 版本中有效
但是现在每次我们调用 .html() - 它都会将其放在第一页上，而不是新添加的页面上，这是代码
if (pdfPageIndex < numPdfPages) {
if (pdfPageIndex > 0) {
pdf.addPage();
}
pdf.html(
document.getElementById('pdfPage_' + pdfPageIndex),
{
html2canvas: {
logging: true
},
callback: function(){ return pdfCallback($scope)}});
推荐指数
解决办法
查看次数
Html到Canvas到Base64到PDF
所以我正在尝试找出一种完全在客户端将html转换为pdf的方法,在某处我读到你可以在客户端将base64转换为pdf,从那里我记得你可以从html创建一个画布和Canvas中的Base 64.所以我把一切都搞砸了,直到将base64转换为pdf.我似乎无法让最后一部分工作.这是我的代码
var element = document.getElementById('canvas1');
console.log(element);
if (typeof(element) == 'undefined' || element == null)
{
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
$('canvas').attr( 'id', 'canvas1' );
}
});
}
setTimeout(function() {
canvas = document.getElementById("canvas1");
var jpegUrl = canvas.toDataURL("image/jpeg");
var pngUrl = canvas.toDataURL(); // PNG is the default
console.log("jp"+jpegUrl);
console.log("png"+pngUrl);
window.open("data:application/pdf;base64," + pngUrl);
console.log('new');
},500);
我正在使用html2canvas库将html转换为canvas并将其附加到body,到目前为止,它可以完美地工作.但为什么我不能将base64转换为pdf.它只是打开一个空白页面,其中包含URL"data:",就好像它没有加载base64字符串一样.任何帮助将不胜感激,我可能会过度思考这一点,我确信有一个更简单的方法.这是问题的一个方面.
推荐指数
解决办法
查看次数
Three.js canvas.toDataURL有时是空白的
我正在尝试使用html2canvas.js渲染一个THREE.js场景+一些重叠的HTML元素.它大部分时间都有效,但不是所有时间.
在失败的情况下,HTML元素被渲染(背景,叠加等),但没有别的.THREE.js场景就像它完全是空的一样,即使它明显有数据.我可以说它通常不适用于较大的模型,但只能在渲染的早期.它最终适用于所有情况,但较大型号需要大约30秒.好像我必须给缓冲区一些时间来稳定.
html2canvas按照您的预期处理THREE.js画布 - 它只是用于drawImage将THREE.js画布绘制到最终由库返回的新画布上.
否则,我会尽量确保没有其他东西忙于画布,就像这个小提琴一样:http://jsfiddle.net/TheJim01/k6dto5sk/63/(以下js代码)
正如您所看到的,我正在尝试阻止渲染循环,并且当我想捕获场景时再执行一次渲染.但即使所有这些预防措施似乎都没有帮助.
有没有更好的方法从THREE.js画布中获取图像？我可以手动执行该部分,然后将THREE.js画布替换为获取的图像,只需要足够长的时间让html2canvas完成它的工作,然后将THREE.js画布交换回来.我宁愿不这样做如果用户制作大量快照(图像资源,图像资源无处不在......),那么我就不会混淆DOM.
无论如何,这是代码.欢迎任何想法或建议.谢谢!
var hostDiv, scene, renderer, camera, root, controls, light, shape, theta, aniLoopId, animating;
function snap() {
animating = false;
cancelAnimationFrame(aniLoopId);
renderer.render(scene, camera);
// html2canvas version:
/*
var element = document.getElementById('scenePlusOverlays');
// the input buttons represent my overlays
html2canvas( element, function(canvas) {
// I'd convert the returned canvas to a PNG
animating = true;
animate();
});
*/
// This is basically what html2canvas …推荐指数
解决办法
查看次数
从html导出图像到jsPDF
我有一个网页,我希望打印一些HTML.为此,我使用html2canvas和jsPDF.
我遇到的问题是它不会打印HTML中显示的图像.
我的HTML和CSS看起来如下(小提琴中的完整代码):
.handsomeHtml {
background: red;
}
.crazyFrog {
background: url('http://e-cdn-images.deezer.com/images/artist/01eb92fc47bb8fb09adea9f763bb1c50/500x500.jpg');
width: 500px;
height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js">
</script>
<div id="someHtml" class="handsomeHtml">
Hello, handsome HTML
<br>
<img class="crazyFrog"></img>
</div>
<button id="savePDFbutton" onclick="savePDF()">
save pdf
</button>
预期结果:
实际PDF结果
推荐指数
解决办法
查看次数
标签 统计
html2canvas ×10
javascript ×6
jspdf ×5
canvas ×4
angular ×2
pdf ×2
typescript ×2
codesandbox ×1
html ×1
html2pdf ×1
html5 ×1
html5-canvas ×1
ionic4 ×1
three.js ×1