imazen / studiojs Goto Github PK
View Code? Open in Web Editor NEW[Deprecated] A set of jQuery plugins that compose a flexible, web-based image editing studio.
[Deprecated] A set of jQuery plugins that compose a flexible, web-based image editing studio.
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?
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:
I have integrated your code successfully. But when I use my local machine images, all features not working see this code : $(function () {
$('div.studio1').ImageStudio({ url: 'myimage.jpg?maxwidth=1089&maxheight=532&cache=no&scache=mem' });
});
But when i used online image of your code its working fine : url - "http://resizer.apphb.com/fountain-small.jpg?width=400&scache=mem&cache=no"
Please help me to resolve this issue
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 ?
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
How to save the image after editing ?
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.
Right now, certain requests (if they fail) can cause StudioJS to stop working, require a page reload:
Implementing error handling for these situations may increase code complexity, but would improve durability on poor internet connections.
only the online image
http://resizer.apphb.com/fountain-small.jpg
work any help and this issues matched my question #17
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.
Is it possible to use studioJS with images returned from an asp.net handler (.ashx)? So far I've had no luck.
Thanks!
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'.
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!
The Object Removal pane scrambles the bitmap data during compression on IE9
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.