I've a very strange requirement, I've an image(Image has slight gradient effect) which center portion need to be shown with the color change with the user score
colour 255,255,0 for High Score and 155,155,55 for Low Score
Now I want to know which way should I do it, I tried it with the HTML5 Canvas but that wouldn't work with the IE, so I'm discarding this option
I don't know it can be done with the css or not
Or with the GD lib using PHP
HERE is the image
http://i47.tinypic.com/b88l13.png
Thanks
I have developed several projects using the Processing.js library and I fell in love with it. If you want you can try it, you could do what you asked in a few lines using
http://processingjs.org/reference/tint_/ .
PImage b;
b = loadImage("http://i47.tinypic.com/b88l13.png");
void setup(){
size(200,200);
}
void draw(){
tint(255, 0, 0);
image(b, 0, 0);
}
You may want to split the colored (pyramid) part from the background and only tint that part.
Note that in the demo I have used the Base64 version of that image to avoid cross-domain policy issues.
DEMO: http://jsfiddle.net/CrUja/
It works in IE9 and I think you can make it work in IE8 using http://code.google.com/p/explorercanvas/ (or maybe Processing.js already has this integrated)
Related
I have a problem with getting fine contour of the image.
How to do it with PHP Imagick?
Input image: Imagick wizard
Plan #1 Outline
Get image with (more/less) clear, consistent background (for example: white, red or transparent)
Remove background if it is set
Add outline (specific color)
Remove image inside
Result: http://i57.tinypic.com/2wg91qx.png
Plan #2 Sketch
Get image with (more/less) clear, consistent background (for example: white, red or transparent)
Remove background if it is set
Add sketch effect
Remove image inside
Result: http://i60.tinypic.com/az9vr5.png
PS:
borders and/or shadows didnt' work for me well
There are many ways to outline a picture. Here's one of them that does more or less what you wanted. Note that wizard's picture requires some extra processing. First background isn't fully white (it has some #FEFEFE or alike pixels). Also what is more troubling the upper part of the desk is filled with pure white. So you can either use white pixels after blurring as background (my way) or try to flood fill from the corner with matteFloodfillImage(). However this may leave space between desk legs not transparent.
function drawImage(Imagick $i)
{
$i->setImageFormat("png");
header("Content-Type: image/" . $i->getImageFormat());
echo $i;
exit;
}
$o = new Imagick('wizard.png');
$o->setImageBackgroundColor('white'); // handle tranparent images
$o = $o->flattenImages(); // flatten after setting background
$o->blurImage(5, 30);
$o->whiteThresholdImage( "#F8F8F8" );
$o->blackThresholdImage( "#FFFFFF" );
$o->edgeImage(5);
$o->negateImage(false);
$o->paintTransparentImage($o->getImagePixelColor(0, 0), 0, 2000);
$o->colorizeImage("red", 1);
drawImage($o);
Sketching is a little more complex and I would recommend further reading on IM capabilities http://www.imagemagick.org/Usage/photos/#color-in
I use the below code to create polaroid effect, but its really distracted without any transparent effect around.
<?php
/* Create the object */
$image = new Imagick('wood.png');
/* Set the opacity */
$image->polaroidImage(new ImagickDraw(), 25);
/* output the image */
header('Content-type: image/png');
echo $image;
?>
I get result like http://photoapp.biz/polaroid/test.php
Orginal image is http://photoapp.biz/polaroid/wood.png
What will be the problem? This occurs in almost all 10 images I've tried.
Example:
Correct me if I'm wrong but you are really asking about anti aliasing, aren't you?
http://www.imagemagick.org/Usage/antialiasing/
Transparency is set with Imagick::setImageOpacity
$image->setImageOpacity(0.7);
Besides maybe you need to work with another image format:
That said, some web browsers however do NOT display transparent "PNG"
images correctly (most notably Microsoft Internet Explorer v6, though
IE v7 does). Because of this I generally prefer to use JPEG and GIF
image formats, and only use PNG when generating images with
semi-transparent pixels, or requiring a exact colors for later
examples.
Source: http://www.imagemagick.org/Usage/#PNG
EDIT 1
try
$image->setBackgroundColor(new ImagickPixel('transparent'));
Try this function http://php.net/manual/en/function.imageantialias.php.
What it does is:
Just be aware that IMAGIC can be compiled in many different ways and you might have different effects across different environments.
I use Soundcloud for my tracks.
I'm using their jquery player to place a widget on my new site, as you can see on the top right:
The problem is, the waveform Souncloud provides is a one colour only deal:
My goal: To change this waveform PNG from curent colour to black, but client side.
I know I can change things using PHPs GD library, and I've done this successfully with a test image on my server using this code:
http://php.net/manual/en/function.imagefilter.php
(Search for "IMG_FILTER_BRIGHTNESS")
<?php
$im = imagecreatefrompng('hello.png');
if($im && imagefilter($im, IMG_FILTER_BRIGHTNESS, -255))
{
echo 'Image brightness changed.';
imagepng($im, 'hello.png');
imagedestroy($im);
}
else
{
echo 'Image brightness change failed.';
}
?>
It works perfectly! BUT
It changes the actual image on my server! Pretty cool, but not possible...
Obviously I cant change the image on Soundcloud's server (all the data, images, music comes from there API)
So What I'm looking for is a way were I can change the colour of the PNG client side, on the fly. I have a lot of tracks on there, so basically each time the user clicks next or previous, the waveform loads in and before it does it needs to change that image's colour :-?
Is this possible?
To see the player in action on my test site
(the styling on that one is old, by the way, but it's functionality is correct)
http://marckremers.com/2011/
NB the entire site does not work beyond what you see there. Still a WIP.
Thanks so much
This would have to be done client-side using Javascript, either a fully JS solution or one that uses AJAX to send it to PHP, then receives the final image.
You can try the Pixastic JS library:
http://www.pixastic.com/lib/docs/#intro
If that doesn't work, I would use jQuery to read the image, send it to a PHP script using JSRS/AJAX and then replace it on the page.
I am working on a new site and would like it to be able to add effects to photos uploaded. (Blur, Pan, Swirl, Sparkle, Border, Frames, etc ) I would like the photo manipulation to be in PHP if possible. I need the user to be able to upload the photo, make the edits, then save the edited photo to their computer.
This may be better as a separate question, but if at all possible I would also like the user to be able to save the edited image as their Facebook profile image.
Try PHP extensions for ImageMagick It's a standard, tried and true image manipulation library.
From the homepage:
Use ImageMagick to translate, flip,
mirror, rotate, scale, shear and
transform images, adjust image colors,
apply various special effects, or draw
text, lines, polygons, ellipses and
Bézier curves.
If you consider using the MagickWand PHP extension:
The MagicWand docs start off with a nice PHP code sample shown here:
<?php
$magick_wand=NewMagickWand();
MagickReadImage($magick_wand,'rose.jpg');
$drawing_wand=NewDrawingWand();
DrawSetFont($drawing_wand,"/usr/share/fonts/bitstream-vera/Vera.ttf");
DrawSetFontSize($drawing_wand,20);
DrawSetGravity($drawing_wand,MW_CenterGravity);
$pixel_wand=NewPixelWand();
PixelSetColor($pixel_wand,"white");
DrawSetFillColor($drawing_wand,$pixel_wand);
if (MagickAnnotateImage($magick_wand,$drawing_wand,0,0,0,"Rose") != 0)
{
MagickEchoImageBlob( $magick_wand );
}
else
{
echo MagickGetExceptionString($magick_wand);
}
?>
Similarily, documentation for things you seek:
blur
swirl
frame
magnify
and a plethora of others.... On that the main documentation page see all methods listed by searching for the heading: "MagickWand For PHP Methods".
I am looking to build an app similar to santayourself (facebook application) a screenshot below
The application will accept a photo and then the users can move it with controls for zoom and rotate and moving image right, left, up and down. Then once the face is as required then the user can click save to save the image on the server (php, apache, linux).
Any recommendations on how to go about this project? I guess a javascript solution will be better. Any suggestions welcome.
javascript AND php GD-library would do it - most of the things described above can be done w javascript alone. The fastest way to do this would be to have the santa mask done w a transparent png absolutely placed over a simalarly placed client photo that is however placed in a div the same size as the mask with overflow set to hidden. Since the client phot is absolute within the div it can be moved around and its size can be manipulated by the user through some mechanism as shown above. However - rotation will be a bitch and here you will have to use php gd-library or image majik (personally i would dump rotation). This is a simple-ish job but time consuming - the user-interface to image manipulation is tricky tho. If the output for this is for print-from-screen i would not bother w further server-side manipulation, but rather just store the image to mask positional relationship (1/2 kb) of data...
yep. javascript is the way to go about interactive things like this. I can see this easily being done with a simple script and some PNGs (though you might have to do something creative for the rotation). PHP would only be needed for saving.
EDIT: Actually, now that I think of it, a HTML 5 canvas approach would be best. It's got lots of transformation and pixel-manipulation methods, and can even save the image client-side! Remember, though that HTML 5 is not supported in all browsers (basically everything except IE).
(HTML 5 Canvas Spec)
The drawImage method is what you're looking for:
(I quote from spec)
void drawImage(in HTMLImageElement image, in float dx, in float dy, in optional float dw, in float dh);
So, your HTML would have a canvas element that draws the user's picture:
<canvas id="canvasElement" width="xx px" height="xx px">
<!-- What to display in browsers that don't support canvas -->
<p>Your browser doesn't support canvas</p>
</canvas>
Then, your javascript:
var view;
var context;
var userPhoto=new Image;
userPhoto.src="uploaded.jpg";
// Update these with UI settings
var position = {x:x, y:y};
var scale;
var rotation;
function init() {
// Run this once at the loading of your page
view = document.getElementById("canvasElement");
context = view.getContext("2d");
}
function update() {
// Run this every time you want the picture size, position, rotation updated
context.clearRect(0, 0, view.width, view.height);
// Scale X and Y
context.scale( scale, scale );
// Rotate (convert degrees to radians)
context.rotate( rotation / 3.14159 * 180 )
// Draw the image at X and Y
context.drawImage( userPhoto, position.x, position.y )
}
HTML 5 Canvas is very powerful, so there's tons of other things you can do to your image if you go this direction. However, another viable solution would be to use flash, which is supported everywhere — but I recommend HTML 5 as it is the way of the future (Steve Jobs: Thoughts on Flash).
Have a look at the jCrop library (jQuery), you may be able to tweak it enough to do what you want to do.
http://deepliquid.com/content/Jcrop.html (they obviously supply a few demos)