I'm trying to do what I thought would be a super simple thing. I have users uploading images to my site, they can upload any images. I'm using a react carousel to render them. I noticed whilst testing that obviously images different sizes and this makes the carousel a bit weird when rendering them as it can jump between rectangles and squares. so I figured the best way would be resize all the images to the correct size. however, I'm having issues with this.
I've seen lots of answers online like so: resize image before upload using javascript
but I don't want to copy 50~ lines of code and just use if I don't know what it's doing. I searched for packages and found this: https://www.npmjs.com/package/jimp which looks perfect but I got some errors with this I couldn't figure out.
all I want when uploading them is to simply check if width != height and then resize to say 300x300. I am using firebase and I am using their resize image tool. again it's really good but you specify dimensions but I think it treats them as maximum rather than actual. obviously I don't want to lose image quality too and stretch the image. so I'm wondering the best way to achieve this.
Related
I have a Gatsby portfolio with a ton of largeish jpgs/gifs/mp4s, using react hook masonry. Because it's loading in columns there's an undesirable stuttering loading in effect, where the images sort of bump in and push each other down.
I want the jpgs/gifs/mp4s to fade in as they load rather than jump in and push the content around, but I'm not sure how to do that, think I'd need to program the aspect ratio in somehow. Note that I can't use Gatsby Image to calculate the aspect every time because I'm also using gifs and mp4s which are incompatible with Gatsby Image.
Here's how I'm using graphql to call the images from Gatsby, and I'm using Netlify CMS to host the media. Gatsby Image has an aspect ratio feature for jpgs only, but the documentation is sparse. Another thought I had is maybe I need to make a field in Netlify CMS that takes the aspect ratio, but that seems clunky.
if anyone has any tips I'd really appreciate it, thanks!
You should use gatsby-image to optimize your images. It has a lazy-load feature, so the pictures won't start loading just when they appear on the screen etc.
The aspect ratio thing you mentioned is also a feature of the gatsby-image plguin.
But anyway, the pictures push each other because they come in different size. You should use gatsby-image to "crop" the images or resize them.
Or you can put them in a container div which has fixed size in a given aspect ratio. Then you can simply put the images inside with a 100% width and auto height and object-fit property.
I used Highslide JS about 5 years ago on this site: http://wela.ctc.edu/academy12-13.aspx (example page). Now I'm redesigning the site use Twitter.Bootstrap and am trying to figure out how I can tweak the Highslide popups to work in a small device width. Is this possible or should I use find another solution to implement? I've played around with the setting parameters in my highslide-with-html.js file, but the results have been unsatisfactory. If it is possible to use Highslide in a responsive design, would be grateful for any URLs to look at.
The short answer is that Highslide adapts very well to small devices if you're opening images. The expander is purpose-built to do just that - display the image as large as it can without exceeding the boundaries of the viewport.
But when opening anything else - an expander with HTML content, an iframe, etc. - the expander must initially be a fixed size. You can put a resize handle on it, but that's not really good enough for handling everything from a smartphone to a large monitor.
Without rewriting Highslide JS, overcoming this limitation would require that your page do its own detection of the viewport size, then either modify the call to htmlExpand() on the fly, probably with some jQuery manipulation, or change the .highslide-html CSS class width. The latter approach (targeting the CSS) seems like it would be easier.
I am trying to build an application which serves images to a Deep Zoom MultiScaleImage dynamically. For example, when an image for a particular corner of the large image is requested, that image should be rendered automatically.
Rendering is what I will implement. But my code needs to be called when the MultiScaleImage requests that corner of the image. How do I implement this?
When I search on StackOverflow for this, I get results that explain dynamic generation of deep zoom images using DeepZoomTools. I am not entirely sure, but this is not I want. I want to generate images only when requested individually and not generate all of them on the fly.
EDIT: Let me give you an example that will explain one of the possible solutions to this, which I don't know how to implement.
If the MultiScaleImage requests the image 5/1_0.png, which if you know Deep Zoom will be the first image in the second column of the large image at 5th zoom level (not related to the real zoom value in deep zoom). When the DeepZoom requests this file, I want to generate it looking at the parameters I have, which are "5", "1", and "0".
#Salil: will do.
You could use routing (e.g. https://web.archive.org/web/20211020111718/https://www.4guysfromrolla.com/articles/012710-1.aspx) to direct the request to a Web Generic handler. Note that a generic handler is a bit more suitable than an aspx page as it doesn't have to do so much work with a page lifecycle.
We have a few icons in our WPF application. We want to do an animation, pretty much like a small beacon of light going around the edges of the animation, just endlessly going around it, and following the silhouette of the icons. We found a way to do it by manually creating a path around the icons and have the beacon follow that path (which matches the silhouette), but it's too much manual work because we have a lot of different shaped icons. We're wondering if there's a way for WPF to do this automatically, so we just have to program it once, and then using on the rest of the icons.
Any suggestion very welcome.
Thanks.
Edit
Something like this.
Gee. Isn't that overkill to use wpf animation capabilities for that? Can't you just create a bunch of small animations in Photoshop or using something else and just put them in?
Like animated .GIFs. the only problem would be that: if I'm remembering it right, WPF have problems with animating .GIFs as embedded resources. So you have to load them from the disk. Or you can have them as embedded resources, but you have to extract them temporarily to the disk and then load them into your app's window.
If you are using .NET 3.5 SP1 or greater and you are requiring a code solution instead of the animated GIFs, my suggestion would be a Pixel Shader. You would need to write your own Pixel Shader that does the following:
Detect the edges. http://www.codeproject.com/KB/openGL/EdgeDetection.aspx
Takes an input parameter that can be animated with a storyboard that indicates the position of the beacon. http://www.codeproject.com/KB/dialog/WpfParentWindowShader.aspx
Highlights the edge that is indicated by the beacon position parameter and returns the original color for all other points in the image.
If you haven't worked with Pixel Shaders I would recommend downloading the Shazzam Tool, http://shazzam-tool.com/. It includes an interactive development environment to create and test your shader on simple images and also includes a decent number of Pixel Shaders with source code to help you learn about them.
I have a lot of images taken from a 360 camera which I would like to be able to display in Silverlight 3. They are NOT regular panorama images. The camera which took the image actually creates a distorted jpeg that becomes undistorted once wrapped around a sphere as a texture. I have desktop software that will allow viewing of the image (not just side-to-side, but straight up, down, etc.) and I need to try to get the same functionality in Silverlight. It is very similar to Google StreetView.
What I think I need is to create a sphere, wrap the jpeg on the sphere as a texture, then put the "camera" inside the sphere. I doubt this is possible in Silverlight, but perhaps there is a way to simulate this?
So far, Google searches aren't bringing anything up. Can anyone point me in the right direction to figure out how to do this? Are there any existing projects that do this?
An example of a typical image is here.
These might help you out (probably not). They are 3d engines for silverlight, but they will probably wrap the image outside of the sphere instead of inside, which is probably what you need.
Kit3D http://www.codeplex.com/Kit3D
Balder http://www.codeplex.com/Balder
Another, possibly more promising option, would be to use javascript. So far you've probably researched how to do this in Silverlight, but you might do some similar searching for using javascript for this. There may be an option out there already, and since Silverlight can interopt with Javascript, you might be in luck.
Your gonna have to map the texture to a sphere then, like you said. But afaik silverlight 3 doesn't support hardware accelerated 3d.
So your options are:
Try and find a silverlight software 3d library (Like this)
Write your own software rasterizer (multi page guide)
Hope this helps
You might want to try cropping a window from the image and display it. if the user want to go right, move the window right and crop. if the user wants to go left, move the window left and crop. to zoom out, expand the window, to zoom in make the window smaller. if you move the frame far right then stitch the image data from the left side.
You might need to modify the image to eliminate the distortion, this shouldn't be too hard and depends on the camera lens focal length.
Don't try mapping the image to a sphere, it is much harder.
At https://hdviewsl.codeplex.com it says that HD View SL (Silverlight version) supports
"orthographic (2D), with wrapping for 360-degree panoramas"
Also you could try to port PtViewer source code to Silverlight from Java if no one else has
UPDATE:
VRLight might be the solution in your case:
http://vrlight.thecloudsite.net/
http://vrlight.thecloudsite.net/tutorial.html
http://ivrpa.org/blog/3651/vrlight_vredit_20
Its author (Jurgen Eidt) is also making cPicture (http://cpicture.thecloudsite.net/index.en.html), if you can't find him from the VRLight site, try from the cPicture one, or try from his blog at IVRPA website (http://ivrpa.org/blog/3651), which seems to have recent posts