Alright so I want to add an rgb slider for images if I could, otherwise I want to make buttons with some different color choices that will change the images hue. I've been trying to work with the kineticjs rgb filter but it doesnt seem to work with mine. Can someone look over my code and see how I can add it to mine. http://jsfiddle.net/dsj00qoy/17/ Also here is kinda a code i made up to try but it wasn't working...
document.getElementById('ta3h').addEventListener('click', function () {
BR.img.filters([Kinetic.Filters.RGB]);
BR.img.blue(0);
BR.img.red(100);
layer.draw();
});
You have to cache the image prior to applying a filter:
BR.img.cache();
BR.img.filters([Kinetic.Filters.RGB]);
BR.img.blue(0);
BR.img.red(100);
layer.draw();
Related
I am wondering how I would be able to use animated shapes inside a movieclip that would be acting as a mask?
In my Animate CC canvas file I have an instance (stripeMask) that should mask the below instance called mapAnim.
stripeMask contains shapes that are animating in.
So when the function maskIn is called, the playhead should move to the first frame inside the stripeMask clip (the one after frame 0) and animate the mask like so:
function maskIn(){
//maskAnimation to reveal image below
stripeMask.gotoAndPlay(1);
}
I love AnimateCC and it works great, but the need for creating more complex and animated masks is there and it's not easy to achieve unless I am missing something here.
Thanks!
Currently you can only use a Shape as a mask, not a Container or MovieClip.
If you want to do something more complex, you can use something like AlphaMaskFilter, but it has to be cached, and then updated every time the mask OR the content updates:
something.filters = [new createjs.AlphaMaskFilter(stripeMask)];
something cache(0,0,w,h);
// On Change
something.updateCache(); // Re-caches
The source of the AlphaMaskFilter must be an image, so you can either point to a Bitmap image, or a cacheCanvas of a mask clip you have also cached. Note that if the mask changes, the cache has to be updated as well.
This is admittedly not a fantastic solution, and we are working on other options.
What do I need to read up on to tint the image I draw with a predefined color. Alternatively just adjust the alpha value? I've played around with BlendMode but I basically don't know what I'm doing. :)
Simplyfied code below
_backgroundImage = UIImage.FromFile ("whiteblock.png");
var ctx = UIGraphics.GetCurrentContext ();
// What do I do here to tint or adjust alpha of the image
ctx.DrawImage (rect, _backgroundImage.CGImage);
Thanks
AnkMannen
I recommend starting with the Core Image Filter reference docs (see also CIFilter).
(Note that depending on the version of the OS, not all filters may be available.)
You probably want to focus on the filters in the CICategoryColorAdjustment category.
In particular, the CITemperatureAndTint filter can adjust the tint of the image, as you ask. But, it is not straightforward to use.* There are other questions on StackOverflow describing it, like this one: Input parameters of CITemperatureAndTint (CIFilter)
Finally check out the MonoTouch docs for a code example with CITemperatureAndTint. (I believe the image attached to the examples given there are wrong, as they show a scaled image, not a tinted image.)
*It takes two parameters, each a 2D CIVector. I believe the first component of the vector is temperature and should be in the ballpark of (1k ... 30k). I believe the second component is wavelength, so in the ballpark of (380 ... 700). If someone knows better, correct me.
I am adding an image to a TinyMCE editor using:
var params = {
src: filename,
title: "Attached image: " + filename,
width: 500
};
ed.execCommand("mceInsertContent", false, ed.dom.createHTML("img", params));
This insert the image correctly in the editor. However, when the user clicks on the image he has the ability of resizing it.
I would like to know if there is a way to:
Prevent the user to resize only in one direction (i.e. how do I keep a fixed aspect ratio for the image)
Completely prevent the user to resize the image
I found a (partial) answer, so I thought I will share it here.
Adding
'object_resizing' : false
In the editor config prevents the resizing.
Note that this is a feature of Mozilla only (e.g. Google Chrome does not allow you to resize the image).
I am still looking for a way of keeping aspect ratio in real time, but I do not know if that is really possible.
You can simply add this little plugin to tinyMCE, I used it and it works very well!
Here's the documentation: Link
You would need to implement a resize handler (for example a jQuery handler).
It might be helpfull to add attributes to your images to save its dimensions or to use one single setting holding the aspect ratio. For this you will adjust the tinymce configuration setting valid_elements to allow those attributes for images - otherwise tinymce would strip them out.
When resize gets fired you grab the new dimensions and adjust the dimensions according to the aspect ratio - eigther adjust using the new width or new heigth (the other value is needs to get corrected).
Example: images have an attribute aspectratio holding the aspect ration
You may place this code in thetinymce setup configuration parameter
setup : function(ed) {
ed.onInit.add(function(ed) {
$(ed.getBody()).find('img').resize( function(event){
$(event.target).css('width', parseInt ( event.target.width * this.aspectratio) );
});
});
}
Update:
I have created a tinymce fiddle to show an example to use with IE.
First of all I will explain my situation so you can know my problem a little better. I'm making a HTML5 app. I have a canvas, and using a color picker you can change the color of the canvas. Now i have a picture which I want to put on the canvas but that pictures color needs to be changed using a color picker. So i need to replace, lets say, black color on that picture and put it on the canvas so it dosnt screw up the background.
So that will look like this:
1st color picker- changes the color of the canvas
2nd color picker - replaces the black color on the image with the one in the color picker and puts it on the canvas
Now my problem is how to replace the color on the image without reloading the page.
My only condition is no using silverlight, flash, java or any other similar tehnology that need 3rd party software to be installed on the device.
Thanks in advance.
If you dont understand my query fully, feel free to ask.
My approach with a JS only solution could be:
Loading the image inside a canvas element. Look at the MDC canvas tutorial
Trigger the user click on the canvas and get the pixel color (see links below to know how to get the color of a pixel) and look at this answer to get the mouse position
Substitute all the colors in the canvas with the one the user pick. For some examples about pixel manipulation:
Pushing pixel with canvas at Mozilla Hacks
http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/
This JS at mezzoblue apply heavy filter to an image
After some canvas experiment I notice that mostly in all the browser the pixel manipulation with canvas could be very slow also with small images. So another experiment to do could be to get the pixel color and then:
pass the color information to a PHP (or another server side script) with an AJAX call
do the color manipulation with an image library like GD or imagemagik
return back your image with the Ajax response
reload your canvas with the modified version of the image
Does anyone know how to use the Pixastic plugin and jQuery to where I could have an image fade from color to completely desaturated?
I am trying to avoid saving out two images and fading one out..
i did the inverse... having desaturated images fade in to color. achieved w/ only 1 image in conjuction w/ pixastic and livequery. i basically cloned the images, desaturated one of the copies, and stacked them on top of each other.... fading the top (desaturated) layer out on hover. i'm sure it could be more elegant, but it mostly works. you can see the effect at chicagointerhandball.org on all the "sponsor" logos
$('.sponsors').load(function() {
$('.sponsors').pixastic("desaturate");
}).each(function(index) {
var clone = $(this).clone().removeClass('sponsors').addClass('sponsors-color').css('opacity',.25);
$(this).parent().append(clone);
});
$('.sponsors-color').livequery(function(){
// use the helper function hover to bind a mouseover and mouseout event
$(this).hover(function() {
$(this).stop().animate({"opacity": 1});
}, function() {
$(this).stop().animate({"opacity": 0});
});
}, function() {
// unbind the mouseover and mouseout events
$(this)
.unbind('mouseover')
.unbind('mouseout');
});
Since all those pixastic image effects are generated on the fly I don't think it would be feasible to fade between saturated and desaturated. The saturation level of the image would have to be redrawn at each step of the fade. Your best bet would probably be to have two images, one saturated and one desaturated, and have them placed on top of one another. Then when you hover over one, fade in the other image.
Edit:
Just saw that you were trying to avoid having two images. Well, that's the only solution I can think of but I'd love to see if there were others. Depending on how many images there are, you could generate all the desaturated images on page load, place them on top of saturated images, hide them, and then fade them in on hover. Just a possibility.
you could get the best of both worlds by dynamically creating a duplication and desaturating that image with pixastic. Position the new desaturated image under the original and fade the original out.
You should be able to, it is in their jQuery documentation section.
// convert all images with class="photo" to greyscale
$(".photo").pixastic("desaturate");
Looks like this is possible with the canvas element.
With this you need to mix jQuery and the standard DOM calls. I was having the same issue just today about this. I couldn't get the hover to work cross platform from the examples given here and on their site. So I decided to think for myself on this one. Came up with a solution, hope it works for you:
http://you.arenot.me/2012/03/26/pixastic-desaturate-on-mouseover-mouseenter-mouseleave/