I am trying to use PhantomJS image capture to capture the image of the browser.
Each time I run the image capture function, the dimensions of the image is slightly different. Example, once I get 1400x5185, if I open the same url after few hrs, I get 1399x5185 or 1400x5186.
I have tried croping from left top corner, but then pixels are slightly skewed.
Note:The content of the page is always constant
How do I always ensure that I get the same dimension of image without copping the pixels?
Something probably changes on the page, otherwise there is no reason for PhantomJS to render different images.
You should check the differences of the images in detail. Ads are probably the culprit when they are not uniformly formatted. If you identified the changing DOM elements, you can use casper.evaluate() to access the DOM and remove/hide those elements before capturing the screenshot.
You could also change the viewport size to 1920x1080 for example using casper.viewport(). If the page is vertically scrolling, then only one of the y-direction might change. If you want to be sure, then change the viewport size to 1400x5187.
Related
I've been working on a node project with puppeteer.js for the last few months, but I have just started to use transparency in PDF files and have come across a real head scratcher...
What am I trying to achieve?
3 horizontally adjoined, semi transparent divs, rendered as part of a pdf via puppeteer.
What's the problem?
In html they display as expected. But in PDF a faint line appears between elements which I believe is to do with "stitching". I'm aware that this wont show in print, but I want to get rid of on screen. This is a mock up of some simple content which shows the behaviour I'm experiencing:
What have I tried?
Experimenting with Puppeteer params (antialiasing, flattening, color
flags like -webkit-print-color-adjust) - [Result: no change]
SVG elements with transparent background. [Result: lines still
appear]
A single div using a linear gradient with 3 block colors. [Result: Works when viewed in Acrobat, but has the weird effect in chrome where elements shift slightly to the right (pictured: top row - single div with linear gradient. Bottom row - black boxes used here as a guide for assessing alignment)].
SVG elements using a linear gradient. [Result: Same as above]
Flattening the pdf [Result: This does solve the problem, but degrades
the quality of the rest of the image, therefore not suitable]
I'm finding it difficult to find a solution as I'm not really sure where the behaviour is emanating from (the PDF, puppeteer, browser?). If anybody has any ideas, I'd be very grateful!
Thanks
I am trying to display a large matrix that is constructed of 0/1, each cell is a div which could be black or white, when trying to display matrix of size 1000x1000 the browser crashes...
I am using v-for nested with v-for to display it...
how can i improve the performance?
This is not a Vue-related problem, but rather a DOM related problem. You are putting over a million DOM elements on a page. A tab where I ran a test that generated a stable 1000x1000 matrix with empty divs and classes showed that it consumed 2.3GB of memory. It took quite some time to even render, and scrolling is very slow, which suggests that it is the browser that is having trouble here. Vue does not do anything in my test after having rendered the page.
What you can do depends on the use case. If you just want to display data in a graphical way, consider using a canvas. You can freely draw on a canvas, and since you do not have to juggle around a million dom elements, the performance should be much better.
Other techniques include lazy loading, where you use scroll position to only load/show the rows that are in the viewport. This will reduce the number of dom elements, which should increase performance.
Alternatively you can limit the amount of data that is served to the user, by providing a filter or something similar. If a filter matches too many items, you can cut it off at a certain number of items you know will render fine in a browser and show a message that some of the results are hidden for performance reasons.
My problem is three-fold. I'm going to try to explain as detailed as I can, because I've asked this question before and haven't gotten any clear answers.
What I'm Trying to Do:
I have diagonally shaped images, that I'm trying to make clickable, so I separated them out of the background image. They were originally one image, but I've cut out several pieces of the image and I want to align them identically to how they were in the original image. This might not the best method for what I am trying to achieve, and if there is a better way to make non-square areas of an image clickable, that would solve all of these problems. If not, here is my problem. The problem is, as soon as I align them in XML, I boot them up on an Android emulator or my phone, and they are aligned differently on both, differently than the preview and from each other.
Below is my example, and I'll try to explain what I mean.
The black and white grid is my background. The brown, red, and yellow lines are separate images. I don't want to just combine them with the background, because I need those lines to be clickable. I'd set a button behind them, but they are diagonally shaped and I need the entire shape to be clickable. However, they have to be EXACTLY where they are in the background, aligned specifically as they are to the background. The problem is, as soon as I load it on another device, it scales, and everything misaligns.
It also misaligns depending the device, so I presume it's because it's scaling the different parts differently.
I need a way to align it the way I want it, and have each image scale together.
How I've Been Trying This So Far:
Initially, I tried just using XML. And herein was my first problem. My background image is 1920x1080. It loads on the emulator without a problem. However, if I try to load it on my phone, I get the following error:
OpenGLRenderer: Bitmap too large to be uploaded into a texture (5760x3240, max=4096x4096)
So that leads to my first question. Why is my 1920x1080 trying to load as 5760x3240?!
I bypassed this, by using Picasso to scale the image to 1920x1080. As a sidenote, in addition to programmatically loading the image, I also am removing the title bar. Here is my OnCreate:
super.onCreate(savedInstanceState);
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_main_layout);
Picasso.with(this).load(R.drawable.backgroundimage).resize(1920,1080).into((ImageView)findViewById(R.id.background));
On the XML side, I've tried all sorts of different things. Relative layouts, linear layouts, frame layouts...None seem to scale the separate imageviews the same.
Which leads to my second question.
How do I scale two differently sized imageviews together, so that they maintain their alignment on different sized devices?
My second imageview is 198x547(this would be the equivalent of one of the squiggly lines in the example images) and even setting that in Picasso does not maintain my alignment. In fact, that doesn't seem to work at all, since I have to scale it differently to even match the alignment I have in the original image.
Summary Questions
I need a diagonally shaped portion of an image to be clickable. Is cutting the shape out as a separate image the appropriate method for doing so? If not, how do I make such a specific, non-square area of an image clickable?
I need specific alignments to scale together. Why aren't they?
Why does my png file upscale itself?
I am creating a simple photo filter app for OS X and I am displaying a photo on an NSImageView (actually two photos on top of each other with two NSImageViews, but the question still applies for a single view too). Everything works super, but when I try to resize the window that contains the NSImageViews, the window (which also resizes the NSImageViews) resizes very slowly, at about less than 1fps, creating a negative impact on the user experience. I want resizing windows to be as smooth as possible. When I disable resizing the image views, the window resizes smoothly, so the cause of the slowdown is those NSImageViews.
I'm loading 20-megapixel images from my DSLR. When I scale them down to a reasonable size for screen (e.g. 1024x768), they scale smoothly, so the problem is the way NSImageView renders the images. It (I assume as the result of this behavior) tries to re-render 20MP image every time it needs to redraw it into whatever the target frame of the view is.
How can I make NSImageView rescale more smoothly? Should I feed it with a scaled-down version of my images? I don't want to do that as it's a photo editing app that also targets retina display screens and the viewport would actually be quite large. I can do it, but it's my final option. Other than scaling down, how can I make NSImageView resize faster?
I believe part of the solution your are looking for is in NSImage's representations. You can add many representations to an image with addRepresentation: I believe there is some intelligent selection done when drawing. In your case, I think you would need to add both representations (the scaled-down and the full resolution bitmap) to NSImage. I strongly suspect drawRect: should pick the low resolution version. I would make sure "scale up or down" is selected in NSImageView, because the default is scale down only, which may force your full resolution image to be used most of the time. There are some discussion in Apple's documentation regarding "matching" under "Setting the Image Representation Selection Criteria" in NSImage, although at first sight this may not be sufficient.
Then, whenever you need to do something with the full image, you would request the full resolution image by going through the representations ([NSImage representations] returns an array of NSImageRep).
How does Safari determine what size to output an svg in the following scenario;
SVG code
viewBox 0 0 800 800
height 100%
width 100%
css
svg width 100%
containing div width 60%
Safari outputs a much smaller svg than the 60% of screen, ok this is a bug. But what determines the size of this smaller svg, it has no connection to anything I can think of.
Just to give some background info. Safari needs both width and height in px for it to do what you want. % don-t work. But it does output the svg, and so it must make a decision somewhere about its size.
It's not a bug you're seeing. That's the correct behavior. The browser by default scales the SVG viewbox (careful with the terminology now, we're not talking about the browser viewport) to fill the CSS-determined dimensions of the SVG element. The fill behavior is determined by the SVG preserveAspectRatio attribute. By default it's set to meet, which keeps the whole SVG viewable, and the aspect ratio preserved. The alternative is slice which scales the viewbox up to cover the element, even when that means cropping. (slice behaves similarly to background-size:cover in CSS3.)
What you need to do is:
a) Don't declare explicit height or width in the SVG file. If your graphics editor is generating them, just go in by hand and delete them. According to the spec, if no width and height are specified, a value of 100% is assumed, so your pseudocode is redundant at best.
b) Make sure you're setting an explicit height for the svg element in CSS. I recommend developer or Canary builds of Chrome for troubleshooting responsive svg sizing, as there is a bug in Chrome 18 Dev Tools that has since been fixed. Once you've got it working in Chrome, it will almost certainly also work in Safari.
c) Figure out how you want to set preserveAspectRatio and manually edit the svg to put in the declaration.
If you're still having trouble, please post a jsfiddle. It's much easier for other people to comment on.