meltingice / camanjs Goto Github PK
View Code? Open in Web Editor NEWJavascript HTML5 (Ca)nvas (Man)ipulation
Home Page: http://camanjs.com
License: BSD 3-Clause "New" or "Revised" License
Javascript HTML5 (Ca)nvas (Man)ipulation
Home Page: http://camanjs.com
License: BSD 3-Clause "New" or "Revised" License
Following the docs:
Caman.remoteProxy = Caman.useProxy('php');
I get the error in the title.
btw, shouldn't the version ID change to 3.1.1?
right now it has two images, with the modified image simply a hardcoded bitmap. That should really use the caman.js library on top of the original so that people can see what's going on "for reals". A view-source or inspect element doesn't teach people anything right now (other than, "wait, it's not actually using caman" =)
Hello, i have two similar script the first works well, the second not.
This is the first working:
https://docs.google.com/open?id=0Bwv1t7C17v0ad0g3dDNMQTRKMDA
This is the second not working, it return the error: TypeError: this.c.pixelData is undefined
https://docs.google.com/open?id=0Bwv1t7C17v0acFc3ek5pc1JkWnc
Any help please?
Any plans to support IE10?
Just checked the caman.js site and the examples page doesn't seem to be workring. Sliders don't change the above image and presets stay at "rendering". I checked out Chrome & Safari.
Just wanted to let you know.
Hi this is a great project!
I notice that you had an image blender. It would be great if instead of proving a single Parent, you could provide an array of them. This would be much faster than the current solution of running the blender multiple times (or at least it seems like it would be). Perhaps this is already possible if so please let me know how.
This would be useful to merge B&W images into RGB pictures for instance.
Thanks,
Ghislain
This one is a bit tricky to test, but it needs to be done.
Hello,
I try to open example page from IE9 and get the following errors in IE console:
I've been working with sandbochs and we're coming across an unexpected behavior.
Looking at the code, it seems that the behavior comes from an intentional design decision.
We are writing simple photo filter site and are interested in keeping as seamless a customer experience as possible. To do so, we are keeping a clone of the DOM element that we are converting to a Caman canvas on hand. The idea is to swap it out for the current canvas instead of reverting the image if the user has decided to apply a different filter.
When we swap the element in, we're giving it the same class and id properties as the previous element that was converted to a canvas in order to make the system infinitely repeatable. The behavior that we are encountering is that once we've written a line to replace an image with a Caman canvas, we can never use the same identifier, whether it be the class or id, again.
Looking at the Caman code, it appears that the previous identifiers are being stored and if a CamanInstance has already been created using that identifier, that CamanInstance is returned instead of one created from the new DOM element with the same identifiers. This seems like it is a performance optimization, but it has led to us creating a work around to never use the same identifier twice. However, when we comment out caman.coffee line 36:
when 2
return Store.execute arguments[0], arguments[1] if Store.has arguments[0]
it behaves as we had expected, allowing us to re-use the same identifiers for the replacement DOM element.
We're adding this issue because we were hoping to either better understand the advantage that this store provides or to find out if commenting this line out will cause us additional issues.
Hi!
I'm building an instargam-like webapp that allows you to upload filtered images to a server.
I'm having an issue with returned instance of caman
Using it like this:
this.caman = Caman(this.canvas, function() {
this.sepia(40).saturation(5).render();
});
works OK. However this:
this.caman = Caman(this.canvas);
this.caman.sepia(140).render();
fails with this error: http://imm.io/LXPy
TypeError: this.c.pixelData is undefined
n = this.c.pixelData.length;
I love the idea of camanjs, but the fact that it requires a script and canvas element seems too developer-oriented, rather than every day user oriented. I would like to suggest using the img element and having caman.js auto-convert them to canvas elements with the relevant operations appied, with the instructions encoded in a data-* attribute, such as
<img src="myimage.jpg" data-caman-instructions="saturation(20) gamma(1.4) vintage contrast(5) exposure(15) vignette(300,60)">
or something similar along these lines, which caman then replaced on page with a canvas element that generates an overlay Image() object based on the canvas's .toDataURL so that "save as" still works.
This way, the usability becomes infinitely better: include camanjs, and just use image tags. Operations or canvas element not supported in a browser? Not a problem, the image element will simply show the original image, instead of being converted to a canvas element.
It would be nice if CamanJS would provide crop and resize functionalities, nothing fancy just a wrapper around canvas drawImage.
Trying to figure out how to listen for the processStart event. I understand the callback on render(), but not sure where or how listen() should be called. I'm still a bit new at Javascript and the src appears to require target, type ( I assume 'processStart' ) and fn. What's the target?
Hi, I am experimenting with CamanJs in CakePHP. I wanted to use the proxy function which did not work in the beginning. The problem is the hardwired "url" variable, which breaks the CakePHP routing.
// We have a remote proxy setup properly, so lets alter the image src
return Caman.remoteProxy + "?url=" + encodeURIComponent(src);
Perhaps you can change this in a future release to
// We have a remote proxy setup properly, so lets alter the image src
return Caman.remoteProxy + "?camanjsSpecialUniquePhotourl=" + encodeURIComponent(src);
or something...
Hi,
I noticed that CamanJS loses style information attached to a Canvas in the recent release (3.2.2). Basically I've set up a hidden canvas (display: none) which I would like to remain hidden. I worked around this by wrapping the canvas in a div that contains the property.
It used to work without this specific hack in 3.0 so looks like a regression to me.
I haven't tried out the trunk version yet so it's possible the issue has been fixed already.
Hi, I'm testing the CamanJS and I have a little issue. Using the nodejs, the pictures are saved, but none effect was applied.
My nodejs code:
var sys = require('util'),
caman = require('/usr/lib/node_modules/caman/dist/caman.full.js');
sys.puts("started...");
var image = caman.Caman('/opt/node/001.jpg', function() {
this.sunrise();
this.render();
this.save('/opt/node/001_save.png');
});
My script is wrong or something is not working.
Thanks in advance.
Hi,
i want use that code:
Caman("#" + sId + " canvas", function ( )
{
this.filter.sharpen(15);
this.render(
);
});
But it get "this.filter is undefined".
How can i get access to the sharpen filter?
// Oliver
I am using Caman in a web application and I am trying to achieve a sort of undo/redo functionality.
I am able to re-draw the image on the canvas and go back and forth with all the steps, but it looks like the Caman object needs to be re-inizialised to get the image currently on the canvas.
How can I do that?
Pretty much what the title says. Node version needs updating soon.
//1 of 2
Caman('../images/banner.png', '#separate', function () {
this.colorize(25, 180, 200, 40);
this.render();
});
//2 of 2
Caman('#separate', function() {
this.invert();
this.render();
});
//1 of 1
Caman('../images/banner.png', '#all', function () {
this.colorize(25, 180, 200, 40);
this.invert();
this.render();
});
see: http://earthiverse.ath.cx/tests/camanjs.html
The separate one won't complete the 2nd part Caman('#separate', function() {...
when I am expecting it to.
Under 'Loading onto a Canvas without an Image' on http://camanjs.com/docs, I think I followed the right procedure for this.
I would like to modify a pre-existing canvas on a different page, so this would be useful to me.
I am trying to perform various operations on a reasonably big image (5616 x 3744 px) using Node version of Caman. Unfortunately it seems to run out of memory (gives "FATAL ERROR: JS Allocation failed - process out of memory" error) and gets stuck around finishInit
(at this.originalPixelData.push(pixel);
loop).
Considering this.originalPixelData
is used only by revert
perhaps you could add some kind of an option either to disable it temporarily or make revert
optional (saves memory by default!). Either way would work.
I ran into this need while developing a little application. I have a reference to a DOM Canvas and I actually have to inject an artificial id for it in order to make it work with Caman. This is sort of nasty.
Do you think it would be acceptable if Caman object accepted DOM object as its second parameter in addition to ids?
We discussed this briefly at #36 already. It appears "value" curve adjusts the overall contribution of color channels. Effectively this allows you to increase or decrease the value of all color channels at a same time making it handy for some quick color level adjustments. Mathematically speaking it would adjust (multiply) current color using given multiplier relative to normal.
I think the API for this could be quite simple. Probably having just something like this would work:
this.curves('v', [0, 0], [100, 120], [180, 240], [255, 255]);
Do you this sort of addition would be ok?
Resize function creates new canvas element. But this new canvas doesn't have the old canvas id. It means that after calling:
Caman('#picture', function () {
this.resize({
width: 1024,
height: 768
});
this.render();
});
I'm not able to use '#picture' id anymore
http://www.camanjs.com/ goes to a website "Lots of Lulz"?
However, http://camanjs.com works fine. Not sure if this was intended, or you care, but figured I would let you know.
Try following:
Caman("#image", function () {
this.curves('rgb', [0, 0], [100, 120], [180, 240], [255, 255]);
// Specifying individual color channels
this.curves(['r', 'b'], [0, 0], [180, 240], [255, 255]);
this.render();
});
Note the uneven length of the curves. This seems to result in "Uncaught TypeError: Cannot read property '0' of undefined ".
Is there some nice way to adjust "value" of the colors using a curve?
When running in Opera, it either doesn't do anything or it majorly messes up rendering and creates really strange results.
I tested this with the replace and crop plugins:
this.resize({
width: 200,
height: 200
}).render();
or
this.crop(200, 200, 20, 20).render();
In both situations, the plugin is called over and over again, finally throwing a "too much recursion" error in firefox. I suppose this has to do with the fact that the command "this.replaceCanvas(canvas);" in the plugin code somehow manages to invoke the plugin again (maybe because it is still in the render queue?), leading to an endless recursion.
I have the same problem with a nice "halftone screen" plugin that I am currently developping.
Sometimes when invoking CamanJS on an image element, the image will fail to load and it will not be painted to the canvas. The error given is:
Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1
I have a hunch its some kind of race condition/timing issue with the loader function, although I haven't been able to pinpoint it yet.
Not sure if this is a bug or just an enhancement, but it would be nice to be able to use pngs that contain transparency with the layering system. My tests show that when using "overlayImage" with pngs the transparency in the png goes black. If there is already a workaround for this I would be glad to know it. Thanks!
Everything works like a charm up to the point where I try to get original image back to the canvas. It looks like when you instantiate your Caman object like this:
this.ctx.drawImage(opt.image, opt.cx, opt.cx, 640, 640, 0, 0, 640, 640);
this.active && (delete this.caman);
this.deactivate();
this.caman = Caman(this.canvas, function() {
that.activate();
});
and then somewhere you do this:
if (!that.active) return;
type = this.getAttribute('data-filter');
if (typeof that.filters[type] === 'function') {
that.deactivate();
that.caman.revert(applyFilter);
}
you get this error:
TypeError: this.options is undefined
return this.loadCanvas(this.options.image, this.canvas, ready);
If I switch to cropping via Caman, will it be OK? Or should I just repaint canvas myself?
Seems to be a regression in 3.2 where using the revert function sometimes fails
It would be good if curves plugin would be generic (ie. accept 2 to n cps). Apparently some GIMP plugins use this.
If you want, I don't mind providing a patch for this. Should be fairly easy one.
When modifying the canvas element after applying a Caman filter, text and other added elements are blurry in Chrome on a Retina Display.
Submitting a pull request to fix this issue.
I'm using IE9 in cooperation with Caman.js
My script is the following.
It works perfectly in every browser except for IE9.
IE is throwing the following error in it's console:
"SCRIPT5022: DOM Exception: INDEX_SIZE_ERR (1)"
It's not just with this script but with every time I try to use Caman.js in IE9
Not working at all.
[code]
function imgDeSat(){
//alert("INIT");
jQuery(window).load(function(){
//alert("DESAT");
/*DEFINTIONS*/
var speed = 500;
var saturationVar = -50;
/**/
jQuery('.slideshow-item img').each(function(index){
jQuery(this).clone().prependTo(jQuery(this).css({'position':'absolute','top':'0px','left':'0px'}).parent()).addClass('img-desaturate').attr('id', 'canvasID');
var target = '.item-'+(index+1);
var target_img = '.item-'+(index+1)+' img.img-desaturate'; /*<<<<<<<<<<<<<<<<*/
Caman(target_img).saturation(saturationVar).render();
jQuery(target).find('#canvasID').css({'position':'absolute','z-index':'99'}).addClass('img-desaturate');
});
jQuery('.slideshow-set').mouseover(function(){
jQuery(this).find('canvas').stop().animate({opacity:0}, speed);
});
jQuery('.slideshow-set').mouseout(function(){
jQuery(this).find('canvas').stop().animate({opacity:1}, speed);
});
});
}
[/code]
Regards,
Valentin
When using createPNGStream/createJPEGStream, the image failed to write beyond the first chunk of data. I'm not sure if this is a bug with node-canvas, cairo, or CamanJS itself. Will need to investigate more.
Currently, processing an image via convolution matrices is the slowest part of CamanJS by far. One thing to investigate is whether converting the convolution matrices to 1D arrays will improve speed at all.
Not sure if caman is the right project for this, but it sure would be nice to be able to have the ability for embroidery preview.
So we can have an image or some text drawn with canvas, then utilise caman or whatever project to apply an embroidery filter to the image.
Is caman the right project for this? If so, how would we go about making that happen? Otherwise, any idea where else I should be looking?
Hi,
I need to crunch some pretty big images using Caman (think 5MP+). As this can take a while it would be nice to be able to provide some kind of progress information to the user. Currently I have a generic progress thinger (one of those animations) in place which I show while it's processing.
It would be nice if there was a way to provide more accurate information. I noticed you have a block renderer in place. Do you think it would make sense to expose some info related to it via some API? Basically I would like to have a callback that's triggered as a block has been finished. I guess it would be nice to pass the amount of currently finished blocks and the amount of total blocks to it. Those would get me started I think.
If you think this is something that should be added to Caman, I don't mind looking into it as far as we can agree on the API. Still got that curve thinger (#43) to finish (spent last week on vacation). :)
When editing the canvas after rendering with CamanJS, any added text or images are blurry in Chrome.
The canvas element needs to be scaled up 2x and then scaled down with CSS.
Submitting a pull request that fixes this bug.
Consider the test code below:
<body>
<h1>CamanJS Testing Playground</h1>
<p>Note: this cannot be accessed locally via the file:// protocol thanks to same-domain origin policy. It must be placed behind a webserver.</p>
..
<table>
<tr>
<td>
<img id="curve_test" alt="curve test image" src="../images/test1_600.jpg" />
</td>
<td>
<img id="value_test" alt="value test image" src="../images/test1_600.jpg" />
</td>
</tr>
</table>
<script type="text/javascript">
Caman.DEBUG = true;
var curve_test = Caman('#curve_test', function () {
this.curves('rgb', [0, 0], [100, 30], [180, 240], [255, 255]);
this.curves('r', [0, 0], [40, 200], [255, 255]);
this.render();
console.log('first done');
});
var value_test = Caman('#value_test', function() {
this.curves('r', [0, 0], [40, 200], [255, 255]);
this.render();
console.log('second done');
});
console.log(curve_test, value_test);
</script>
</body>
For some reason it outputs this:
CamanInstance
analyze: Analyze
id: 0
__proto__: CamanInstance
CamanInstance
analyze: Analyze
canvas: HTMLCanvasElement
canvasID: "#value_test"
context: CanvasRenderingContext2D
dimensions: Object
finishedFn: function () {
id: 1
image: HTMLImageElement
imageData: ImageData
options: Object
pixelData: Uint8ClampedArray[962400]
__proto__: CamanInstance
curves.html:46
second done curves.html:44
BLOCK #0 - Filter: curves, Start: 0, End: 240600 caman.full.js:1309
Block #0 finished! Filter: curves caman.full.js:1309
BLOCK #1 - Filter: curves, Start: 240600, End: 481200 caman.full.js:1309
Block #1 finished! Filter: curves caman.full.js:1309
BLOCK #2 - Filter: curves, Start: 481200, End: 721800 caman.full.js:1309
Block #2 finished! Filter: curves caman.full.js:1309
BLOCK #3 - Filter: curves, Start: 721800, End: 962400 caman.full.js:1309
Block #3 finished! Filter: curves caman.full.js:1309
Filter curves finished!
As you can see, the first CamanInstance is borked somehow and doesn't render. The latter render shows up just fine. Any idea what might cause this?
Note that I'm using the trunk version with my curve parameter addition at the moment. I gave it a go using invert filter with the same results (rules out an issue with my patch).
When I apply a complicated filter to more than one image, I get incorrect results. It looks like CamanJS is getting the dimensions of the images mixed up, causing problems with (at least) the vignette filter.
If I chain all the callbacks so that images render sequentially, I get correct results - but it's awkward. Any idea what's going on?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simultaneous rendering</title>
<script type="text/javascript" src="../../dist/caman.full.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
Caman.DEBUG = true;
var ids = ["#img0", "#img1"];
for (var i in ids) {
Caman(ids[i], function() {
this.lomo().render();
});
}
</script>
</head>
<body>
<img id="img0" alt="test image" src="../images/test1_600.jpg" />
<img id="img1" alt="test image" src="../images/test1_1280.jpg" />
</body>
</html>
The rendered output then looks like:
Encounter this when viewing your camanjs page on iPad iOS 4.3.3 Safari.
JacaScript Error on Line 884
http://dev.meltingice.net/canvas/caman.js
ReferenceError: Can't find variable: Worker
In Opera 11(I've got 11.64) most of effects (also on camanjs.com -> examples -> preset examples) didn't work. For example "Glowng Sun" effect draw a circle around the center or fill all scene black. It does randomly.
Rendering in IE9 is very sloooow. Also benchmark test on camanjs.com gives big values.
screenshot: http://imageshack.us/photo/my-images/220/screentf.jpg/
Is there any fix for those issues?
When we call Caman Instance, we have undefined is not a function
Currently the save() function works in Firefox, but not in Chrome. It may not work in other browsers, but I have not had a chance to test these yet.
Say I'm working with an image which has 2 million colours, however it is for a destination that only supports 6 or 8 or 10 or whatever. It would be nice if there was the ability to be able to reduce the canvas to only have the set amount of colours.
This seems similar to the way the current "clip" filter works, however unlike clip where colours will turn white if they are not popular enough, instead with this, the colours will be merged into the remaining colours. E.g. pink, magento will be replaced by the more generic red if the only colours that are allowed are red, green and yellow.
Thoughts?
If jQuery is loaded and present on the page, automatically offer Caman as a jQuery plugin.
I'm working on an app where i capture the image from my webcam with WebRTC. But it looks like, just from code analysis, that it doesn't support working on a new Image() or image data, is that correct? If so it would be nice to have that, if not how would that work?
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.