As part of a project of mine, I want to write an image-viewer inside a webbrowser.
The images are extracted from video files on the server and sent to the client. The image should be displayed as is and not be scaled (unless the user explicitely chose to do so) by the browser, as this would distort the image.
This image illustrates the problem. The Win32-Application (with disabled DPI-Scaling) Shows a 20x20 image without any scaling (the black area). Chrome shows the 20x20 image (here a green image) scaled by a factor of two. What I want is that the image on the browser has the same area as the black square inside the Win32-Application, regardless of which DPI-Setting the user has chosen on his system.
To be clear: Serving the user an image with higher resolution is not an option. Neither is having the browser scale the image with different Settings acceptable. JavaScript-based solutions however may work as well.
I have not yet been able to find a solution to that problem.
I haven't found a way to disable it, but I found something to basically reverse the scaling. (source)
var factor = 1/window.devicePixelRatio;
document.querySelector('img').style.transform = 'scale(' + factor + ')';
I do not know how accurate this scaling will be and whether the image will still be rendered pixel-perfect. However, assuming the browser does some rounding internally before rendering, it should.
Related
I'm trying to display a quite large pdf on my website. Everything is exactly the same as the official demo, and it works well with the example file. But, when I used my file by adding ?file= parameter, the page refuse to redraw on any scale above 40%, so the preview looks blurry on normal scale (it still redraws when I change the scale from 20% to 30%, but when I switch to 100%, the page streches what it rendered in 40% into 100% scale, instead of rendering another image in 100%). The page size is 2766.8 x 2531.8mm (horizontal).
How should I modify the scripts in order to improve the maxium resolution to at least 100% ?
In most (but NOT ALL) web browser based PDF viewers, calls to Acrobat or a clone viewer like PDF.js will require "suggested" magnification set as a fragment #zoom.
The limits accepted are fixed in two places,
by the browser pdf extender range (often 8-6400%), and
the browsers own allowed range of zoom (often 25-500%)
It does NOT have to be respected, since user controls their PDF extender viewing preferences thus only IF the download can return to the browser inline frame, which it does not have to, it can be directed at an external application/pdf viewer without the #zoom respected.
Here is that example with requested actual scale (also zoom in #200 and out #50) for test in main stream browsers with PDF extenders that return downloads to Browser.
Each click is potentially a fresh download, unless the browser reuses the same local cached file, which itself can cause other problems, e.g. when user has go to same page, settings active.
Normally the #zoom is after .pdf e.g. sample.pdf#zoom=percent but note the value here is passed to the HTML worker.
http://mozilla.github.io/pdf.js/web/viewer.html#zoom=200
http://mozilla.github.io/pdf.js/web/viewer.html#zoom=100
http://mozilla.github.io/pdf.js/web/viewer.html#zoom=50
Remember the scale is NOT guaranteed, especially if users browser or device has over-riding zoom settings.
I've realized what happend after another day's work. In the original viewer.js, the resolution is not infinite. Instead, the canvas size is limited to 16M pixels:
maxCanvasPixels: {
value: 16777216, //16M
kind: OptionKind.VIEWER
},
For my case, I tried 256M pixels (since the png version of this file has 232M pixels). It does render a nice and clear preview with more pixels, but the rendering process runs very laggy and the browser itself is almost unresponsive.
I am building a web-based image editor, and everything seems to work fine until very large images are uploaded (>5mb), and then operations like adjusting the brightness using a slider takes a while to reflect. The issue is quite obvious, and that is because I have to loop through each pixel (step of 4) in context.getImageData().data in order to modify each pixel value.
I checked out a couple of already existing online image editors, and theirs seem to work pretty well without lags.
Initially, my first step was to resize the image to fit the canvas on the screen which worked fine without lags, but why I switched to modifying the original image size was because the original size does not change compared to the one on the screen which changes if the user resizes the screen (or if chrome displays the currently downloading bar at the bottom of the browser), and since it is constant, I can always keep track of all editing operations, and then display on the screen by basing scaling down to fit the screen.
I'd love to know how I can optimize for large-sized images, without losing the quality of the original (due to resizing etc). Thanks!
[UPDATED]
This was copied from a comment under this post.
"JavaScript is not suited for image pixels editing. That is what the GPU is for. Most image manipulation needs can be done using filters, standard 2D canvas as they use the hardware designed for the task. If you have custom PX manipulation needs then WebGL is the solution."
i have a panel that should be drawn floating over the normal html page.
This object is dynamically created on DOMloaded event and scaled to fit current screen resolution depending on the zoom level of page.
In order to obtain that we have to scale the element, because we fix the width and height.
The scale amount in not mobile friendly website is always bigger than 1. It seems to work in all browsers except for Safari mobile, in which the floating panel is blurry.
How can i solve this problem?
It is the device, not the browser. iPhones have retina displays, which, in plain words, means that the pixels are doubled. Fonts, borders and other CSS styles scale up fine, but images are stretched, that's the reason your image appears blurred.
The simplest way to fix this is to use a bigger image
Of course this has the drawback that well... you will be using a bigger image for all devices/browsers even if you don't need one. Of course, there are many other ways to handle this.
Here is a place to start:
https://www.smashingmagazine.com/2012/08/towards-retina-web/
http://www.mightybytes.com/blog/make-retina-images-website/
For a site, I need to be able to dynamically display background images depending on the user's screen resolution.
I.e when the page starts loading, within the <head> a small javascript loads, which sets the page's background via css to something like http://example.com/backgrounds/beach_800x600 where 800 and 600 is the screen resolution determined via the javascript.
I'm creating various resized images for the most common screen resolutions, so that for most people there will be an exact match of their screen resolution with an existing image. If there's not an exact match made, e.g if a user has a screen resolution AxB for which there's no existing image, then an image will be created & resized to AxB on the fly, and will be served. From then on, anyone with the resolution AxB would be served that image.
The questions I have are:
1) Is this a safe method? I.e I don't want more than 50 custom sized images created for custom screen resolutions. Would I be able to stay in that ball park with this method? And are there any other security risks I should be aware of with this method?
2) Should I give it an error margin of say 50 or 100 pixels, so if someone's resolution is 700x900, and I don't have that but I have 600x800 or I have 800x1000, then I would serve those existing images rather than create new ones? If so, should I set the margin at 100 pixels or is there a better number?
Through the use of CSS3 Media Queries and the background-size property, there's virtually no need for JS other than for compatibility purposes with out-dated browsers.
Here's a link with details about background-size. This property allows you to scale the image in various ways, regardless of the users resolution. Sometimes this might not be ideal.
And so we have CSS3 Media Queries. With these, you can target certain resolutions (or greater than and less than certain resolutions) and tell the browser which image you would like to show accordingly (or even how to display it, with or without background-size as well).
You would probably not want to create an image for each screen resolution, and you would probably want to base it off the browser window size - not screen resolution. Given that a window could be virtually any size, you might want to re-think this.
Also this can be done easily using CSS3 media selectors, not JavaScript (though it could also be done using JavaScript).
See here for some info about media queries http://webdesignerwall.com/tutorials/css3-media-queries
I have a web page which displays a large image, for example a page from a magazine. I have no control over the image size or orientation. It's possible that the image may need to be rotated by the user to orient it correctly.
Are there any Javascript or Flash solutions that will allow someone to rotate and zoom a given image? Ideally I'd specify a single image and the dimensions to use when displaying it. If the image is larger than those dimensions, the user could zoom in and view a portion of the image in greater detail.
I've seen a couple of solutions for rotating images with straight Javascript and CSS. Raphael would do the trick. There is apparently even an example featuring rotating an image. (it uses SVG but is support on all major browsers)
This one is not cross browser, but is an interesting exercise nevertheless.
As for flash rotation etc...
For rotating images, I used jquery-rotate and it works very well.
It is not totally cross-browser, it doesn't work with IE6 (and probably other old browsers).
For zooming, I guess you could make your own implementation using javascript, you can just resize the image (easy with jQuery).