Image crop and combine with watermark on website - javascript

I need to develop a website that handles images.
The process will be like this.
The user takes a picture of an item.
The user uploads the picture to the website and set the area that will be cropped and submit.
The website crops the image and combines it with watermark and save it.(Preview function will be a plus)
Is the process doable and practical? Advise me, please.
Thanks.
Sam

A website is hosted on a web server - a full blown operating system. You can use any combination of technologies in the web server. Your backend code can call literally anything, so there are a million ways to achieve this based on the technologies that you're looking to use.
You should read up a little and decide what language you want to use for your image processing, what libraries in that language, and how you're going to access that language (for example, are you going to use CGI, external calls from .NET/Java servlets, or what?
Until you decide the technologies and libraries you're interested in using you can't get much help here.

Everything you mentioned is doable and reasonably practical.

Related

After Effects as backend movie engine?

I'm working right now on a project that could allow me to generate movies based on the user input. User will upload some samples (photos, movies) to the web app and web server should generate movie based on that input and some predefined movie compositions.
I know that there are plenty of libraries for ffmpeg that could let me connect movies, photos programmatically (for example https://github.com/schaermu/node-fluent-ffmpeg for node.js) , but I was wondering if it's possible to use Aftereffects for that purpose since I have some knowledge in that software. I imagine that there should be set of scripts in Aftereffects that could import user uploaded data, fire the movie renderer and save output to the given location.
Do you think this is achievable using Aftereffects? Or maybe someone had similar problem and solved that differently ?
Cheers!
I have done the exactly same thing.
I DO NOT suggest you use script to do it. I have made the same mistake. Script is fine for a small job, but when you try to use it on a web server and run constantly for days and days it's very unstable. You will be facing a lot of crashing.
I would suggest you use sdk to do the job. It's much more difficult to use sdk than using script, but is more stable and much faster! When you try to create a web service app, you want it to be stable and fast, don't you?
Yes, this is definitely possible. There are existing scripts for rendering and uploading via FTP, and the possibilities are pretty much endless. The part that jumps out at me as needing clarification is "scripts in Aftereffects that could import user uploaded data". This suggests a need for a back-end that "looks for" or "waits for" elements to "appear" in a directory to kick off the ExtendScript script in AE. This is where it gets slightly dicey in that you have to devise a way to do this with a "daemon" in your preferred operating system using any number of languages -- python, Java, AppleScript, shell, batch, etc. The rest of it ("import user uploaded data, fire the movie renderer and save output to the given location") could be done in ExtendScript.

How do I determine what technology has been used for a website backend?

just out of curiosity, I was wondering if its possible to determine what technology has been used for a website backend?
I stumbled upon this (http://propercloth.com/custom-dress-shirts/) website and was wondering what have they used for the image processing part where the shirt image is generated on selecting the desired fabric. Is it matlab or can anyone suggest any image processing technology which can be used to create a similar functionality?
Taking a look at the client server communication I strongly believe that this is a well prepared composition of images, not an automated search. So there's definitely no need for MatLab here, just a database, jquery, some server side scripting and a hell lot of images.
If you need live search of fabrics you might take a look at OpenCV (computer vision framework), TinEye (similar image search service), LIRE (library for sontent based image retrieval), etc.

Developing a simple web designer (drag + drop of text /w fonts and images)

I have a client who has requested I develop a simple web designer (ala CustomInk.com's t-shirt designer) which allows users to drag & drop text and uploaded images onto a canvas.
I have some ideas about getting started with javascript/jQuery but I wanted to ask SO: What is the most universally accessible way (in terms of browser support etc.) of developing an editor like this?
Does anyone have any advice/experience in the matter before I start fooling around blindly?
For cross browser support, your job will be much easier if you decide to use a Javascript library, such as jQuery. The big reason for this is because jQuery will encapsulate all of the difference between Javascript implementations between browsers. Writing this all from scratch is not really feasible.
So in your case, it sounds like you want users to select pictures and text, drag and drop them on a canvas of sorts. Then, what's your desired format for saving what they create? Are you trying to make a resulting image out of what they create?
To get started, I would check out jQuery UI. You can use the draggable and droppable functions for the front end, and when your users are done, you'll need to post the coordinates of their elements, text, and which pictures they're using, etc.
It seems like your biggest challenge is not making a pretty interface for this to happen, but instead, persisting what they create.
I've recently been working on something similar - you can check out the dev site here, and the js is not minified, so feel free to take what you want.
Initially I went for trying to 'render' the draft in SVG - this ended poorly, as browser support is still not that great, even using svg-web and similar libraries. I needed to do stuff like round text, and those features can really creep up on you.
In the end, I wrote a tiny python server (using CherryPy) that generates a png based on a set of querystring parameters using python-cairo. It takes serialized json object of 'text lines' and images. The png is actually the resource, and the function itself returns a 'render.png' filebuffer, so all you have to do on the front end is change the src attribute of the <img> tag and it will refresh. I added upload functionality to the "image processing" server, too.
Since I was already serializing json that contained all the information about the design, saving that in a database and loading it to edit designs was trivial.
I would definitely recommend a library like jQuery (which is what I used) to make development easier. I didn't manage to do much in the way of dragging/dropping, which is something I would probably try to do from the start if I was starting over. Feel free to email me if you'd like to see some of the back-end code or if you have any questions (my email is in my SO profile).
Jquery UI is the way to go, it provides drag and srop functionality and it's cross browser. Check it examples and documentations at http://jqueryui.com/demos/draggable/

resize, rotate, crop then save images online.... ActionScript or JavaScript?

Which is a better approach for this?
ActionScript3 or JavaScript+PHP?
And if anyone came across an open source tool with either I'd really appreciate it.. after a long search, the only good example i found was this http://www.ajax-image-editor.com but I'd rather have a flash alternative.. Also I don't need all the extra functions such as filters.
Thanks.
Flash and Actionscript would certainly have their advantages, but I know no Open Source solution in that field. In Javascript, there is the Prototype based Cropper. There is at least one more good open product out there, but I forgot the name.
This is more of a front-end technology choice. Neither Flash nor JS can store an image on the client side on their own. Both will behave like RPC clients, sending requests to the server to execute.
Whether you choose Flash or JS depends upon your needs (Flash would allow more manipulations than JS) and skills.

Is it possible to optimize/shrink images before uploading?

I am working on a web application that will deal with many image uploads. Its quite likely that the users will be in areas with slow internet connections and I'm hoping to save them upload time by compressing the images before uploading.
I have seen that Aurigma Image Uploader achieves this using a java applet or active x but it's expensive and I'd rather something open source or at least a little cheaper. Ideally I'd like to roll my own if its at all possible.
I'm developing on Ruby on Rails if that makes any difference..
Thanks!
Edit just to clarify: I don't mind if the solution uses activeX or an applet (although js is ideal) - I'm just looking for something a little cheaper than Aurigma at this stage of development.
Also, it may not be feasible for users to shrink the image themselves as in many instances they will uploading directly from an internet cafe or other public internet spot.
Generally, it isn't possible to write an image compressor in JavaScript. Sorry.
You'll need to use a plugin of some sort, and as you mention, other sites use Java.
It appears to be possible to write something to encode a JPEG in ActionScript (i.e. Flash), which will reach a much larger audience than the Java plugin you mention. Here's a link to a blog post talking about PNG & JPEG encoders in ActionScript.
Here's another blog post with a demo of an inlined JPEG encoder in ActionScript.
Only if you use Flash or Silverlight (only way to be cross-platform)
http://www.jeff.wilcox.name/2008/07/fjcore-source/ may be worth a read.
Without using applets or activex (only in windows) you can't execute anything on a client pc.
Probably not, but you can always insist that image uploads over x size will not succeed.
Is this an application where you can force them to insert a smaller image. In that case you could grab the size first to verify it fits standards. This is what facebook used to do with profile pictures. If it was too big they wouldn't take it.

Categories