标签: html2canvas
Html2Canvas中的HTML字符串
我们如何将有效的HTML字符串传递给html2canvas？
例如
var html = "<html><head></head><body><p>HI</p></body></html>
在http://html2canvas.hertzen.com/screenshots.html上完成它的方式
Html2canvas真的很棒,除了文档记录很差外.
推荐指数
解决办法
查看次数
在S3和CloudFront中使用CORS的HTML2Canvas
我有一个问题,我完全绝望...... :(
我正在使用HTML2Canvas创建包含许多内容的div的屏幕截图.
我已经阅读了许多类似的问题:问题1和问题2,我发现另一个问题与我的问题非常相似:
在Firefox中,一切正常,但在Chrome中,我遇到了CORS问题.我有这个错误:
来自" http://files.domain.ly "的图像已被跨源资源共享策略阻止加载:请求的资源上没有"Access-Control-Allow-Origin"标头.因此不允许来源' http:// localhost:58943 '访问.
我在S3 Bucket中以这种方式配置了CORS:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>localhost</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>localhost:58943</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>files.domain.ly</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
该files.domain.ly是CloudFront的的CNAME.
HTML2Canvas代码:
html2canvas(document.getElementById('zoom_container'), {
useCORS: true
}).then(function (canvas) {
canvas.id = "image_canvas_render";
document.body.appendChild(canvas);
var img = canvas.toDataURL();
img.id = "image_render_canvas";
});
为什么它适用于Firefox但不适用于Chrome或Safari？
S3中的文件是公共的,我可以直接通过任何Web浏览器访问,没有任何问题.
我试过在img标签中使用属性crossorigin ="anonymous",但它没有用.
非常感谢!!
编辑:有时它工作,有时没有...缓存问题？
推荐指数
解决办法
查看次数
如何使用js或jquery捕获html中的屏幕截图
我需要我的客户能够使用这样的按钮捕获我网站任何页面的屏幕截图:
<button>Take screenshot</button>我试图使用html2canvas,但它对我来说不能正常工作,因为我的网站上有iframe,这会引起一些会话问题.
有人有解决方案吗？
我看着谷歌,并没有找到一些对我有帮助的东西.
推荐指数
解决办法
查看次数
Html2canvas:facebook插件评论
我有一个使用facebook插件评论的网站.我正在寻找一种方法在屏幕截图中包含这些评论.如果我使用简单的html2canvas,我会得到一个空白框而不是它们.所以我尝试使用html2canvasproxy但现在它打印一些javascript控制台日志而不是facebook评论.
它应该像 
但我明白了 
.我注意到html2canvasproxy.php正确保存了facebook插件html.
我在控制台日志中找不到任何javascript错误.
我使用以下代码截取屏幕截图:
html2canvas(document.body, {
"logging": true, //Enable log (use Web Console for get Errors and Warnings)
"proxy":"js/html2canvasproxy.php",
"onrendered": function(canvas) {
var img = new Image();
img.onload = function() {
img.onload = null;
document.body.appendChild(img);
};
img.onerror = function() {
img.onerror = null;
if(window.console.log) {
window.console.log("Not loaded image from canvas.toDataURL");
} else {
alert("Not loaded image from canvas.toDataURL");
}
};
img.src = canvas.toDataURL("image/png");
}
});
我在html2canvasproxy.php中有这个设置:
//Turn off errors because the script already own uses "error_get_last"
error_reporting(0);
//setup …推荐指数
解决办法
查看次数
Chartjs + jsPDF =模糊图像
我在将图表导出为PDF时遇到了一些问题.
我有这个div
<div id="chart-area">
<button type="button" id="btnPrint_" onClick="Print1()">Print</button>
<?php echo '<h2 id="title">'.$_SESSION['team_name'].'</h2>'; ?>
<canvas id="myChart" width="800" height="400"></canvas>
<div id="legend"></div>
</div>
我正在使用ChartJS创建我的图表
$( document ).ready(function(){
var helpers = Chart.helpers;
var canvas = document.getElementById('myChart');
var data = {
labels: unique_dates,
datasets: [
{
label: "Ticket Count",
fillColor: "rgba(107, 110, 111, 0.6)",
strokeColor: "rgba(107, 110, 111, 0.6)",
highlightFill: "rgba(107, 110, 111, 0.6)",
highlightStroke: "rgba(151,137,200,1)",
data: ticket_count
},
{
label: "Subsidy Count",
fillColor: "rgba(8, 126, 210,0.5)",
strokeColor: "rgba(8, 126, 210,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)", …推荐指数
解决办法
查看次数
如何通过javascript将图像/ HTML画布切成两半？
我正在使用html2canvas将带有自定义功能的google地图javascript API转换为画布,然后转换为图像.
在所有浏览器上都能正常工作,除了在IE 11上它生成一个图像右侧有额外空白的图像,等于(浏览器窗口的宽度 - 地图宽度).所以我的窗户越宽,右边的空间越大,反之亦然.
如何将此图像(或HTMLcanvas)切割到实际图像的边缘(768像素宽)？
我在这里找到了这段代码,但不知道如何为此任务修改它:
var image = new Image();
image.onload = cutImageUp;
image.src = 'myimage.png';
function cutImageUp() {
var imagePieces = [];
for(var x = 0; x < numColsToCut; ++x) {
for(var y = 0; y < numRowsToCut; ++y) {
var canvas = document.createElement('canvas');
canvas.width = widthOfOnePiece;
canvas.height = heightOfOnePiece;
var context = canvas.getContext('2d');
context.drawImage(image, x * widthOfOnePiece, y * heightOfOnePiece, widthOfOnePiece, heightOfOnePiece, 0, 0, canvas.width, canvas.height);
imagePieces.push(canvas.toDataURL());
}
}
// imagePieces now contains data urls …推荐指数
解决办法
查看次数
html2canvas 在 Ipad/iPhone iOS 11.2.1 Safari 浏览器中不起作用
我已经使用 html2canvas 函数从 div 捕获屏幕截图，它在网络上工作正常，但在 Ipad iOS 11.2.1 Safari 浏览器中无法正常工作，得到空白响应。我在 iOS 11.2.1 上使用 Ipadair2
包括JS版本：
jQuery v1.7.1 jquery.com
html2canvas 0.4.1 <http://html2canvas.hertzen.com>
html2canvas 0.5.0-alpha1 <http://html2canvas.hertzen.com>
这里的 HTML 代码：
<div id="pdfContent" class="pdfContent" style="transform-origin: left top 0px; transform: scale(1);" crossOrigin="Anonymous">
<img id="hotspotimg" src="img.jpg" cropwidth="1000" cropheight="600"/>
<div id="editor"></div>
</div>
这里的JS代码：
html2canvas(document.querySelector('#pdfContent'), {useCORS: true}).then(function (canvas) {
try {
var imgageData = canvas.toDataURL("image/png");
} catch (err) {
console.log(err)
alert(err)
}
}).catch(function onRejected(error) {
alert(error);
});
我尝试了多个 github 解决方案，例如 在此处输入链接描述 和其他链接，但不适用于 Ipad/iPhone
请帮我：
推荐指数
解决办法
查看次数
如何使用jspdf和html2canvas打印全屏
您好，我在我的应用程序中使用 Angular8。这里我使用了 jspdf 和 html2canvas 将 html 转换为 pdf。但我只能打印半页而不是整页。谁能帮助我哪里出错了。
我附上了一个演示，当我在下拉列表中选择任何值时，会打开另一个 div，因此我需要获取 div 部分中所有内容的完整值。请帮忙。我得到这样的输出，但它不包含预期的完整值：
如果有任何其他方法可以按照我的要求提供输出，也可以接受。
TS：
public downloadPdf() {
var data = document.getElementById('pdfDownload');
html2canvas(data).then(canvas => {
// Few necessary setting options
var imgWidth = 208;
var imgHeight = canvas.height * imgWidth / canvas.width;
alert(imgHeight)
const contentDataURL = canvas.toDataURL('image/png')
let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
var position = 0;
pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
// pdf.save('new-file.pdf');
window.open(pdf.output('bloburl', { filename: 'new-file.pdf' }), '_blank'); …推荐指数
解决办法
查看次数
未捕获（承诺）无法在克隆的 iframe 中找到元素 #2460
我该如何修复这个错误？
我的代码：
const wrapper = document.createElement("div");
const myHTMLString = "<div>Hello</div>";
wrapper.insertAdjacentHTML("afterbegin",myHTMLString);
//console.log(">>>",wrapper);
html2canvas(wrapper,{useCORS: true}).then((canvas) => {
wrapper.appendChild(canvas);
console.log("canvas>>",wrapper.appendChild(canvas));
var base64encodedstring = canvas.toDataURL('image/jpeg', 1.0);
console.log("base6", base64encodedstring );
});
错误：
176e275da87 1ms 启动文档克隆
未捕获（承诺）无法在克隆的 iframe 中找到元素
推荐指数
解决办法
查看次数
如何使用 JavaScript 在 PDF 中截取屏幕截图
我正在使用 Html2Canvas 捕获屏幕截图 我想以 PDF 文件形式输出 现在我正在以 png 图像输出 如何转换或获取 pdf 输出
function genScreenshot() {
html2canvas(document.body, {
onrendered: function(canvas) {
$('#box1').html("");
$('#box1').append(canvas);
if (navigator.userAgent.indexOf("MSIE ") > 0 ||
navigator.userAgent.match(/Trident.*rv\:11\./))
{
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob,'Test file.png');
}
else {
$('#test').attr('href', canvas.toDataURL("image/png"));
$('#test').attr('download','Test file.png');
$('#test')[0].click();
}
}
});
}
推荐指数
解决办法
查看次数
标签 统计
html2canvas ×10
javascript ×7
jquery ×3
html ×2
jspdf ×2
amazon-s3 ×1
angular ×1
canvas ×1
chart.js ×1
facebook ×1
google-maps ×1
html5 ×1
html5-canvas ×1
image ×1
ios ×1
iphone ×1
pdf ×1
php ×1
png ×1
reactjs ×1
typescript ×1