Using phantomjs, is there a way to control the DPI setting used when rasterizing an image of the web content using the page.render(filename) method?
I can't find anything that would control this via the interface api, but didn't know if someone has already figured out a way to do this.
Our business-case looks like this:
Custom HTML content created via a web application is fed to our rasterize.js phantom process and is queried for a specific tag to set the client rectangle.
This client rectangle is rendered to a PNG of the HTML that can then be used as an image elsewhere.
We want the resolution of the resulting PNG to be something higher than the default, due to aliasing on the text at some odd font sizes/bold combinations.
I may be mixing up DPI with something else, but have you looked into the zoomFactor option? Setting that on the page object will cause the rendered image to zoomed.
This fork allows setting the dpi https://github.com/martonw/phantomjs/tree/issue-%2313553
You can set then the dpi with page.dpi = 72
console.log('Loading a web page');
var page = require('webpage').create();
var url = 'http://phantomjs.org/';
page.open(url, function (status) {
//Page is loaded!
page.dpi=300; // this is where you actually set the DPI
page.render("test.pdf");
phantom.exit();
});
Related
I have been trying to load some PDFS that will show inside a Bootstrap accordion. The problem is that they load in a lot of different ways depending on the browser. I've been trying iframe and object html tags with different results and i have a huge flow in Safari where the accordion functionality breaks completely when i embed a PDF inside a panel.
So i guess my question is: Is there any sort of standard regarding crossbrowsing in order to make embeded PDF'S work in Chrome, Safari, IE11 and Firefox ?
Since i need this to work on mobile the situation is even worst. Some advice will be really appreciated.
Create a canvas element with the class "panel-body" and give it an id of your choosing. Then add the following code to your document ready event.
PDFJS.getDocument('YOURPDF.pdf').then(function(pdf) {
pdf.getPage(1).then(function(page) {
var scale = 1;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('pdfOne'); // The id of your canvas
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
That will get the first page rendered. You'll need to create buttons to let the user navigate through the document but it should be easy enough to get that working based on what I've provided and the samples.
I am truly stumped at this point. I need to get the bounding box of a path string. I cannot use RaphaelJS because it's integrated too deeply with the browser, and naturally the Illustrator Type Library doesn't include anything to help me.
Where can I go from here? Should I just spend the time implementing my own algorithm?
check out:
http://www.jongware.com/idjshelp.html
or:
http://yearbookmachine.github.io/esdocs/#/Illustrator/PageItem
Rect geometricBounds Read only Property
The bounds of the artwork excluding stroke width.
There is not a lot of info on the Object Model Viewer about it. If it behaves like in InDesign the coordiantes depend on:
The page origin
The used unit
The page size
I hope that helps. You need to have a document open and have some PageItem selected. Should work with mostly everything you can put on a page in Illustrator.
var main = function(){
if(app.activeDocument.selection.length > 0){
var path = app.activeDocument.selection[0];
alert(path.geometricBounds);
}
}
}
main();
I want to build a website that looks exactly the same across all screen width's, which means the whole website will scale according to the screen's, or more accurately, the viewport's width.
This is relatively easy to do for SVG images and I have all images correctly scaling according to the viewport's width. The viewport's width is the point of reference, from which all images scale. However, the point of reference for the text is different between any desktop browser and the iPhone's Safari (and I assume any mobile browser).
According to my research there seem to be two possible reasons for different sized text: a difference in the default CSS's or a difference in the rendering engines. Since I can't find any reference to pixel sized text on Chrome's default CSS or Firefox's default CSS, I assume this setting comes from the rendering engine.
My IP is dynamic so I can't provide a live example, but here are the screens comparing the same site in iPhone's Safari and Chrome on the desktop. Notice the huge difference in the size of the text.
Is there any way I can make the text have the same relative size in both these browsers?
I found the answer in JavaScript:
onresize=onload=function(){
document.body.style.fontSize=window.innerWidth/20+"px"
}
which sets the text size according to the viewport's width on the body element. Since all the text set in em's is sized in relation to their parents, all the text is sized correctly from the body element.
Furthermore, if you want to avoid the cascading hell by using rems and respect the original layout design from a let's say 1024px width you can stick with this:
onresize = onload = function(){
document.querySelector("html").style.fontSize = ( innerWidth * 100 ) / 1024 + "%";
}
You should try CSS Unit vw, like this:
body { font-size: 1.5vw; }
However, i am not sure it is supported by mobile browsers...
EDIT
Check for browser compatibility here.
I have many large KML data-sets, which are served using a hierarchy of region-based network-links; as described in the KML reference:
Using Regions in conjunction with NetworkLinks, you can create a hierarchy of pointers, each of which points to a specific sub-Region. The <viewRefreshMode>, as shown in the following KML file, has an onRegion option, which specifies to load the Region data only when the Region is active. If you provide nested Regions with multiple levels of detail, larger amounts of data are loaded only when the user's viewpoint triggers the next load.
This works nicely when loaded in Google Earth.
I now wish to load these in an application using the Google Earth plug-in. And I need to access the loaded content via the Google Earth API; (i.e. attach click events, alter styles) to integrate the content into the application.
The issue is, I haven't found any reference to an 'on-load' event for network links. In my mind, the way this would work is:
Load top-level network link via the API, attaching a call-back function which will be invoked when the network-link is loaded.
In the call-back function, parse the KML returned by network link. For intermediate levels in the regionation hierarchy, this KML will contain only network links to the next regionation level. Load these into the plug-in via the API, again specifying the same call-back function, which will be invoked when these are loaded (i.e. when their region becomes visible).
Eventually, the KML returned will contain the actual 'content'. At this stage we load the actual content (i.e. placemarks) into the plug-in, after performing any desired modifications (e.g. attaching event-listeners, setting styles, etc).
I'm thinking the javascript would look something like the following.
Please note: this is just a rough sketch to perhaps aid in understanding my question. I am NOT asking why this code doesn't work.
//create network link
var networkLink = ge.createNetworkLink("");
networkLink.setName("Regionated hierarchy root");
// create a Link object
//the network-links contained in the kml that will be returned in this file
//are region-based; they will only be loaded when the user zooms into the relevant
//region.
var link = ge.createLink("");
link.setHref("http://foo.com/regionatedRoot.kml");
// attach the Link to the NetworkLink
networkLink.setLink(link);
//specify the callback function to be invoked when the network link is loaded
//this is is the part that doesn't actually exist; pure fiction...
networkLink.onLoad = networkLinkLoaded;
// add the NetworkLink feature to Earth
ge.getFeatures().appendChild(networkLink);
// function which will be invoked when a network-link is loaded
// i.e. when its region becomes active
function networkLinkLoaded(kml) {
//parse the kml returned for child network links,
//this will create the network link KmlObject, with a
//region specified on it.
for (childNetworkLink in parseNetworkLinks(kml)) {
//and append them, again hooking up the call-back
childNetworkLink.onLoad = networkLinkLoaded;
ge.getFeatures().appendChild(childNetworkLink);
}
//if the user has zoomed in far enough, then the kml returned will
//contain the actual content (i.e. placemarks).
//parse the kml returned for content (in this case placemarks)
for (placemark in parsePlacemarks(kml)) {
//here we would attach event-listeners to the placemark
ge.getFeatures().appendChild(placemark);
}
}
Is this possible?
Have I taken a wrong turn in my thinking? I believe I have followed recommended practices for managing large KML datasets, but I am unsure how to use these via the API.
Addendum:
As an example of the type of problem I am trying to solve:
Imagine you are building a web application using the Google Earth Plugin, and you want to display a placemark for every set of traffic-lights in the world. The placemarks should only display at an appropriate level-of-detail (e.g. when the camera is at 5km altitude). When a user clicks on a placemark, we want the web app to load statistics for that set of traffic-lights, and display them in a sidebar.
How would you engineer this?
You wouldn't need access to the object data directly to provide the functionality you require. You would handle the data load exactly like you have done, using a hierarchy of region-based network-links.
Then if your usage scenario is like the one you set out in your addendum then you would simply use the target data from the click event to load your statistical data based on the placemarks as required.
For example, you could simply set up a generic mousedown event handler on the window object and then test to see if the target is a placemark. You can add this generic listener before you load any data and it will still be fired when you click on your dynamically loaded placemarks. There is no need to attach individual event-listeners to the placemarks at all.
e.g.
window.google.earth.addEventListener(ge.getWindow(), 'mousedown', onWindowMouseDown);
var onWindowMouseDown = function(event) {
if (event.getTarget().getType() == 'KmlPlacemark') {
// get the placemark that was clicked
var placemark = event.getTarget();
// do something with it, or one of its relative objects...
var document = placemark.getOwnerDocument();
var parent = placemark.getParentNode();
// etc...
}
}
Not sure if this is quite what you want but there is a kmltree api that will:
build out the kml tree for you based on the kml given
allow you to have a 'kmlloaded' event handler
http://code.google.com/p/kmltree/
function initCB(instance){
ge = instance;
ge.getWindow().setVisibility(true);
var gex = gex = new GEarthExtensions(ge);
var tree = kmltree({
url: 'http://foo.com/regionatedRoot.kml',
gex: gex,
mapElement: $('#map3d'),
element: $('#tree'),
});
$(tree).bind('kmlLoaded', function(event, kmlObject){ //do something here });
tree.load();
}
it does require you to bring in another js api but it works pretty good and gives you some good built in functionality.
So far I haven't found anything just from the plug-in that will fire an event when the kml is loaded...
you might be able to try using fetchKml() especially if you are hardcoding that url for the link in there?
google.earth.fetchKml(ge, 'http://foo.com/regionatedRoot.kml', function(kmlObject){
//do logic here
});
On my website lukewattchow.zzl.org/ I have made it so that when the browser window scales down the website also scales down. However the text inside the divs need to scale down with the background, and images at the same time. Can anyone help?
i assume you will require some Javascript to adjust font size of the BODY based on some fraction of the browser's width:
(untested pseudo-code; since i never write anything HTML, CSS, or ECMAScript)
var body = document.getElementById("theBody");
var fontSizeInPixels = (16*1680)/document.documentElement.clientHeight;
//nominal font size of 12pt (16px) with a 1650px wide browser window
body.style.font-size = fontSizeInPixels+"px";
Edit:
Microsoft had a good article on handling dpi changes:
Making the Web Bigger: DPI Scaling and Internet Explorer 8
Maybe this answer that I just wrote in other question about the same problem can help you