javascript - document.body.appendChild 和 append(var) 不显示/渲染
问题描述
我的目标是在每张图片的底部放置一个时间戳。如果我调用 google.uk.com,该代码有效,但当我调用 www.deutschland.maps.luftdaten.info 时则无效。我如何使它工作?
我在树莓派 debian 9.6 上运行;幻影2.1.1。
我正在使用以下命令行调用 js 代码:
QT_QPA_PLATFORM=offscreen phantomjs rasterize_test_.js http://www.deutschland.maps.luftdaten.info/#12/50.1814/8.7111 Luftdaten_test__`date '+%Y%m%d_%H%M%S'`.jpg 700px*700px
结果:没有日期戳的 img 没有时间戳
如果我打电话:
QT_QPA_PLATFORM=offscreen phantomjs rasterize_test_.js https://www.google.co.uk Luftdaten_test__`date '+%Y%m%d_%H%M%S'`.png 700px*700px
结果:打印时间戳
我试过移动目标空间,但没有运气。我还添加了超时,但没有变化。
我怎样才能让它工作?
这是代码:
"use strict";
var page = require('webpage').create(),
system = require('system'),
address, output, size, pageWidth, pageHeight;
if (system.args.length < 3 || system.args.length > 5) {
console.log('Usage: rasterize.js URL filename [paperwidth*paperheight|paperformat] [zoom]');
console.log(' paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "A4", "Letter"');
console.log(' image (png/jpg output) examples: "1920px" entire page, window width 1920px');
console.log(' "800px*600px" window, clipped to 800x600');
phantom.exit(1);
} else {
address = system.args[1];
output = system.args[2];
page.viewportSize = { width: 600, height: 600 };
if (system.args.length > 3 && system.args[2].substr(-4) === ".pdf") {
size = system.args[3].split('*');
page.paperSize = size.length === 2 ? { width: size[0], height: size[1], margin: '0px' }
: { format: system.args[3], orientation: 'portrait', margin: '1cm' };
} else if (system.args.length > 3 && system.args[3].substr(-2) === "px") {
size = system.args[3].split('*');
if (size.length === 2) {
pageWidth = parseInt(size[0], 10);
pageHeight = parseInt(size[1], 10);
page.viewportSize = { width: pageWidth, height: pageHeight };
page.clipRect = { top: 0, left: 0, width: pageWidth, height: pageHeight };
} else {
console.log("size:", system.args[3]);
pageWidth = parseInt(system.args[3], 10);
pageHeight = parseInt(pageWidth * 3/4, 10); // it's as good an assumption as any
console.log ("pageHeight:",pageHeight);
page.viewportSize = { width: pageWidth, height: pageHeight };
}
}
if (system.args.length > 4) {
page.zoomFactor = system.args[4];
}
page.open(address, function (status) {
page.includeJs('https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', function() {
if (status !== 'success') {
console.log('Unable to load the address!');
phantom.exit(1);
} else {
page.evaluate(function(){
var date = new Date();
var day = ("0" + (date.getDate())).slice(-2);
var month = ("0" + (date.getMonth()+ 1)).slice(-2) ;
var year = date.getFullYear();
//var time = date.getTime();
var hours = ("0" + (date.getHours())).slice(-2);
var minutes = ("0" + (date.getMinutes())).slice(-2);
var seconds = ("0" + (date.getSeconds())).slice(-2);
var watermark = document.createElement('div');
watermark.style.top = '30%';
watermark.style.left = '30%';
watermark.innerHTML = 'timestamp: ' + day + '/' + month + '/' + year + ' ' + hours + ':' + minutes + ':' + seconds;
watermark.style.position = 'absolute';
window.setTimeout(function () {
document.body.appendChild(watermark);
},5000);
var stamp = '<div style="position:absolute; right: 30px; bottom: 50px; color: red; border: 1px solid rgba(50, 50, 0, 0.1); border-radius: 10px; font: normal 24px/30px Tahoma; padding: 15px; text-align: center;">PAID ON<br>' + day + '/' + month + '/' + year + '</div>';
window.setTimeout(function () {
$("body").append(stamp);
},5000);
});
window.setTimeout(function () {
page.render(output);
phantom.exit();
}, 30000);
}
});
});
}
解决方案
我找到了解决方案......问题似乎是,时间戳被添加到框架区域之外......
在重新渲染之前调整页面大小并在页面打开后它工作......
window.setTimeout(function () {
pageWidth = parseInt(size[0], 10) -1;
pageHeight = parseInt(size[1], 10) -30;
page.viewportSize = { width: pageWidth, height: pageHeight };
page.render(output);
phantom.exit();
}, 5000);
推荐阅读
- react-native - IntelliJ Expo 控制台日志以红色显示 ANSI 转义字符
- django - Django:我想显示当月的数据,但我还没有找到有效的查询。请协助
- javascript - 没有从使用 javaScript 的 html 中获得价值
- ssh - 在多个相同大小的面板中自动将 Windows 终端连接到 SSH
- javascript - 如何在php中通过id提取键的值?
- asp.net-core - 从 ASP.NET Core 5 MVC Web 项目调用微服务的最佳实践/实现
- regex - 打字稿正则表达式匹配,即使一部分匹配
- node.js - 何时在 MongoDB 中使用嵌入与引用
- android - 主屏幕上自动出现多个灰色图标
- python - 使用 pandas loc 时进行索引