I use react-native-remote-svg package to show my svg images. The problem is I don't know how to greyscale them. I already tried
https://developer.aliyun.com/mirror/npm/package/react-native-color-matrix-image-filters
but the filter make no changes on svg images.
I also tried https://github.com/gre/react-native-view-shot to change images to png and then apply the filter, still I was facing issues. The shot some times showed images correctly, and other times I all got was blank.
Note: I am trying to apply greyscale to images, not icons. So I probably can not change it to font either.
Any help would be appreciated.
Related
I have a xcode project and in the LaunchScreen I have added an Image View.
However, in different phone/phone sized, the image does not reflect properly. It seems that the image view is not dynamically fitting for all resolutions.
How can I get the image to show the same consistently?
So I'm new to React Three Fiber and loaded a .glb file exported from blender into my React website using React Three Fiber. But, when the model is rotating and it hits the side of the plant and computer you can start seeing white, blurry lines on the borders of my objects. I have tried for multiple days to get rid of the this, but nothing seems to help. Something to note is that this doesn't seem to appear to happen in blender.
Links:
Example image of blurry borders on Plant and Computer
The public
website is www.mahitm.com.
The Github file for the model.
GLB Model download link
Thanks in advance to anyone that is able to help me! If any additional information is needed, I'm more than happy to provide you with it.
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'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.
I am working as a graphic designer. They wanted me design some slider images on a page. But nobody knows the dimensions. I have seen that there are 4 different dimensions for an image when I inspect the page.
Large
Medium
Small
XSmall
So when you enter the website with a mobile phone Xsmall image appears..etc.
I have tried some ruler and responsive view extensions; but it didnt help me.
How can I find exact dimensions?
The exact steps might depend on what browser you are using. Here are some instructions for Chrome (they will be similar for other browsers):
Resize the window to get the image in the smallest dimensions.
Right click the image and "Inspect Element"
You will see a tab for "Computed". This indicates the computed CSS attributes for this image. From this view, you can read the height and width in pixels.
Resize your window and repeat this for each of the image sizes.
A more advanced approach: depending on how they implemented responsive web design, you may be able to view the CSS the page is loading, and look for #media queries which control the size of the image depending on the viewport of the browser. Read more about #media here.