I'm using phantomjs on Windows 7 x64 to make my page screenshot. My code is
var webPage = require('webpage');
var page = webPage.create();
page.viewportSize = { width: 1920, height: 1080 };
page.open("http://localhost/index.html", function start(status) {
page.render('screeshot.png', {format: 'png', quality: '100'});
phantom.exit();
});
I get screenshot like
while Chrome 51 show me page like this
add a delay, maybe phantomjs haven't load the site completely
var webPage = require('webpage');
var page = webPage.create();
page.viewportSize = { width: 1920, height: 1080 };
page.open("http://localhost/index.html", function start(status) {
setTimeout(function() {
page.render('screeshot.png', {format: 'png', quality: '100'});
phantom.exit();
}, 5000);
});
or try this script (https://github.com/ariya/phantomjs/blob/master/examples/rasterize.js) with command line:
phantomjs rasterize.js http://localhost/index.html /yourFolder 1920px
Related
I am trying to generate PDF from image path in react native so i am using below plugin for that
https://www.npmjs.com/package/react-native-image-to-pdf/v/1.2.0
As per above doc i configure all the thing and below is my code
const myAsyncPDFFunction = async () => {
try {
console.log('Call a');
let path ='file:///Users/macminiharshalk/Library/Developer/CoreSimulator/Devices/FADDF530-05FD-4A0E-9E61-C6AEDB719955/data/Containers/Data/Application/37B8FE42-B23A-4018-865F-F57670B3411E/tmp/606C88B3-5759-4942-A544-1231A0C17532.jpg';
const options = {
imagePaths: [path],
name: 'PDFName',
maxSize: {
// optional maximum image dimension - larger images will be resized
width: 900,
height: Math.round(
(Dimensions.get('window').height / Dimensions.get('window').width) *
900,
),
},
quality: 0.7, // optional compression paramter
// targetPathRN: "/storage/emulated/0/Download/", // only for android version 9 and lower
//for versions higher than 9 it is stored in (Download/img-to-pdf/)
};
console.log("options-->", options);
const pdf = await RNImageToPdf.createPDFbyImages(options);
console.log('PDF URIs-->', pdf);
console.log(pdf.filePath);
} catch (e) {
console.log(e);
}
};
When i console log i can able to see pdf path as below
/Users/macminiharshalk/Library/Developer/CoreSimulator/Devices/FADDF530-05FD-4A0E-9E61-C6AEDB719955/data/Containers/Data/Application/37B8FE42-B23A-4018-865F-F57670B3411E/Documents/PDFName.pdf
When i console option parameter it is showing as below
{"imagePaths": ["file:///Users/macminiharshalk/Library/Developer/CoreSimulator/Devices/FADDF530-05FD-4A0E-9E61-C6AEDB719955/data/Containers/Data/Application/37B8FE42-B23A-4018-865F-F57670B3411E/tmp/606C88B3-5759-4942-A544-1231A0C17532.jpg"], "maxSize": {"height": 1948, "width": 900}, "name": "PDFName", "quality": 0.7}
But when i open PDF image is not copy it is blank PDF so any idea how can i show image in PDF ?
please try
const newPath = path.replace('file://', '');
I'm having problems trying to record audio into a file. I'm trying to run the sample code (with the required permissions in the tiapp.xml) but i'm always getting errors (like "+[NSBlock boundBridge:withKrollObject:]: unrecognized selector sent to class 0x1b5549500"; at the stop() action).
I can't find a module for audio recording (i've used the tutorial.audiorecord but it doesn't work in newest versions of SDK)
This is the sample code from the appcelerator documentation page https://docs.appcelerator.com/platform/latest/#!/api/Titanium.Media.AudioRecorder
I try everything but doesn't work.
Someone have a working example or a module for Appcelerator SDK 7?
var window = Ti.UI.createWindow({
backgroundColor: '#fff'
});
var recordStart = Ti.UI.createButton({
title: 'Start',
top: 10
});
var recordPause = Ti.UI.createButton({
title: 'Pause',
top: 60
});
var recordStop = Ti.UI.createButton({
title: 'Stop',
top: 110
});
var recordPlay = Ti.UI.createButton({
title: 'Play',
top: 160
});
var audioRecorder = Ti.Media.createAudioRecorder();
var record;
var audioPlayer;
window.addEventListener('open', function(e) {
if (!Ti.Media.hasAudioRecorderPermissions()) {
Ti.Media.requestAudioRecorderPermissions(function(e) {
if (e.success) {
window.add(recordStart);
}
});
} else {
window.add(recordStart);
}
});
recordStart.addEventListener('click', function(e) {
audioRecorder.start();
});
recordPause.addEventListener('click', function(e) {
if (audioRecorder.getPaused()) {
recordPause.setTitle('Pause');
audioRecorder.resume();
} else {
recordPause.setTitle('Resume');
audioRecorder.pause();
}
});
recordStop.addEventListener('click', function(e) {
record = audioRecorder.stop();
Ti.API.info(record.getNativePath());
});
recordPlay.addEventListener('click', function(e) {
audioPlayer = Ti.Media.createAudioPlayer({
url: record.getNativePath()
});
audioPlayer.start();
});
window.add(recordPause);
window.add(recordStop);
window.add(recordPlay);
window.open();
Thanks in advance
This is an example using Titanium's Hyperloop: https://gist.github.com/dinahgarcia/119ac00c91334d3951601cf347bad8d4
To be able to use it you need to enable Hyperloop: https://docs.appcelerator.com/platform/latest/#!/guide/Enabling_Hyperloop
I have adopted a website and I cannot figure something out. The website uses CasperJS called from the command line, which logs into the site and then generates a PDF from the HTML that is downloaded. I think CasperJS will use PhantomJS for the PDF generation, using capture().
I need to add page numbers and the total pages to the PDF. So Page 1 of 5 for example. But I cannot find any details online how to do this with CasperJS and PhantomJS. Is it possible?
The download process creates the following JS file on the server, which is called below:
var casper = require('casper').create({
verbose: false,
logLevel: 'debug',
userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22',
pageSettings: {
loadImages: true,
loadPlugins: true
},
});
var url = '{$siteurl}';
casper.start(url, function() {
this.page.paperSize = {
width: '11in',
height: '8.5in',
orientation: 'landscape',
border: '0.1in'
};
this.fill('form#loginform', {
ident: 'username',
password: 'password'
}, true);
});
var url = '{$siteurl}/pdf/{$twigDate}/{$clubId}/{$sessionId}';
casper.then(function() {
casper.start(url, function() {
this.capture('{$genPdf}');
});
});
casper.run();
Then the above file is called with:
$exe = shell_exec('/usr/bin/casperjs --ignore-ssl-errors=true --ssl-protocol=any ' . INC_ROOT . '/pdf/registers/' . $filename . ' 2>&1');
Thanks
PhantomJS
PhantomJS has a paperSize property that defines the size of the web page when rendered as a PDF.
The paperSize property has header and footer subproperties that allow for repeating page headers and footers.
PhantomJS provides the following example on how to accomplish this task:
var webPage = require('webpage');
var page = webPage.create();
page.paperSize = {
width: '8.5in',
height: '11in',
header: {
height: '1cm',
contents: phantom.callback(function (pageNum, numPages) {
return '<h1>Header <span style="float:right">' + pageNum + ' / ' + numPages + '</span></h1>';
}),
},
footer: {
height: '1cm',
contents: phantom.callback(function (pageNum, numPages) {
return '<h1>Footer <span style="float:right">' + pageNum + ' / ' + numPages + '</span></h1>';
}),
},
};
Note: A more detailed example can be found in printheaderfooter.js in the examples folder.
CasperJS
CasperJS allows you to use the page option to access an existing PhantomJS WebPage instance.
In other words, after casperjs.start(), the PhantomJS page module is available in casper.page.
You can access the paperSize attribute in CasperJS using casper.page.paperSize.
casper.page.paperSize = {
width: '8.5in',
height: '11in',
header: {
height: '1cm',
contents: phantom.callback(function (pageNum, numPages) {
return '<h1>Header <span style="float:right">' + pageNum + ' / ' + numPages + '</span></h1>';
}),
},
footer: {
height: '1cm',
contents: phantom.callback(function (pageNum, numPages) {
return '<h1>Footer <span style="float:right">' + pageNum + ' / ' + numPages + '</span></h1>';
}),
},
};
I want to check pdf file size with jspdf.js script. I need to display this on the screen before downloading file. Are there any possibilities?
function demoFromHTML(x = false) {
var pdf = new jsPDF('p', 'pt', 'letter');
source = $('#print')[0];
specialElementHandlers = {
'#bypassme': function (element, renderer) {
return true
}
};
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
pdf.fromHTML(
source,
margins.left,
margins.top, {
'width': margins.width,
'elementHandlers': specialElementHandlers
},
function (dispose) {
if(x){
pdf.output('dataurlnewwindow');
}else{
pdf.save('<?php the_title() ?>.pdf');
}
}, margins
);
}
Test this :
pdf.output('datauristring').length
It work for me
I've found a solution, It was pretty simple.
Maybe someone will use it:
pdf.output().length;
In order to have PhantomJS create screenshots of a page at different viewport widths, I'd like to adjust it dynamically. This does not work, though:
var system = require('system');
var page = require('webpage').create();
page.viewportSize = { width: 800, height: 600 };
page.open('http://example.com', function (status) {
page.render('medium.png');
page.viewportSize = { width: 630, height: 420 };
page.render('small.png');
phantom.exit();
});
When run with phantomjs script.js this produces two identical PNG files medium.png and small.png at a width of 800px each. Expected behaviour was to have medium.png like this and small.png at a width of 630px. How can this be achieved?
PS: This answer to a similar question produces an error for me. Also the accepted answer to that question suggests quite an ugly workaround I would like to avoid.
I think it should be possible to set the viewport size and open the page again like this:
var system = require('system');
var page = require('webpage').create();
page.viewportSize = { width: 800, height: 600 };
page.open('http://example.com', function (status) {
page.render('medium.png');
page.viewportSize = { width: 630, height: 420 };
page.open('http://example.com', function (status) {
page.render('small.png');
phantom.exit();
});
});