Flash based cropper like this, but with source or customizable? - javascript

I am looking for a Flash based image uploader with resize and possibly rotate function.
I have checked many possibilities, and the very best in simplicity and unser experience I found is Kroppr at a very affordable €29/license.
The downside is, it comes with encrypted PHP code to bind the product to a subdomain. That is understandable, but while I'm perfectly happy to pay money for a tool as great as that, and ready to sign all sorts of legal agreements to protect the license, I am not ready to use encrypted PHP code, especially not from an outlet that doesn't even have a postal address on its web site.
Does anybody know an Open Source or commercial solution that comes close to Kroppr and ships with source, or allow for full customization and free definition of the server-side backend?
The features in detail:
Rectangular selection to crop image, slider or similar to zoom
Optionally: Rotating
"Accept" and "Reset" buttons, "accept" triggers a call to the server and submits the image
Full visual customizability (at least background and text colours)
Possibility to rename all controls
The server side technology would preferably be PHP.

http://deepliquid.com/content/Jcrop.html i love this one, every easy to use and tons of features. i know your searching a flash cropper but this question is tagged with js too so....

I found these three image utilities during my search:
Flex Image Cropping Component
HOW TO CROP AND RESIZE AN IMAGE USED AS BACKGROUND FOR CANVAS
Building an image-viewing widget with ActionScript 3.0
The first one is an open source flex component using an MIT license. The second one is a how to,with full source available. It doesn't have a sizable box, but it seems ok otherwise. The last one is also a how to article from adobe.com with source available.

Here is a list of good javascript based croppers:
Yahoo! UI ImageCropper
Jcrop
MooCrop
UvumiTools
PHP & jQuery Image Upload and Crop
Here is a list of action script based croppers:
Flex Image Cropping Component
Image Crop

http://www.adylevy.com/index.php/2009/07/22/multiple-files-uploader-with-preview-on-client-side/
OR
http://www.resize-before-upload.com/
...took a bit of searching =)

I would take a look at the free pixlr editor and their developers API : http://pixlr.com/wiki/developer

I've used RadActive's I-Load component before, with great success. The UI customisation options are a little limited, but as far as functionality goes, I'm pretty sure it meets all your requirements.
EDIT: You don't specify what server-side technology you're using (if any). I'm pretty sure I-Load is designed for ASP.NET - this may or may not be an issue for you.

This is also a nice once and its only $10.

http://www.shift8creative.com/projects/agile-uploader/index.html
Still doesn't have image rotation/cropping. I most definitely do plan to add that, but after checking out all the things I could find I still wasn't happy. I researched out all the particulars and just ended up building my own. You're welcome to use it if you like and haven't found something else by now. Keep checking the link, I'll update it to include the rotation and crop feature along with multiple image uploads.

Something like this?
http://matrixoft.infunity.com/agents/calvin/tmp/forPekka.html
I'm perfectly happy to pay money for a tool as great as that
To carry out the responsibility of posting the answer for stackoverflow users, here is part of the crop image code:
var tNewImage:BitmapData=new BitmapData(mouseX-vCropX,mouseY-vCropY,true,0);
iImg.getChildAt(0).x = vSize/2 -vCropX;
iImg.getChildAt(0).y = vSize/2 -vCropY;
tNewImage.draw(iImg);
Where iImg is the movieclip containing the image with the image center positioned at (0,0) , vSize is the image dimension, vCropX and vCropY is the top left cropping coordinate. The tNewImage BitmapData is used for constructing the new Cropped Bitmap image

Related

AR.js to show png hanging on the wall

I have an e-commerce website where I sell illustrations from different independent artists.
I have an idea where the user turns on the camera and see how a poster (png file) looks in their wall, using the web browser of their mobile.
Is this achievable with AR.js or this is something achievable only with a native mobile app?
If so, could you share some guidance for me to start looking into?
Thanks you all!
Yes, you can, using a browser and webcam, and of course some JavaScript.
One way is to have the end user print out a marker with a defined pattern that you can then replace with an image. The Image Texture example at this URL on GitHub contains almost exactly the code you want, running in a browser.
With ARjs you can only do it if the user has a marker on their wall. You can have the users printing markers as part of your user journey. I think a better solution for you will be model-viewer. Model-viewer can recognize surfaces and add your models to this surface, the problem is that if you want to present a png, you can't. what you can do is convert this png to a 3D model (just a plane really) and present that.
You can also check out echoAR (full disclosure - I work there), and see if there are any solutions that work for you with ARjs/ model-viewer.
Hope it helps.

How to create an online drawing application

