标签: html2canvas
循环html2canvas
我在尝试在for循环中实现html2canvas脚本时遇到了一些麻烦.
我正在编写一个Javascript函数,它使用一组数据来修改一组元素的样式,将容器div捕获为画布,将其转换为图像,将其附加到文档正文然后转到下一个数组的索引.
我遇到麻烦的部分是在我的循环结束时:
html2canvas(document.getElementById("background"), {
onrendered: function(canvas) {
var imgdata = canvas.toDataURL("image/png");
var obj = document.createElement("img");
obj.src=imgdata;
document.body.appendChild(obj);
}
});
通过逐步完成脚本,我发现在继续进行for循环的下一次迭代之前,它不会等待渲染画布,这会导致我试图捕获的元素发生变化但是每个正在渲染的图像看起来完全相同(作为数组中的最终索引).
有没有办法在画布渲染时延迟脚本一秒钟？我试过使用setTimeout(),似乎找不到任何其他延迟脚本的方法,我不熟悉onrendered代码部分的工作原理.
如果我的解释不清楚,我会尽快准备一些合适的例子.
推荐指数
解决办法
查看次数
html2canvas保存为jpeg而无需在浏览器中打开
我正在尝试创建一个screengrab按钮,用于创建用户的图像document.body.
理想情况下,用户可以选择将图像本地保存为.jpeg.
我正在接近使用html2canvas库创建我需要的功能.
function screenGrabber() {
html2canvas([document.body], {
logging: true,
useCORS: true,
onrendered: function (canvas) {
img = canvas.toDataURL("image/jpg");
console.log(img.length);
console.log(img);
window.location.href=img; // it will save locally
}
});
}
为了验证这是否有效,我一直img在新的浏览器窗口中打开变量.图像没有完全渲染,我猜这是因为它的长度超过30,000个字符.
我怎样才能更好地为用户提供在onrendered事件发生后在本地保存画布的选项？
推荐指数
解决办法
查看次数
如何使用jspdf在pdf的多个页面中保存图像
我有一个表(列不同的列)将保存为pdf.I使用html2canvas将表转换为图像,然后将图像保存为pdf usng jspdf.如果图像的大小小于或等于pdf的页面大小,但如果图像大小大于页面大小,则它仅保存pdf的第一页(仅包含图像的一部分)并且休息图像不以pdf格式显示/保存.这里是我使用的javascript代码.
$("#btnVC_saveGLSummary").click(function () {
html2canvas($("#tblSaveAsPdf1"), {
onrendered: function (canvas) {
var myImage = canvas.toDataURL("image/jpeg");
var d = new Date().toISOString().slice(0, 19).replace(/-/g, "");
filename = 'report_' + d + '.pdf';
var doc = new jsPDF();
doc.addImage(myImage, 'JPEG', 12, 10);
doc.save(filename);
}
});
});
任何想法如何在PDF的第二页上获得图像的剩余部分.
推荐指数
解决办法
查看次数
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]
谢谢关注。。
推荐指数
解决办法
查看次数
如何从pdf（jspdf）删除black bg？
我已经使用html2canvas和jspdf从html转换为pdf。
我正在使用a3格式的pdf，但内容宽度为ix 1000px。因此，在1000px之后，pdf会显示黑色背景。
canvas{
background: #fff !important;
background-color: #fff !important
margin: 0;
}
#cisForm {
padding: 10px;
width: 1000px;
margin: 0;
background: #fff !important;
}
cisForm是身体
<script type="text/javascript">
window.onload = function() {
html2canvas(document.body).then(function(canvas) {
background:'#fff',
document.getElementById("cisForm").appendChild(canvas);
document.body.appendChild(canvas);
var context = canvas.getContext("2d");
context.fillStyle="#FFFFFF";
l = {
orientation: 'p',
unit: 'pt',
format: 'a3',
compress: true,
fontSize: 8,
lineHeight: 1,
autoSize: false,
printHeaders: true
};
var doc = new jsPDF(l, "", "");
doc.addImage(canvas.toDataURL("image/jpeg"),"jpeg",0,0)
window.location=doc.output("datauristring")
});
}
</script>
此代码没有用。这是从html转换为pdf。
还有一个问题。
一些有限的内容仅以pdf格式提供。一些内容不来。
我们是否需要在任何地方设置页数？
如何从PDF中删除黑色背景
推荐指数
解决办法
查看次数
在画布中隐藏对象
我想知道，是否可以使用Fabric JS在画布中隐藏文本对象？
我不想删除对象，因为我需要进一步使用它，所以只想隐藏它即可。我搜索了很多，但没有任何效果。这是我的fabric js代码。
var text = new fabric.Text("test", {
fontFamily: 'Times new roman',
fontSize: fabric.util.parseUnit(fontSize),
left: (startPosition.x + pointer.x) / 2,
top: ((startPosition.y + pointer.y) / 2) + 10,
slope: ((startPosition.y - pointer.y) / (startPosition.x - pointer.x)),
originX: 'center',
originY: 'center',
});
canvas.add(text);
//canvas.getObjects(text).style.display = "none";
//text.prop.hide();
//text.hide = function () {
//text.set({
// css: {"display":"none"},
// selectable: false
// });
//};
所有建议均为例外。
推荐指数
解决办法
查看次数
Angular中的html2canvas-无法调用类型缺少调用签名的表达式
我正在尝试将html2canvas库用于Angular 8项目。
我也尝试通过在项目中安装html2canvas类型，npm install --save @types/html2canvas但仍然无法正常工作。
模板：
<div #myform>
<form>
...
</form>
</div>
零件：
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import * as html2canvas from 'html2canvas';
@Component({
selector: 'app-pdf-viewer',
templateUrl: './pdf-viewer.component.html',
styleUrls: ['./pdf-viewer.component.scss']
})
export class PdfViewerComponent {
@ViewChild('myform', { static: false, read: ElementRef }) pdfForm: ElementRef;
constructor() {}
pdfDownload() {
html2canvas(this.pdfForm.nativeElement).then(canvas => {
const imgData = canvas.toDataURL('image/png');
document.body.appendChild(canvas);
});
}
}
我的意图是将表单呈现为画布，但是应用程序引发错误：
src / app / grid / pdf-viewer / pdf-viewer.component.ts中的错误（19,5）：错误TS2349：无法调用类型缺少调用签名的表达式。输入'typeof import（“ myroute”）'，表示您不支持呼叫签名。
推荐指数
解决办法
查看次数
DOMException：无法在“ ShadowRoot”上设置“ adoptedStyleSheets”属性：不允许在多个文档中共享构造的样式表
使用html2canvas时遇到？DOMException：无法在“ ShadowRoot”上设置“ adoptedStyleSheets”属性：不允许在多个文档中共享构造的样式表
html2canvas(document.getElementById('qr-code-content'), {useCORS: true}).then(canvas => {
document.getElementById('qr-code-content').append(canvas);
this.base64ImgData = canvas.toDataURL();
this.sharing = true;
});
推荐指数
解决办法
查看次数
标签 统计
html2canvas ×10
javascript ×7
html ×3
jquery ×3
jspdf ×3
canvas ×2
pdf ×2
angular ×1
asp.net-mvc ×1
css ×1
html5 ×1
html5-canvas ×1
php ×1
types ×1
typescript ×1