Following the example here https://github.com/firebase/functions-samples/blob/master/generate-thumbnail/functions/index.js
How do I notify the client when the image is processed?
I want to have a form upload a photo and resize it to multiple sizes. How do I let the client know when the the cloud function is finished?
I'm using firebase/storage to upload the image client side, then I have a could function listening for files to be uploaded functions.storage.object().onFinalize and processing/resize the images. Is there a callback to the client when the cloud function is finished or to I need to setup pub/sub?
Your ultimate new images (the small ones - or whatever they are), would have some URL, let's say storageCompany.net/123123123123.jpg
So in your realtime Firebase, you will have some location that gives these URLs.
So maybe something like ..
user/NNNN/photos/thumbnails
so to be clear, you might have
user/NNNN/photos/thumbnails/726376733677.jpg
user/NNNN/photos/thumbnails/808080188180.jpg
user/NNNN/photos/thumbnails/363636636636.jpg
and now you're adding
user/NNNN/photos/thumbnails/123123123123.jpg
So indeed, your apps would simply watch for new items (ie, strings - the URLs) appearing in that location!
Just to be clear, let's say you have an ios or droid app that shows "any sort of images", and this is a Firebase project.
So, in your example is "thumbnail images" which are "created by a server".
But it just doesn't matter what sort of images you are showing.
In a
Firebase project, which
"Shows images"
The basic idea is simply what I explain above - you just have, one way or another, a Firebase location which has "the URLs of the images"
It's that simple!
Once the image is "ready" - no matter how that happens - upload, image being generated by 3D software .. whatever ..
That's how you make a Firebase project "with images". iOS, droid or www.
Of course there are many variations. In this example ..
we have a big folder with many "images". each "image" has many fields, including various actual image URLs (thumbnails, big thumbnails, videos, etc etc)
Precisely as you ask, the "thumbnail" (say) URL only appears when that image has been created and upload to some storage URL!
Enjoy
You will have to arrange for an exchange point between the client and your function. Typically, that will be some known location in the database where the function will write the result, and the client can listen for changes to know when the work is complete.
The example you're using will need to be modified to allow the client and server to agree on a unique location ahead of time.
There are two problems with Firebase image resizing - (1) it's tricky to notify the client once the image resizing is complete, and (2) you never know which exact size the client-side app may need (assuming you're building a responsive app).
These two issues can be solved by using a dynamic image resizing approach. The client app can upload images directly to Google Storage (via signed URLs and PUT requests), once the upload is complete it can request the resized image(s) right away. For example:
https://i.kriasoft.com/sample.jpg - original image
https://i.kriasoft.com/w_200,h_100/sample.jpg - dynamically resized image
The resized images can be cached in both the Google Storage bucket and at CDN.
$ npm install image-resizing --save
const { createHandler } = require("image-resizing");
module.exports.img = createHandler({
// Where the source images are located.
// E.g. gs://s.example.com/image.jpg
sourceBucket: "s.example.com",
// Where the transformed images need to be stored.
// E.g. gs://c.example.com/w_80,h_60/image.jpg
cacheBucket: "c.example.com",
});
https://github.com/kriasoft/image-resizing
Related
Here is the example image url I found on Steam.
https://steamcommunity-a.akamaihd.net/public/shared/images/header/globalheader_logo.png?t=962016
The image url gives the same result with or without the ?t=962016. What is it called? And what does it do?
?t=962016
This is a technique to disable browser caching, browser sees it as a new url, and fetches the resource again from web server. The resource can be image, css file, js file etc. This is the most common use case, but can be also used differently by the web server.
There is another use case also. I have done this one of my project.
I have a made all requests to *.jpg handle by a php script.
Eg: mysite.com/user/avatar.jpg?id=100
avatar.jpg is actually a php script which takes the query param (in this case the id 100) and returns the correspond user's avatar (user with id 100). Browser see this as an image. Another advantage is we can disable hot linking directly to this image, as the script can check if the request is originated from the same domain.
IMO there is 2 possibilities
- They put that parameter to avoid the image to be cached, the value of t is random in this case
- The image can be generated by a script, in this case the value of t is the id of the image.
Firebase storage looks very cool and easy to use, but I'm wondering if there's a way to resize an image before uploading it to Firebase Storage, e.g., run a proccess using ImageMagick in a server and then run the uploading process using Firebase SDK but I notice there aren't storage functions for Firebase SDK Server.
You can also use Firebase Storage + Google Cloud Functions to upload an image, resize the image (using ImageMagick or similar), and write it back to Firebase Storage.
I have an example using these together here (though I trigger the Cloud Vision API, rather than an image resizer).
A quick side note: Firebase Storage doesn't have a Node.js client, instead we recommend using the GCloud-Node library.
Resize using JavaScript Client-Side-Processing
We're using JavaScript resizing, which uses clients device processing power to resize the image, and works GREAT, saving us space and money, saving the netwrok unnecesary bandwidth, and saving the client a bunch of time and also money in most mobile cases.
The original script we are using came from here, and the procedure to use it is as simple as this:
<input type="file" id="select">
<img id="preview">
<script>
document.getElementById('select').onchange = function(evt) {
ImageTools.resize(this.files[0], {
width: 320, // maximum width
height: 240 // maximum height
}, function(blob, didItResize) {
// didItResize will be true if it managed to resize it, otherwise false (and will return the original file as 'blob')
document.getElementById('preview').src = window.URL.createObjectURL(blob);
// you can also now upload this blob using an XHR.
});
};
</script>
I believe that guy (dcollien) deserves a LOT of merit, so I would recommend you to vote his answer up.
You could also use Firebase Storage + the official Firebase Resize Image extension:
https://firebase.google.com/products/extensions/firebase-storage-resize-images. The downside here is that "To install an extension, your project must be on the Blaze (pay as you go) plan". Bc basically what it will do is spin up a Firebase Function App for you, and it'll get triggered every time you upload a file to the path you specify. You can configure things like the desired size as well as the format or if you want to keep a copy of the original file or not. Good thing you won't need to worry about the underlying implementation.
I am using Liip ImagineBundle for managing the pictures in an auction listings project. The setup is as follows - when an auction listing is being created I am using Plupload to upload the picture set (with AJAX prior to persisting the auction). The pictures are uploaded into /pictures/temp folder with a temporary hash name. Upon persisting the entity, a Doctrine Subscriber renames the uploads in the temporary folder to use a format:
{AUCTION-ID}-{SIZE}-{TIMESTAMP}.{EXTENSION}
where the size is the version of the image - XL, large, medium, etc. and based on the timestamp creates a subfolder as:
/pictures/{YEAR}/{MONTH}/{DAY}/{PICTURE}
This allows for preventing millions of pictures to end up in a single folder and slow the file system. I am using a custom file loader and cache manager to resolve the pictures based on the timestamp. It all works perfectly fine but I have a request to display the uploaded pictures in a preview while doing the Plupload. The problem is in the resizing and caching with the ImagineBundle. What I would like to achieve is have the uploaded picture (the {HASH}.jpg in /pictures/temp) be resized to a specific size and at the same time a thumbnail to be generated off that as {HASH}-thumb.jpg. I know I can make it with another file loader and a cache manager but I was wondering whether it is possible to done via the bundle in some other way which is simpler as both these files are temporary ones and will be deleted upon the creation of the auction.
I am looking to re-design the Login page. I need to add a new background image. Let me know where should I be copying this image into the project and where should I be specifying the image reference. I see the change made directly into Login.html are not reflecting in the output.
There are two logos in Maximo Anywhere, ibmLogoDark.png and ibmLogoLight.png (for the light and dark backgounds). You will need to obtain suitable replacement (transparent backgound) logo gifs or png files from your customer, of an equivalent size.
The IBM logo image files are in:
\MaximoAnywhere\apps\WorkExecution\common\js\platform\ui\control\images\mdpi
and also in:
\MaximoAnywhere\apps\WorkExecution\common\idx\mobile\themes\common\idx\images
So that is where I put copies of my customers replacement logos.
You'll want to give them different names from the IBM logos just so they don't get overwritten so easily. There are 4 CSS files you need to update to the new name:
about.css, launch.css and login.css in:
\MaximoAnywhere\apps\WorkExecution\common\idx\mobile\themes\common\idx
and mdpi.css in
\MaximoAnywhere\apps\WorkExecution\common\js\platform\ui\control\css
There are also two app.xml files you need to update to point to the new names. One in each of:
\MaximoAnywhere\apps\WorkExecution\platform-artifacts\dialog
and
\MaximoAnywhere\apps\WorkExecution\platform-artifacts\login
Then rebuild and you're done. Oh, and make sure you clear your browser cache (or use incognito mode) to test.
I'm attempting to modify an inherited project that has a convoluted process of displaying uploaded images using an ImageMap control.
The current process inserts a new database record with image file name as well as model number and part number. The image files are saved to a virtual directory visible to IIS. Each part number has a corresponding .htm file containing an image map referencing the uploaded image. The image map has to be sized for each part and saved in the file system.
How can I streamline this process using either client side or server side controls? I'd like to bypass use of image maps as they require manual sizing. Can a control be used that auto sizes the image? Should the images be stored inside the database or kept in the file system?
Thanks for your advice;)
Storing the images in the database is IMHO a much more scalable solution.
Take a look at the Image Resizer project and its associated plugins for a way to resize the images, regardless of where you store them:
http://imageresizing.net/
http://weblogs.asp.net/bleroy/archive/2011/10/22/state-of-net-image-resizing-how-does-imageresizer-do.aspx
http://nathanaeljones.com/163/20-image-resizing-pitfalls/
You could use regular ASP.NET controls to display the images, for example, a ListView.