标签: html2canvas
html2canvas使用angular2/typescript以css样式呈现文档PDF
如何使用带有angular2的html2canvas生成输出文件PDF
我试图导入文件html2canvas typescript并发出这样的声明来使用它
declare let html2canvas: Html2CanvasStatic;
但是我没有定义html2canvas
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
我在github html2canvas typescript上找到了这个文件打字稿
如何将此用于我的应用angular2
推荐指数
解决办法
查看次数
html2canvas错误:未捕获错误:IndexSizeError:DOM异常1
我使用html2canvas转换画布上的div.像这样:
<script src="js/libs/jquery-1.7.1.min.js"></script>
<script src="js/libs/jquery-ui-1.8.17.custom.min.js"></script>
<script src="js/html2canvas/html2canvas.js"></script>
...
<body id="body">
<div id="demo">
...
</div>
</body>
<script>
$('#demo').html2canvas({
onrendered: function( canvas ) {
var img = canvas.toDataURL()
window.open(img);
}
});
</script>
我收到此错误:html2canvas.js中的"未捕获错误:IndexSizeError:DOM异常1":
ctx.drawImage( canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height );
有没有人知道发生了什么？
推荐指数
解决办法
查看次数
使用html2canvas进行阿拉伯语编码
我正在使用html2canvas一个div的图像,内容来自同一页面,相同的域名,但它显示阿拉伯字母断开连接,似乎html2canvas不支持阿拉伯语.
当我在其网页上阅读有关它的可用详细信息时,我没有找到任何有用的信息.
这是我使用的简单代码:
$("#import").click(function(){
// send the contents of the email :)
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
},
letterRendering:true
});
});
任何线索？
推荐指数
解决办法
查看次数
html2canvas没有捕获图像
html2canvas.js没有捕获图像.它会留下图像出现的空白区域.
function capture()
{
html2canvas(document.body, {
allowTaint: true,
logging:true,
onrendered: function(canvas) {
imagestring = canvas.toDataURL("image/png");
console.log(imagestring);
document.body.appendChild(canvas);
}
});
}
我已经尝试了很多,但我找不到解决方案.
感谢帮助:)
推荐指数
解决办法
查看次数
使用html2canvas将高图图表呈现为pdf不适用于IE和Firefox
我们使用html2canvas.js和html2canvas.svg.js(版本0.5.0 beta1)和highcharts.js将圆环图下载到pdf中.
这在Chrome中可以正常使用,但是在IE和Firefox中这不起作用.在IE中,图表呈现不正确,在Firefox中根本不呈现.
以下是Chrome,IE和Firefox下载的屏幕截图
铬
IE(边缘)
火狐
我用来做html2canvas的代码如下:
html2canvas($("#container"), {
onrendered: function (canvas) {
var imgData = canvas.toDataURL(
'image/png');
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('sample-file.pdf');
}
});
我创建了一个jsFiddle来演示这里的问题 - http://jsfiddle.net/jko0rs5g/3/
有谁知道可能导致这个问题的原因,以及我们如何解决它？
编辑
只是为了澄清为什么我们没有使用内置的Highcharts导出,这是为了我们在Highcarts中添加额外的html,例如图表上方或下方的附加信息,或者例如甜甜圈内的分数.我已经更新了jsfiddle以反映这一点.
推荐指数
解决办法
查看次数
html2canvas 不适用于伪元素
我正在尝试使用html2canvasusing截取屏幕截图ionicframework。除了我有:before. 如
CSS
.e_amount::before{
content: "$";
}
在截取屏幕截图之前，它看起来像这样：
在html2canvas 代码之后：
注意到美元符号 ($) 与 10.00 不一致。
我试过在头部包含样式，但仍然无法正常工作。我错过了什么？
JS
html2canvas(document.getElementById('card'), {
onrendered: function(canvas) {
window.canvas2ImagePlugin.saveImageDataToLibrary(
function(msg){
console.log(msg);
var message = {
text: "QR Generated",
image: "file://"+msg
};
window.socialmessage.send(message);
},
function(err){
console.log(err);
},
canvas
);
}
});
html
<div class="list card" id="card">
<div class="item item-body">
<div class="row" style="margin-bottom: 5px; border-bottom: 1px solid #ddd;">
<style>.e_amount::before{content:'$' !important;}</style>
<div class="col bold">{{"amount" | translate}}</div>
<div class="col e_amount"></div> …推荐指数
解决办法
查看次数
如何设置渲染图像的大小
我对如何指定html2canvas生成的图像大小感到困惑.例如,我希望能够将DIV保持为400px x 400px,但渲染图像为1200px x 1200px.我查看了文档,但我误解了如何应用它.我试过a.width: 1200; a.height: 1200;没有运气就加入了.
我究竟做错了什么？
我的保存功能,来自我的JS:
$('#save').click(function() {
html2canvas($('#imagesave'), {
onrendered: function(canvas) {
var a = document.createElement('a');
a.href = canvas.toDataURL("image/png");
a.download = 'myfile.png';
a.click();
}
});
});
HTML
<div id="imagesave">
...
</div>
<button id="save">Save</button>
CSS
#imagesave {
background-color: white;
height: 400px;
width: 400px;
}
推荐指数
解决办法
查看次数
使用 querySelector 获取包含某个类的所有元素
为了更改我正在使用的类中的某些样式querySelector()：
el.querySelector('.fa fa-car').style.display = "none";
这对于一个元素来说效果很好，但如果有更多元素包含此类，并且我想将所有元素的显示更改为无，则此命令仅删除它的第一次出现，而下一个元素保持不变。
我尝试这样做querySelectorAll()：
el.querySelectorAll('.fa fa-car').style.display = "none";
但这会返回一条错误消息：
html2canvas：类型错误：无法设置未定义的属性“显示”
关于如何获取包含特定类的所有元素并对它们执行操作有什么想法吗？
推荐指数
解决办法
查看次数
使用 html2canvas 和 jspdf 在 React 中从 Html 生成 pdf
我已经在 React 中从 html2canvas 和 jspdf 成功生成了 pdf。但问题是 pdf 中渲染的图像被拉伸。请让我知道做这种工作的最佳选择是什么。是否有可能在不使用 html2canvas 的情况下将 HTML 直接呈现为 pdf？下面是我的截图 输出截图和 pdf的截图
下面是我的代码
import React, { Component } from 'react';
import * as jsPDF from 'jspdf';
import * as html2canvas from 'html2canvas';
class Invoice extends Component {
handlePdf = () => {
const input = document.getElementById('page');
html2canvas(input)
.then((canvas) => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF('p', 'px', 'a4');
var width = pdf.internal.pageSize.getWidth();
var height = pdf.internal.pageSize.getHeight();
pdf.addImage(imgData, 'JPEG', 0, 0, width, …推荐指数
解决办法
查看次数
Three.js截图
我需要制作网站截图.我尝试使用html2canvas和所有它正在工作.但问题是我正在使用THREE.WebGLRenderer和THREE.CSS3DRenderer(对于webgl中的html)...所以当我制作截图时,它只能从WebGLRenderer创建图像.CSS3DRenderer被忽略,我不知道如何从两个渲染器制作截图图像.我正在使用这个解决方案: 用html2canvas截取<body>并将img存储为JS var
推荐指数
解决办法
查看次数
标签 统计
html2canvas ×10
javascript ×5
jquery ×3
html ×2
pdf ×2
angular ×1
canvas ×1
css ×1
encoding ×1
highcharts ×1
jspdf ×1
reactjs ×1
screenshot ×1
svg ×1
three.js ×1
typescript ×1
webpage ×1