I found how to overlay two already uploaded cloudinary images through the below query
http://res.cloudinary.com/demo/image/upload/w_400,h_250,c_fill,g_south/l_nice_couple,w_90,g_center,y_18,x_-20/coffee_cup.jpg
this is image
if we stripdown the above query the format is
http://res.cloudinary.com/demo/image/upload/
w_400,h_250,c_fill,g_south/
l_
nice_couple,
w_90,g_center,y_18,x_-20/
coffee_cup.jpg
in the above nice_couple is the one which going to overlay on top of the coffee_cup.jpg.
What i want is that both images which i am using overlaying mechanism has to be fetched from another url.
http://res.cloudinary.com/demo/image/fetch/
w_400,h_250,c_fill,g_south/
l_
nice_couple,
w_90,g_center,y_18,x_-20/
https://upload.wikimedia.org/wikipedia/commons/3/35/Sachin_at_Castrol_Golden_Spanner_Awards_%28crop%29.jpg.jpg
i was able successfully fetched one image in the overlaying mechanism through the above query. But if i try to change the nice_couple image to another fetching url it's not working
http://res.cloudinary.com/demo/image/fetch/
w_400,h_250,c_fill,g_south/
l_
http://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_Césars_2014.jpg,
w_90,g_center,y_18,x_-20/
https://upload.wikimedia.org/wikipedia/commons/3/35/Sachin_at_Castrol_Golden_Spanner_Awards_%28crop%29.jpg.jpg
That is an already pending feature request at Cloudinary.
At the meantime you can try to use auto-upload to have the overlay image lazily uploaded to your account when used within the transformation. For example:
mapping the "remote_media/" folder to "http://upload.wikimedia.org/ wikipedia/commons/" will allow you to use the following URL:
http://res.cloudinary.com/dcd0vnhxd/image/fetch/l_upload:remote_media:0:0c:Scarlett_Johansson_Césars_2014.jpg,w_30/remote_media/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg
Currently the "fetch" feature is supported for the main image only, not for overlays/underlays.
Related
I am building an application, on the front end there is there are a few fields, including a rich text editor (react-quill) that can take in an image. I have saved the values from the first page and displayed them back to the user for confirmation. In order to do so I used local storage in the form of formData as shown below
formData = {"questionTitle": "Here is a test field",
"questDesc": "<p>Here is the Image <img src=\"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcU.. />” }
My problem is after confirmation, I am trying to push the formData to MongoDB but I need to save the image (in cloudinary) separately from the database. How do I send the image to Cloudinary and instead save the URL in the MongoDB at the exact position that was inserted in react-quill?
I want to know if there is a better solution to my problem. Currently, the image is in base64 in local storage, is there a way to just refer to the route of the image while in local storage, and push it to the cloudinary after confirming? All pointers, and suggestions welcome!!
Using BIRT. Added Image in a Grid. Unable to put label and data fields over image in certain region. Please advise if you achieved it.
Thanks,
Yasar
I think all you can do is use the image as background-url. AFAIK this only works for images that actually come from an URL, but not for images that come from e.g. a database BLOB (but you might download the BLOB to a temporary file and use the file name as URL).
I have users who add images to a Strapi Media Library. I can't tell if images are actively used or not. I would love to clean out images taking up space that aren't being used. Is there a way to tell which images are used on the site and which images aren't?
in images objects in strapi there is a field "related".
it's an array of data that uses the file. returns undefined if not used.
if you can't see the "related" field populate your request.
In angular2 using aberezkin/ng2-image-upload
I have in my template
<image-upload
[max]="1"
[url]="uploadUrl"
[preview]="true"
[buttonCaption]="'Select Images!'"
[dropBoxMessage]="'Drop your images here!'"
(onFileUploadFinish)="imageUploaded($event)"
(onRemove)="imageRemoved($event)"
(isPending)="disableSendButton($event)"
></image-upload>
This is part of a larger form for an e-commerce site's product capture/edit screen including this image upload
It's all great for a new product and a new image but if I have to edit an existing product and thus have the data from the server for that product, including the image, how can I pre-populate image-upload with this image thus allowing a user to keep it or delete it/change it?
Also is there a way to filter file type allowed?
So you want to let user select the image and able to change it befor Uploading
I made a simple example of preview and uploading image I think it will be helpful for you
Preview and uploade image angular2
I know this question might sound a little bit crazy, but I tough that maybe someone could come up with a smart idea:
Imagine you have 1000 thumbnail images on a single HTML page.
The image size is about 5-10 kb.
Is there a way to load all images in a single request? Somehow zip all images into a single file…
Or do you have any other suggestions in the subject?
Other options I already know of:
CSS sprites
Lazy load
Set Expire headers
Downloads images across different hostnames
There are only two other options I can think of given your situation:
Use the "data:" protocol and echo a base64 encoded version of your thumbnails directly into the HTML page. I would not recommend this since you cannot then cache those images on the users browser.
Use HTML5's Web Storage to store all the images as records with the base64 encoded image data stored as BLOBs in a column. Once the database has downloaded to the users machine, use Javascript to loop through all the records and create the thumbnails on the page dynamically using something like jQuery. With this option you would need to wait till the entire database was done downloading on the end users browser, and they will need a fairly modern browser.
I think your best bet is a combination of lazy loading, caching with expires headers and serving images from multiple hostnames.
If the images can be grouped logically, CSS sprites may also work for you in addition to everything above. For example, if your thumbnails are for images uploaded on a certain day...you may be able to create a single file for each day which could then be cached on the users browser.
This is done by using what's called a CSS sprite; a single image with all the other images inside it, with the particular part that's wanted in the html selected by css.
See one tutorial at http://css-tricks.com/css-sprites
It sounds like you want something like SPDY's server push. When the client requests the HTML page (or the first image), SPDY allows the server to push the other resources without waiting for more requests.
Of course, this is still experimental.
You could try the montage command of imagemagick to create a single image.