Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I'm looking for a in-browser image editing solution to integrate with my project: http://code.google.com/p/django-ray/
I got it working with Pixlr quite easily and the editor is fantastic .. however it's a hosted service, which means I must be connected to Internet for it to work ..
Is there any other solution like Pixlr but that are not hosted service ?
Updates
Editors found so far:
AIE: http://www.ajax-image-editor.com/ (feels clunkier than Gimp..)
Pixidou: http://github.com/asvinb/pixidou (no working demo found..)
And a good list of editors that are hosted: http://www.lifeclever.com/10-free-web-based-alternatives-to-photoshop/
Adobe has discontinued the creativeSDK Image Editor UI
This solution appears to no longer be viable. Sorry :(
Adobe deprecation announcement
Previous answer:
Aviary (acquired by Adobe) offers a free feature-rich on-page editor called Feather. It is hosted, however, in that you must perform a GET to retrieve the final full-size edited image. It's features include:
enhance (new): Autocorrect your photo with one of four basic enhancements.
effects (new): Choose from a variety of effects and filters for your photo.
stickers: Choose from a variety of stickers you can resize and place on your photo.
orientation (new): Rotate and flip your photo in one tool.
resize: Resize the image using width and height number fields.
crop: Crop a portion of your photo. Add presets via API. Fixed-pixel cropPresets perform a resize when applied (new).
brightness: Adjust the overall image brightness.
contrast: Adjust the overall image contrast.
saturation: Adjust the overall image saturation.
sharpness (new): Blur or sharpen the overall image in one tool.
draw: Add doodle overlays with a brush.
text: Add custom, resizable text.
redeye: Remove redeye from your photo with a brush.
whiten: Whiten teeth with a brush. (Not supported in IE7-IE8)
blemish: Remove skin blemishes with a brush.
I'm currently integrating it in a site and there are a few gotchas (they might be my fault.) I can't ever get it to perform a POST callback to my URL with the finished image URL, so instead I use the objects .onSave handler which provides the same info. Also, in current chrome/firefox, there is a security exception when Feather modifies canvas data directly from your site. So instead provide the url option (causing Feather to request the image at that URL and then provide it back to the widget on your page.)
I've just been looking at JCrop, a JQuery plugin which looks great and works beautifully - on most modern browsers, so check your target platform is supported.
You can see it in action and download the scripts from here
http://deepliquid.com/content/Jcrop.html
and you will need the JQuery script framework, available from jquery.com
It's all free and Open Source, so you can customise it as much as you like.
Rob
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am designing a website using the MEAN stack, although there are numerous tutorials guiding how to go about the development of a web application using the MEAN stack, am not sure what is the best way to add animation to your application. Specifically, should all the animation just sit in the CSS and the html templates reference those classes. What about adding advanced animation features using the HTML5 canvas, what part of the project does it sit in. What is the most generic and cleanest way to add animation to your MEAN application, is ng-Animate in Angular the way to go about it ?
EDIT: What I specifically am looking to implement is an image of a box gift wrapped in a present with a ribbon hanging on the left side of it. Now I want a little boy/girl to drag the ribbon from left to right and unwrap the present. What is the best way to do this , that fits well with the MEAN stack?
This is a very broad question. It depends entirely on what kind of animations you hope to achieve.
Nonetheless, here are a few of my favourite libraries based on experience:
AOS (Animate on Scroll) -
It is a pure CSS3 driven animation library that animates HTML elements in lots of useful ways.
Demo: http://michalsnik.github.io/aos/
Code: https://github.com/michalsnik/aos
Implementation:
You can use a package manager (npm or bower) to install for use in your project. Or download the source code directly.
Spark Scroll -
A Javascript library that also handles scroll-based animations, as well as animations based on view-port visibility. Very powerful, and can be used to do things such as: draw borders on HTML elements when scrolled into view, trigger styling changes based on viewport visibility (ie. opacity), and many other things. Also, very customizable.
Demo: http://gilbox.github.io/spark-scroll/demo/
Code: https://github.com/gilbox/spark-scroll
Implementation:
Unfortunately, there is no native Javascript implementation for this library. Using Spark Scroll requires utilizing either ReactJS (Facebook) or Angular (Google).
Last but not least,
WOW.js -
Another Javascript library that handles a lot of different animations.
Demo: http://mynameismatthieu.com/WOW/
Code: https://github.com/matthieua/WOW
Implementation: http://mynameismatthieu.com/WOW/docs.html
Honestly, I suggest you edit your post and identify what exactly you're trying to accomplish. I will update this answer after you conduct some research with the resources I've provided and determine what animations you wish to implement.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
Hi i have one big image in the canvas it's 10 000~px x 10 000~ px. I need zoom in/out functions.
Offer me what technology i need use. Maybe i need split into smaller images like a google maps or something else..
There are several different ways you could address this issue.
Canvas does support the ability to change the size of an image on the fly by calling the drawImage function of the context object. There are several permutations of this function, the one you want is the one that takes two rectangles and the image object. The first rectangle will be the position of the image in x, y coordinates and the height and width of the area you want to copy to the canvas object. The second one will be the destination of the x and y coordinate of where you want to draw it on the canvas and the height and width.
Simple Example Code
context.drawImage(srcImage, 0, 0, 10000, 10000, 0, 0, 800, 800);
Now then in this example it will take the full image and reduce it down to a 800x800 image. Be careful when your sizing images because you can majorly distort the image if you don't keep the original aspect ration.
To make a Zoom feature you would then just change the source height and width which would in effect make it "zoom in". For example:
context.drawImage(srcImage, 1000, 1000, 2000, 2000, 0, 0, 800, 800);
In this example we would take the starting position of the image and move it to a different location in the source image. Then we would copy a 2000x2000 piece of the image into the same 800x800 canvas object.
Now then I do not recommend this approach because it is asking a lot of your users to download this large of a file. The next few solutions will depend on what scripting language you are using on the back end server. Most modern languages today have a decent support library to handle images so you can upload the image to the server and make it re-size it for your users. It might be helpful that the script also creates a re-sized cached version of the original image so that you can speed up server performance. For instance you could have the JavaScript start downloading the smallest version of the image and as the client request it download then next level of details needed. Again this could become very bandwidth intensive and slow for your end users.
The technique that I see being deployed in Google maps is they break the area you are viewing into blocks and then each block would download separately as you zoom in and out. You could replicate this technique with AJAX sending the server your current zoom level and image size. This is probably the more complicated version and would require a lot of work not only on the JavaScript but also on the server code that would handle the multiple request for image data which is beyond the scope of this answer.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I'm trying to develop a HTML/JS based "(computer) network diagram". By this I mean boxes linking to other boxes, and more importantly, boxes contained inside the bounds of other boxes.
Simplified Use Case - to explain the layout requirements
The use case is VPC (huge box) with AZ inside (2 or 3 big boxes stacked next to each other), and subnets inside each of those (boxes stacked on top of each other), and EC2s inside that (lots of small boxes next to each other).
While I've tried a number of methods (see below) I haven't found a suitable layout for my diagram and am wondering if my needs are so unique that I need to roll my own.
What I want help with...
I'm wondering if I'm missing something obvious in my research (in terms of options for a HTML5/JS solution)
Am I taking the right approach looking for a framework or are these requirements too special?
Should I consider writing my own layout (or does someone have a good idea for a good layout to start with)
Is there a framework that does visual grouping well (e.g draw a big box that contains smaller boxes, maybe a few levels deep)
My Research:
Webcola (can use with d3) http://marvl.infotech.monash.edu/webcola/
D3 http://d3js.org/
JointJS http://www.jointjs.com/demos/devs
Webcola
I originally tried Webcola as the following example seemed the most promising:
http://marvl.infotech.monash.edu/webcola/examples/smallgroups.html
I found the documentation to be lacking, a few of the links are dead, and when trying to combine the "Layout with hierarchical grouping" with "Alignment constraints with guidelines" the page failed to load.
D3.js
This appears to have lots of documentation, although I couldn't find a single example that came close to what I wanted to build.
https://github.com/mbostock/d3/wiki/Pack-Layout
Pack Layout seems the closest, with nesting used to represent the hierarchy.
The problem with this method is the size of each node is not uniform (I can just set them all to 1) and the example uses circles (this appears to be a hard rule with this layout, I think).
JointJS
http://www.jointjs.com/demos/devs
This appears to have a nice example with what appears to be a group and inputs/outputs (although the node can escape the bounds of its parent which isn't ideal.
If I did undersand your problem well, it can be done with HTML/CSS only :
the VPC div (container) is in position relative the and float left
position relative too inside an again float left with clear left if
you want to create another line
Beware of the width of the div
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Improve this question
I am working on a project that I would like to have a video animate, kind of like what Apple does on their iPad Air page.
Take a visit to apple.com/ipad-air and you will see what I mean. The iPad moves through each "slide" on the web page.
My question is this: how do you get those animations to work? I was looking through their code and saw the iPad was just a big .mp4 file. It seems like it stops at certain keyframes. Are there any jquery libraries that could help me do this?
Also, I want to be able to support older browsers. How would I detect browsers and be able to support older ones, too?
Thanks in advance!
Use onepage-scroll and set CSS3 effects via callback functions.
Additional info:
Demo
OnePageScroll.js: Creating an Apple’s iPhone 5S Website
Well, I could be wrong here, but it does look like the animation is initially an mp4, but the rest are done through CSS3 animations on the images of each step. If you look inside their code, using like Chrome Dev tools, you'll see that they have tags for each "subpage" (like Design, Performance, Wireless, etc). For example, take a look at this HTML they have:
<section class="scene active" id="design" data-track-visitor-engagement="design">
<div class="scene-content">
<img class="hero-img centered" src="http://images.apple.com/ipad-air/overview/images/desktop/design_hero_2x.jpg" width="498" height="640" alt="">
<div class="container centered fade-slide">
<h1><img src="http://images.apple.com/ipad-air/overview/images/desktop/design_title_2x.png" width="325" height="220" alt="All-new design. A ton of advanced technology. In just one pound."></h1>
<p class="intro">You have to hold iPad Air to believe it. It’s just 7.5 millimeters thin and weighs just one pound. The stunning Retina display sits inside thinner bezels, so all you see is your content. And an incredible amount of power lies inside the sleek enclosure. So you can do so much more. With so much less.</p>
<p class="intro"><a class="more" href="/ipad-air/design/" onclick="s_objectID="http://www.apple.com/ipad-air/design/_2";return this.s_oc?this.s_oc(e):true">Learn more about design</a></p>
</div>
<ul class="tiles centered fade-slide">
<li><img src="http://images.apple.com/ipad-air/overview/images/desktop/design_details_weight_2x.png" width="100" height="100" alt="1 pound"></li>
<li><img src="http://images.apple.com/ipad-air/overview/images/desktop/design_details_lighter_2x.png" width="100" height="100" alt="28% lighter"></li>
<li><img src="http://images.apple.com/ipad-air/overview/images/desktop/design_details_thinner_2x.png" width="100" height="100" alt="20% thinner"></li>
</ul>
</div>
</section>
Then, you'll see that in .fade-slide, they have -webkit-transition: in their CSS. This is what is animating those images after the mp4 file does. Take a look at CSS transitions here
Also, I'm sure they have some sort of javascript/jQuery failsafe for older browsers (or a more simple version of this for older browsers, though Apple is known to be bleeding edge, so if they didn't have it, that wouldn't surprise me).
Anyway, that's just a high level explanation of how they do it :).
According to a variety of articles available around the web, in order to achieve the effects you mention, Apple uses a combination of the HTML5 canvas, loose images and javascript.
They also use a very specific technique to animate a row of JPG images.
Instead of using video, some brilliant minion at Apple came up with the idea of compressing animation into a handful of JPEG images by showing the starting and ending frames, then using special JPEGs like the one at the top of this post that contain only the updated and animated portions of the image. A JSON file is used to specify how the updated bits are positioned, and the actual logic for displaying the "video" in a element is found in a tiny Javascript.
(Source)
Tools
There are applications out there that try to mimic similar results, but from what i have seen, none can deliver anything at the quality of what is shown on the Apple website. Just in case, here are two options:
Sequence JS
Phosphor
General thoughts
Bear in mind that Apple is a top-notch business with brutally huge sales figures. They have the budget to arrange for a team of high-end super qualified programmers and designers in order to maintain their innovative status, even on the web.
If you'd like to achieve similar effects, you should start with small steps.
For manipulation of <video> elements, I recommend popcorn.js. It should allow you two way bind to positions in the video. You can then use javascript or css3 animations to control the location of the <video> and other surrounding elements on the page.
For animating the surrounding elements with scroll in-mind, I recommend (shameless plug of my favorite lib) greensock. Greensock will let you set up the animation of all the elements in your presentation as a timeline that can then be paused, reversed, or seeked.
Combining
popcorn.js
greensock
is the best and most flexible way I know of to produce these kind of presentations.
here is an example of a scroll presentation lib built on greensock
http://johnpolacek.github.io/superscrollorama/
here is an example using 2 way video control via popcorn
http://client.heliozilla.com/aer/demo_06.html
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I am looking for a lightweight jQuery script for tooltips that is lightweight and can be easily used with image maps... Ideally it would automatically take the 'title' of each the area tag to function as a tooltip. The reason this is an issue is I have hundreds of areas (its a world map) and a line of code for each tooltip will soon add up in file size.
qTip can do this... but its 38kb... which is more than even jQuery itself. Any recommendations?
Not sure if it's exactly what you're looking for but check out Tipsy:
http://onehackoranother.com/projects/jquery/tipsy/
9 KB uncompressed
4 KB minified
vTip might be a good candidate (see demo). It's a bit outdated, but it's dead simple and should work.
You just mark your DOM element by adding class="vtip" on it, e.g.
Tooltip test
Uncompressed JS file is only 4KB.
If you want to handle your tooltips in more dynamic way, consider creating your own simple tooltips.
I use the imaginatively-titled "jQuery Tooltip": demo here. Works well with image maps, and is easy to customize with CSS.
(Coincidentally, I tried qTip with image maps and found a weird bug when combined with the Map Hilight plugin).
PowerTip
http://stevenbenner.github.io/jquery-powertip/
PowerTip features a very flexible design that is easy to customize
Supports static tooltips as well as tooltips that follow the mouse
Ability to let users mouse on to the tooltips and interact with their content
Mouse follow tooltips are constrained to the browser viewport
Lightweight JS ~10KB, CSS ~2KB
Tipsy
http://onehackoranother.com/projects/jquery/tipsy/
It's used by Twitter, Github, Slideshare and Bitbucket, amongst others.
Lightweight JS ~10KB, CSS ~2KB
After big research none of answers to this question gave me satisfaction.
I needed one solution that is lightweight, is not abandonware as Tipsy (last update years ago, 63 bug fixing pull requests ignored by author) and I can use as typical tooltip as hint for form fields on hover, but also for dynamic field validation after form submit.
Really good one is as mentioned earlier PowerTip, but there is big issue with it: you can only have one tooltip visible at once. For me it's disqualification, I checked resources and this is basic assumption of author - only one tooltip at once, there is one single DOM object for all tooltips etc.
Tooltipster
After loosing another hour I found solution that is exactly what I needed: Tooltipster. It's really easy to implement (very similar to PowerTip) but it allows you to prepare and show many tooltips at once. Another advantage is fact of not using images at all, it's only js (~12k) and css.
Hope this will save many hours of research to someone.