Code Monkey home page Code Monkey logo

studiojs's Introduction

StudioJS

StudioJS is a rapidly growing collection of jQuery plugins for image cropping, resizing, and editing.

Please file any bugs you discover in the Issues tab

All client-side components are released under the MIT license by their respective authors.

For a live demo, click here.

If you are upgrading, please check the changelog for migration notes. Some backwards-incompatible changes have been made.

If you're new to StudioJS, the tutorial is an appropriate place to start.

Documentation Links

Overview of files

  • jquery.Jcrop.js - A slightly modified version of Jan. 2012 version of JCrop. I've made a pull request.
  • jQuery.jcrop.preview.js - A tiny plugin to provide a live preview of the crop rectangle in an arbitrary container.
  • ImageResizer.js - Provides a set of classes for querystring parsing and serialization, polygon math, and command string creation. Requires underscore.
  • jquery.imagestudio.js - A configurable jquery UI plugin for creating a photo-editing widget in an arbitrary container.

Javascript Dependencies

Copies of all dependences can be found in the /libs folder. Most files in /libs are NOT required.

  • jquery.Jcrop and Jcrop.preview.js require jQuery, 1.7 or higher.
  • ImageResizer.js requires underscore.js 1.3.1 or higher
  • jquery.imagestudio.js requires jquery-ui 1.8.16 or higher and all of the aforementioned libraries

CSS dependencies

  • Jcrop requires css/Jcrop.gif, css/jquery.Jcrop.css.
  • ImageStudio requires jquery-ui-1.8.16.custom.css (and folder), css/jquery.imagestudio.css, css/loading.gif, css/delete-rect.gif

studiojs's People

Contributors

lilith avatar steji avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

studiojs's Issues

.ashx?

Is it possible to use studioJS with images returned from an asp.net handler (.ashx)? So far I've had no luck.

Thanks!

Only working with test image

Seems that ImageStudio only working with certain photos and not others. The test at http://studio.imageresizing.net/studio.html uses a photo with this url: http://images.imageresizing.net/fountain-small.jpg
If I take the same code and run it locally its working fine - BUT if i replae the photo with ANY of other photo its not working !?
This is the code I am using:
$(function () {
$('div.studio1').ImageStudio({ url: 'http://images.imageresizing.net/fountain-small.jpg?width=400&scache=mem&cache=no', panes:['rotateflip', 'crop', 'adjust', 'effects'] });
});

Has this something to do with user rights or ... what ?

Added support for failed requests

Right now, certain requests (if they fail) can cause StudioJS to stop working, require a page reload:

  • Crop pane - "Crop"
  • Faces pane - "Select Faces"
  • Redeye pane - "Red eye"

Implementing error handling for these situations may increase code complexity, but would improve durability on poor internet connections.

two bugs in ImageResizer.js found !

suppose I have run ImageResizer under this domain

http://localhost:804/studio.html

the content of studin.html is just like the page below displays

https://github.com/imazen/studiojs/blob/master/tutorial.md#6-youre-done

Everything goes well when the editingServer is not set or keeping null

after setting the editingServer http://localhost:804/ , then refresh the page

http://localhost:804/studio.html it stoped with the javascript error

"ir.Utils.joinPath is not a function" in file ImageResizer.js ,

after some debug , I found there's no function named joinPath but joinPaths ,

I modified this misspelled error and refresh the page again

one new javascript error occurs "relatve is not defined" in file ImageResizer.js

ir.Utils.joinPaths = function (base, relative) {
if (base.charAt(base.length - 1) == '/') base = base.substr(0,base.length -1);
return base + ((relatve.charAt(0) != '/') ? '/' : '') + relative;
}

I found "relatve.charAt(0)" was misspelled after checked the code snippet.

after correcting these two misspelled error, Resizer works well again!

Studiojs functions for image processing works very slowly..

Hello,

I run the demo of Studiojs and found that each of it's functions shows very slow effects. For example, if I increase the brightness of the image, then it is applied to the image after 5-10 seconds of increasing the brightness. Is it possible to make it faster to shorten this time limit for rapid effect ?

