In my app I allow users to upload their images. Upon uploading it goes into public folder, and in database there is only a direct link for future requests.
When displaying these images on the page I encounter a problem. Image component wants to know height and width of each image. And so I want to know it too.
What are the available options for the workflow in this situation? Both processing while uploading and while requesting will work for me.
You can use image-size npm module:
npm install image-size --save
then:
var sizeOf = require('image-size');
var dimensions = sizeOf('./sample.jpg');
console.log(dimensions.width, dimensions.height);
from: How to check an image dimensions using js or node
Related
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
I have recently downloaded Image Resizer .Net due to being interested in to what it has to offer, you can see three libraries in the link I have supplied, I've gone ahead and downloaded all of them.
Rebuilt the project, then navigated to my view and specified a width,height and mode for an image that's getting displayed as shown here.
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/q_80/#profilePic?w=50&h=50&mode=crop">
This URL is of a car its width is 402 and its height is 300, I want to resize is just to test the functionality, but it doesn't seem to change its size? could this be to do with the fact its referencing an external image?
Update.
This is the rendered HTML
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/cunaulfla05xjzb5y2fe.jpg?w=50&h=50&mode=crop">
I read your question again and notice the part that your trying to apply it to an external image. Image Resizer will not work with external images as the images is requested directly to the external repository. In order for the image to be able to be resized it has to be served by your hosting server's IIS, where your website (with Image Resizer) is installed.
Make a quick test with a local image and see if that works.
I'm Playing around with a cloud based front end developer called Jetstrap and Divshot. A bit confused as to how I'm suppose to code the PATH for css "background image" when using a web based software like this. Where do I store the image and how do I call it? I would like to preview the background image as I develop before export.
Since I cannot find any upload function on both site, I guess you can only assign an image that they can access that image via network.
You can do it as follows:
Click on an element.
Assign that element a class.
Click the 'Edit CSS' or 'CSS/HTML' at right-bottom.
Write the css rule for the class assigned at Step 2.
Screen Shots:
At the moment Divshot only supports external images. We plan to offer image uploading in the near future. I recommend using the Public folder or a shareable link on Dropbox to host your website assets for now. Copy the public link for the background image and use it as your background image path in the CSS editor:
After completing building a flex project in Flash Builder 4.5, the project was exported using the
File -> Export Flash Builder Project.
After which some of the images stopped working (get the broken image icon). This has left me clueless and even search on the internet did not give me good answers...
I get the same problem time to time. Probably compiler / Flash Builder bug. But to be sure, you might want to check some basic things. First off: check that you have correct image urls. Secondly, ensure you are not using absolute source paths (e.g. C:\workspace\project\src\assets\images\image.png). Instead use relative path (i.e. assets\images\image.png).
If these are correct, check your build directory (default build directory for release builds in FB is bin-release) and see if the images are compiled there correctly. As I said, for some reason my FB does not always compile all the assets correctly, so sometimes I have to move them in manually. That is, you can simply drag and drop them from the source directory to the bin-release directory (although if you are using svn, you should be careful with this as it might copy also the svn metadata).
Other solutions you might want to try:
restart eclipse / FB (maybe it's simply out of memory)
delete the project from your workspace and import it again with no project information
change workspace and import the project there
I finally found the answer... made all the images bindable and just used the class to tag the images.
for example... instead of
if (draggedImage.id == "Chris" )
{
newImage.source = "assets/Chris.png";
}
changed it to
if (draggedImage.id == "Chris" )
{
newImage.source = pic3_icon;
}
in datagrid I have an ItemRenderer (which extends UIComponent) which loads images based on a data value, eg:
_img.source = "assets/images/flags/" + value[dglistData.dataField] + ".gif";
When I run my application the images (flags) are appearing in the ItemRenderer. When I build and deploy the application into BlazeDS as an SWF file - the images do not appear. Instead there is the standard "missing icon" link that appears in Internet explorer.
As far as I can tell, my ANT build script includes the above directory "assets/images/flags/" and all the images into the SWF file.
Is this a relative path issue? Not sure, any help would be appreaciated.
Thanks
Mike
When you are assigning a path as source Flash Player is trying to load the images via HTTP requests. Therefore, embedding your images in the SWF has no effect.
There are two possible solutions. Either deploy the folder containing your images to the server and use the corresponding path as your source or embed all your images into the SWF.
A simple example for the second solution. The code assumes that value[dglistData.dataField] corresponds to one of the variables with the [Embed] metadata.
[Embed(source='assets/images/flags/Image1.png')]
private var image1:Class;
[Embed(source='assets/images/flags/Image2.png')]
private var image2:Class;
[Embed(source='assets/images/flags/Image3.png')]
private var image3:Class;
// access the image like this...
_img.source = this[value[dglistData.dataField]];