I've tried to ask this question before, but I failed completely there. After useful input, I decided to leave that one, and to try again.
I'm looking to create a web-based application where users can draw images built from a set of pre-defined icons. There is a need to be able to save the final image (encoded jpg/png), and also save a "current setup" that can be re-loaded later for further editing (a "settings" file?).
My question : What would be the best approach for this matter? Flash+AS3? HTML5+JS? Something else?
For better understanding of what I want to create, here are 2 screenshots that illustrate in what direction I'm thinking:
The drawing application (made in Flash): http://imgur.com/U4GNKJF
The final created picture: http://imgur.com/aCtxwo1
Thanks in advance, and I really hope I've made my question more clear this time.
Since you need advice...
Draw your icons in some art software (even online) and save as transparent PNG's
Look-up HTML5 Drag & drop tutorials that involve "Canvas". You'll want to meaure the positions of objects dragged (mouse position on Canvas) and their order. The drag function could update a JSON String (this hold entries of items, type, position, etc)
Look-up How to save JSON as text file, also how to parse text file as JSON. This becomes the "settings file".
To save images best use PHP language code. PHP must be installed on the server (most have, or is installable or else get a better host). There are tutorials on how to save an image with content from "snapshot of Canvas"
flash is unsupported on IOS and android mobile browsers and google is giving a lower index to websites using it.
I would use javascript with HTML5 canvas with PIXI.JS ,CreateJS or PANDA.JS.
These libraries make it easier to create the canvas elements you need (draggable objects, buttons ) from sprites and adding event listeners to them.
And drawing graphics on the canvas (lines, shapes).
Since you have a lot of sprites you can pack them in a spritesheet with TexturePacker for faster loading ( and PIXI works great with spritesheets).
You can package this web page to android/ios with phonegap,ionic,crosswalk, cocoonjs etc ( i recommend ionic + crosswalk webview it gives great performance)
for saving i would also use a json file to save the setting . You can use PHP to load and save it.

Tickets places selection with JavaScript

I need to write an web page where users can select a free seats in a different halls for an events. I prefer not to use flash and make it using only javascript. Is there any library or example that can help me do it?
Edit: I'm asking how to create a client-side UI
I don't know a library, but this actually might be a case of using image maps in a semantically-correct, compatible way. The <map> and area tags are valid even in HTML5, and provide you the convenience of the DOM.
I am actually after this too for interfacing to civiEvent, however, this seems to be nebulous 'roll your own' territory for some reason.
The following script + tutorial might give you some mileage:
http://dayg.wordpress.com/2008/04/17/php-101-a-simple-seat-reservation-system/
Please update this thread with whatever you find!
If you want to go fancier than an image map, you can create a table with one chair per each cell as the physical arrangement looks. You can change each chair's picture according to the state of the seat. You could get fancy and have the chairs image change to a highlighted color, say yellow, when they hover over it.
Image transitions are done very easily with JQuery, a Javscript library. Here's some resources for rollover images with JQuery : http://webdevel.blogspot.com/2008/04/rollover-images-with-jquery.html
The bad part about this is arranging the chairs, but JQuery is the easy part and it will make your page look fancier and more user friendly. Because with an image map, the actual image can't really change itself to show that seat 4321 has been taken (but you can certainly divulge this information via other means)

Putting an .ai or .svg file on the web, without Flash

So here's the scenario: I have an 800kb Adobe Illustrator file -- it's a topdown diagram of of a mall, with each individual shop marked with some text. Metadata showing square footage, availability, a number.
How would I put this on the web in a way that's interactive? I can simply export a PDF to the web, but that's not a great experience. I'd like to be able to zoom in and see detail (it's a big mall) and maybe be able to click to send an email or a message about an individual space to make an inquiry about it.
If it were 4-8 years ago, the natural answer is Macromedia Adobe Flash of course! But we're now in an era where people want to see these things on their phones.
Is it possible to do this in a way that works reasonably well? I tried loading the file using svgweb, but my browser (any browser) grinds to a halt, I think because of the the size of the file.
What are examples of maps that are cross browser, zoomable, and interactive?
What tools or libraries do people have success with in this area? it feels like GIS tools would be worthwhile here but might be overkill.
If you want to go for a tiled approach similar to google maps, check out polymaps.
If your svg is big then it's probably a good idea to split it somehow, either by level-of-detail / layers, or by tiles. Level of detail can be done with CSS media-queries for example, but note that that by itself doesn't make the filesize smaller. It should however have a positive effect on the look & feel.
If you want some simple zoom&pan controls that should work in all svg-capable browsers here's an example of that.
Adobe Illustrator can export to SVG which might be worth exploring.
Also, have you considered rasterizing and cutting the image into tiles? You could make something that's Google Maps-like.

How to create a flip book/page?

I need to create a flip book/page application. I have seen flash created flip page, can it be done in any other languages, e.g. jquery or javascript? And also, what are some concepts that I am required to have in mind/knowledge on for creating a flip book?
Thanks.
Not quite sure what you mean by "flip book", can you elaborate on this?
If you mean just a digital book, that you can turn the pages of, then I would surgest looking into this AS3 page-flip engine. And here is a list of good (mostly commercial) examples
EDIT* - Not to sure why you would want to create this from scratch, as there are a ton of well made Page-flip libraries out there that are really nicely build, and are either free, or really cheep. Most of the time they are customizable too.
That said, I think they are probably all using a combination of the following:
Preloaded pages - movieclip with either an image or
other graphics preloaded into it
Gradients - to give the illusion of a 3d page that is "turning"
Trigonometry - for dragging effect. To angle the page towards mouse
Masks - to get the page folding effect, when the user start to drag the page, the next page is loaded over the top. Both these page have been masked off based on the users mouse position.
Also the Page-flip engine I linked to above (MegaZine), is open-source. So if you where really keen, then you could dive into there source code and take a look for yourself.
Hope that helps somewhat.
If you need something simple, and don't want to delve into codes, try out pressmo: http://pressmo.com/example3/1
It works faster on slower computers than most of other similar services and what's important you keep your flipbook on your own computer/web server (as online flash or offline executable).
To create a flip page you have to upload your content as a PDF file (which can be easily obtained from Word or Open Office).
Usually a good solution for flipbooks is to keep the number of your pages even, otherside the user will not have the possibility to turn the last site. All pages should be similar size also.
You can use Flex Application
Like this right: Sample Book
Code is here: Source Code

Categories