Second issue, I found that if I completely applies my own effects to the image, then how can I save this image to desired folder ? No function present in the library to save this manipulated image?

Live demo does not work

Console error messages:

Refused to execute script from 'https://raw.github.com/nathanaeljones/studiojs/master/libs/jquery-1.8.2.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. studio.html:1
Refused to execute script from 'https://raw.github.com/nathanaeljones/studiojs/master/libs/underscore-min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. studio.html:1
Refused to execute script from 'https://raw.github.com/nathanaeljones/studiojs/master/libs/jquery-ui-1.9.1.custom.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. studio.html:1
Refused to execute script from 'https://raw.github.com/nathanaeljones/studiojs/master/jquery.Jcrop.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. studio.html:1
Refused to execute script from 'https://raw.github.com/nathanaeljones/studiojs/master/jquery.jcrop.preview.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. studio.html:1
Refused to execute script from 'https://raw.github.com/nathanaeljones/studiojs/master/ImageResizer.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. studio.html:1
Refused to execute script from 'https://raw.github.com/nathanaeljones/studiojs/master/jquery.imagestudio.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. studio.html:1
Refused to execute script from 'https://raw.github.com/nathanaeljones/studiojs/master/jquery.overdraw.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. studio.html:1
Uncaught ReferenceError: $ is not defined studio.html:29

Add 'Output' pane

Add 'Output' pane

Will include tabs for Jpeg, Png, and Gif encoding.

Jpeg tab will have 'quality' slider and 'progressive' checkbox.
Png tab will have 'colors' slider, 'interlaced' checkbox.
Gif tab will have 'colors' slider, 'dithered' checkbox

Matte color selector.

Width box
Height box
FitMode Combo
Scaling Combo

Save As button.

This will require refactoring how Panes handle 'suspendedKeys' and 'editingKeys'.

live demo at http://studio.imageresizing.net/studio.html not functioning in recent Chrome/Firefox due to X-Content-Type-Options: nosniff support added, breaking scripts loading from raw.github.com

Runtime errors in Chrome console:

Refused to execute script from 'https://raw.github.com/nathanaeljones/studiojs/master/libs/jquery-1.8.2.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. studio.html:1
Refused to execute script from 'https://raw.github.com/nathanaeljones/studiojs/master/libs/underscore-min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. studio.html:1
Refused to execute script from 'https://raw.github.com/nathanaeljones/studiojs/master/libs/jquery-ui-1.9.1.custom.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. studio.html:1
Refused to execute script from 'https://raw.github.com/nathanaeljones/studiojs/master/jquery.Jcrop.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. studio.html:1
Refused to execute script from 'https://raw.github.com/nathanaeljones/studiojs/master/jquery.jcrop.preview.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. studio.html:1
Refused to execute script from 'https://raw.github.com/nathanaeljones/studiojs/master/ImageResizer.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. studio.html:1
Refused to execute script from 'https://raw.github.com/nathanaeljones/studiojs/master/jquery.imagestudio.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. studio.html:1
Refused to execute script from 'https://raw.github.com/nathanaeljones/studiojs/master/jquery.overdraw.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. studio.html:1
Uncaught ReferenceError: $ is not defined 

Background info:

if the traffic to the live demo is low enough, a possible quick fix:

Image rotates the wrong way after flipping

I have found that if you first Flip a photo (either horizontally or vertically), then Rotate the photo - the Rotate rotates the wrong direction. Flip then Rotate Right actually rotates left, Rotate Left actually rotates right.

The behavior is reproducible in IE, Firefox and Chrome.

Cropping and Rotating

The cropping and rotating has stopped working (for me and the live demo)

If you crop and then rotate the cropping is reset and the image is stretched.

I noticed that it works correctly if using 'rotate' instead of 'srotate' but if you rotate and then crop then it crops the wrong area.

This is happening in IE, FF and Chrome.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.