I'm working on a Lambda function which fetches images from a Google drive and uploads it to S3 bucket.
The format of the data I'm working with is a Buffer and when I upload it to S3 bucket the size is 2.8mb. However I need to compress it to be under 2mb. I can't seem to find a suitable library which can handle this server side.
Any advice?
For compressing images and storing it, you may use Jimp which is an image processing library and provides all the facilities you're looking for.
For reference, you may go to this documentation
I wanna enable users of my web app to upload videos with a maximum lenght of 10s and cropped/scaled to a certain resolution. There for users should be able to trim there selected video to 10s before uploading it with a simple editor.
Is there any library or examples enabling client side video editting to cut video length as well as croping before uploading it to a server? I found some canvas approaches for filters, single video frames and export to webM videos but nothing bringing it all together. So anyone done that before?
Apreciate any ideas :)
Tipicaly video processing is a server thing because it's easier to find and run complex (often compiled) libraries (like ffmpeg) there than in browser and it may cause less performance problems for end user. Anyway I think there are two options:
1. Process video on server - send file and configuration
The first approach assume that you prepare client side "editor" based on canvas which simulate video editing. After setup of all filters, crops etc. the client might send original video file and video processing configuration which would be used on a server to do the same thing
Depends on which language you prefer on backend side implementation might be different so I don't give you ready snippet of code.
Of course you can switch order of tasks and upload original file at first place then smiulate video processing on client side and after all send mentioned configuration to backend and process video.
2. Process video within WebAssembly
If you really need to keep everything on client side you can try with WebAssembly ports of libraries like https://github.com/ffmpegwasm/ffmpeg.wasm and send already processed video file to server.
I have a server-side command defined to receive images uploaded with TinyMCE (file upload or drag-and-drop). I have the image in my hands as a binary which I then write to my server.
I was testing with this image taken with my iPhone. The original photo was 3024 x 4032. In the editor we can resize, but still the original 4.9 MB image would get saved on the server side. I was thinking there are probably server-side scripts we can add to rescale/resize it. Anybody know of any that can be used when saving images?
The image is a binary, and might be JPEG or might be PNG. It even might be GIF.
For this example, I used Preview on the Mac to resize my picture to 500 pixels wide before uploading, which reduced the size to just 191 KB. It would be great if this could do that using JavaScript once I have the image in hand. Any thoughts? Thanks.
It turns out my (not very standard) server has some built in commands to rescale and optimize image binaries. I added those to the backend upload processor and it works great. It makes editing a lot easier, saves a lot of space on the server, and email notifications containing the images open much quicker. So this issue is good for now.
My answer won't be of any help to a user using an ordinary Apache/PHP server though. But I imagine there are lots of libraries for those.
I have a requirement where I want to show the file preview to the users.
There are various file types which are supported like; .pdf, .xlsx, .doc, .rar, .jpeg, .png and many more.
When user clicks on the preview it should open the file in popup where preview of the file is shown to him. User can Zoom-in, Zoom-out, Download the file. Just as you can see into gmail for attachment preview.
Please, can anyone guide me to any relevant library or helpful resource for the same.
Thanks in advance
There are two main ways you can do this.
1) Server-side: Render previews once server-side (on file upload) into jpg/png images, and store the previews on the server. This is the easiest to implement on the client side, but requires extra storage on the server.
2) Client-side: Render the previews 'live' with javascript in browser, this reduces the amount the server has to do/store, but does require the client to fully download the file in-memory before it can render the preview, which for large files could be an issue. Also, you would need javascript libraries included for likely each individual file type, since most libraries will target one specific file format.
Server-Side is probably the recommended way to go. What are you using for your web server?
You are looking at creating document viewer.
Belive me its big work as browser does not understand these formats. Browser can render images directly on canvas but it does not know how to render the other files. So, any file other than image formats, one need to save them temporarily on server and then stream on the browser and show them using the respective file viewer.
You can convert doc and xlsx files to pdf and show these files using pdf viewer (http://ngmodules.org/modules/ng-pdfviewer). There are plenty of document converters available on internet (however you will need to check the licensing terms as most of them are GPL licensed, hense can not be used in commercial projects).
If you want to save this work then go for third party server those take all paint to convert documents in html5 such as https://crocodoc.com/why-crocodoc/
You can also try using google doc viewer google doc veiwer
This question is fairly broad. I'm not going through all the steps of how to implement an attachment viewer directive, but here are some pointers you might find useful.
To allow the user to download the file, you simply put a download link somewhere. If you are hosting the attachment on Amazon S3, Google Cloud Storage or some other cloud storage service, check their documentation. If you're downloading the files from your own server, make sure to set the Content-Disposition HTTP response header to attachment; filename="ORIGINAL_FILENAME", where ORIGINAL_FILENAME is the file name you want to user to see in the save dialog that appears when they click the download link.
Now on to the viewer.
For PDF files, I'd use pdfJS. There's an angular directive for it here.
You could look at something like CloudConvert for other files, to convert ehm to a PDF, and then displaying them in pdfJS, but then you probably want to store the PDF on your server as well, in addition to the original files, which requires extra storage. You might also be able to use the Google Docs viewer, or Office 365 viewer, as described in this answer.
I'm developing an artist portfolio website and displaying a lot of paintings on it organized by collections. To speed up loading time, I'm looking for a progressive image compression format that would allow me to decompress and render on the fly a picture such as I can render it at scale .5 when half of the picture data has been received.
I know JPEG has a progressive option, but I didn't find out how to transmit and decode it partially (I think that's the browser job, but then again I read that not all of them support this feature so I don't know where to look to find an example).
The idea is to be able to serve pictures that have just the resolution the client need without having to store differents scaled size of the same picture on the server and witout the need for the client to download the same picture twice each time (original and thumbnail).