I am working on a react project in which we generate new images by fitting uploaded image in a tv screen, or laptop screen or mobile screen. So what I want is a way in which I can place the uploaded image into this below image
In the black tv screen I want the uploaded image to fit and below there will be download option to download the uploaded image.
I searched for that and came across cloudinary react library. So I wrote this code to somehow fit an image inside this image but I can't seem to find any way to download that image.
If you have any idea of doing this please share with me.
Thank You in advance
You can overlay images on other images without having to use a particular Cloudinary SDK, as outlined here: https://cloudinary.com/documentation/image_transformations#adding_image_overlays
You can then place them more specifically using x and y coordinates in the URL as outlined here: https://cloudinary.com/documentation/image_transformations#placing_overlays
Once you have generated an image with the overlay positioned correctly (and with any other transformations you may wish to process), you can download the generated image as normal.
Related
When I read the docs of strapi v3, I found that there is an option that produces responsive images, means that when we add an image, it produces other sizes in the public/uploads address of strapi directory. That feature works in my project and when I upload for example an image called figure-1-1.png, it produces some other images with different sizes in my upload folder.
But how can I use those other images in my contents? For example suppose that I have a content that uses "rich-text". In that content when I use image icon in the editor, it inserted a link of the main image to my content like below:
So how could I benefit from other sizes? How could I use them in strapi that for example in mobile resolution the smallest size is used? Is there anything that I misunderstood?
I'm wondering, if anyone had a similar problem with Strapi, while uploading photos in webp format to Strapi, changes colour of background. In every point of photo (background) is a different code of colour like #FEFEFE #FFFDFF #FEFDFF. Here you can see -https://gopos.pl/test/terminal-pos-android-15-posnet-thermal-xl-online-posnet-skl-gopos-pro-12 - first photo with hardwares in cover section. If I upload it in jpg there is no problem with background, but in webp format something happens. I wanna mention that when I convert photo from jpg to webp, there is the same white background before uploading to Strapi.
When you use Mac or others computers with new screens, its not that visible like on old ones.
The website is made by react, nextjs.
Do you know any solution for it? Thank you!
I'm using this code to download the image of an uri and then pass it to the function that opens Instagram like a UImage.The problem comes when I try to share another image, the application gets me the last image that I use, and not the one that I'm downloading or selecting, and I trying to delete this local file, but I can't remove it.
https://learn.microsoft.com/en-us/answers/questions/577839/sharing-image-on-instagram-ios-something-get-the-l.html
I have got the reference of getting the panorama image by panoid but its giving me only the thumbnail image but I want an original panorama image directly from streetview.
The link is given below what I have got
http://cbk0.google.com/cbk?output=thumbnail&w=500&h=500&panoid=-_0l0tU3lKz0JtaEsqJk7w
Please help me out to get the original panorama image not the thumbnail.
While there is no official API to download the full panorama. There are many tools that you can use.
Windows Tool:
http://www.purebasic.fr/english/viewtopic.php?f=27&t=50248
NodeJS:
https://www.npmjs.com/package/extract-streetview
https://github.com/mattdesl/google-panorama-equirectangular
Chrome plugin:
https://chrome.google.com/webstore/detail/pano-fetch/ggmfokbjchlhboclfngkneflhkopebbh?hl=en
Note: The thumbnail url that you are using is also an unofficial way. You should use their API to load streetview thumbnail. Please refer: https://developers.google.com/maps/documentation/streetview/intro
I am using ngImgCrop directive to crop images in my application. As a first step, the actual image gets uploaded to the server as soon as the user selects it. The second step is to crop it. I need to know the coordinates of the cropped image to send it to server so that it crops the image based on the coordinates.
Is it possible to get the coordinates of the cropped image? Please let me know
You can do the cropping in the browser before it gets uploaded, I have done it using Danial Farid's angular file upload
https://github.com/danialfarid/ng-file-upload
and ngCroppie,
https://allenroyston.herokuapp.com/access/acr-croppie/
It's a wrapper for Foliotek's Croppie
http://foliotek.github.io/Croppie/