When a user upload an avatar for himself, I want to convert it into a circular image and then save it, as circular looks much more prettier when displaying in the page.
How can I do that in a simple way, as mine is a small application.
I have read about ImageMagick, but thats an option right now.
I read about masking or using another image as mask to do that.
Any simple method or way to do this.
Thanxx in advance!!!
The same as said before, the best option is store the image 'as is' and then apply rounded styles with css (this way you always have the original image).
But if it not work for you, you could use this: https://adamcod.es/2012/07/25/imagine-php-image-library.html && Crop image in circle (php)
Using imageMagik is this simple:
convert -size 200x200 xc:none -fill walter.jpg -draw "circle 100,100 100,1" circle_thumb.png
circularize an image with imagick
Related
The effect I would like to generate is exactly like the example in
this StackOverflow thread: (Related Question)
1.Resize image
2.Keep proportion
3.Add or Fill none-image areas with white background
Here are three examples of this process below:
1. If original is square no matter 640*640 or 1024*1024, just resize it to target dimension e.g. 480*480 will work.
If the original input is vertical rectangular,the output should not be cropped
and still be centerlized as below (the red dash edge marker is just make it easier to see the background is white and the proportion is kept after image resized to 480*480 px)
if the original input is horizontal rectangular, output like below, white background, keeps proportion and image uncroped , thus without losing anything after the image processing.
So after I've clarified such a question,
I would like to know:
Is there a general name of such Custom Image Resize mentioned above?
would like to know how to achieve it using php image library Imagine?
is it doable using php-imagine, or have to switch to another library, e.g imagemagick?
P.S. If you would like to achieve the effect either in image-resizing or video resizing, you can use below FFMPEG single-line command.
(thanks to #Mulvya, yes below code applies both to videos and image formats)
[run below built-in code in ffmpeg console to achieve the mentioned resize effect]
[video resize]
ffmpeg -i "[raw video url or videofile location.mp4]" -vf "scale=iw*min(480/iw\,480/ih):ih*min(480/iw\,480/ih),pad=480:480:(480-iw)/2:(480-ih)/2:color=white" [save_path_and_filename].mp4
[image resize]
ffmpeg -i "[raw image url or imagefile location.jpg]" -vf "scale=iw*min(480/iw\,480/ih):ih*min(480/iw\,480/ih),pad=480:480:(480-iw)/2:(480-ih)/2:color=white" [save_path_and_filename].jpg
Sorry i don'T have full answer for you and it's too long for a comment, but this can be done natively using some maths and php's http://php.net/manual/en/ref.image.php
Check in the area of imagecopyresize() imageecreate() imagescale and so on. It a pretty complex lib so you will have to do some try and mistake to get where you want to go.
From experience you can:
create an empty image, imagecreatetruecolor()
change background color to white
take a scetion of an image and paste it in the new created image using imagecopyresample() imagecopyresize()
export this image ans gif, png, jpg. imagepng(), imagejpg().
add watermark
and ALOT more.
Sorry i don'T have a more complete answer but depending on your need it can take a few mitues/hours to make it perfect. have fun.
On top of it, if you know ffmpeg, you can make both work together and make awesome media outputs. Cheers to you
I am trying to convert pages of content, images, text and links to solely images, this would be easily done if it weren't for the fact the links have to stay the same (still work) (I have toyed with the idea converting links to hard text so they can be read but that changes the way the content's layout).
Both the text and images will use Inconsolata because it is a "Monospaced font" which allows us to assume that there will be 66 characters on each line providing the font is set to 18px and the max container (div) is 595px.
My plan was to count the characters and to get the sizes for creating the images and "cutting up the links" related question: How to count characters on a single html line with PHP.
A small example of what I am talking about would be to convert text like below (pretend it's text currently):
And using PHP or any web language that will do the job fast, work out where the link(s) are and to create images that allow the new image version to contain working links and is exactly identical to the text version in looks and function (links).
I would change the link background and foreground colour to a colour that does not occur in your image and render the page using webkit2png. Then find the blocks of colour corresponding to your link colour using ImageMagick to make an image map.
So, in concrete terms, let's say you change your HTML to set the foreground and background colours of links to red (#ff0000) so your HTML looks something like this:
<p>
A link to Google follows:
<a style="color:#ff0000;background:#ff0000" href="www.google.com">Google</a> - a link to Google.
</p>
Then you do
webkit2png a.html
which gives you a PNG file like this:
You then use ImageMagick to colour everything not red to black, like this:
convert fileUsersmarktmpahtml-full.png -colorspace RGB -fill black +opaque "#ff0000" x.png
Then you tell ImageMagick to trim the background, leaving the red block only, and look at its coordinates with identify and you can see where the link is to get the coordinates for your image map.
convert out.png -trim y.png
identify y.png
y.png PNG 47x18 800x600+176+16 8-bit sRGB 2c 3.18KB 0.000u 0:00.000
You can see the red block is at offset +176+16 into the image.
You may want to do one link at a time, and re-render, or multiple links. If you do multiple links, either ask another question about finding multiple blobs in an image, or search for other answers (by me) with the words connected-components in them. If you get stuck, say, on choosing unused colours, or finding multiple blobs, just ask another question - they are free :-)
If you have multiple links, more like this:
<!DOCTYPE html>
<html>
<body>
<p>Here comes a link...
<a style="color:#ff0000;background:#ff0000" href="www.google.com">Google</a> - a link to Google.</p>
<p>And there will be another (longer) one along shortly...
<a style="color:#ff0000;background:#ff0000" href="www.google.com">Google, but longer</a> - a link to Google.</p>
</body>
</html>
You run the webkit2png as above and then anayse like this:
convert out-full.png -colorspace RGB -fuzz 10% \
-fill black +opaque red \
-fill white -opaque red \
-define connected-components:verbose=true \
-define connected-components:area-threshold=100 \
-connected-components 4 -auto-level \
output.png
Output
Objects (id: bounding-box centroid area mean-color):
0: 800x600+0+0 399.8,301.1 476976 rgba(0,0,0,1)
2: 121x18+357+50 417.0,58.5 2178 rgba(255,255,255,1)
1: 47x18+140+16 163.0,24.5 846 rgba(255,255,255,1)
Now you can see the blobs corresponding to the links in the second and third rows. You can crop those, and the pieces either side, out of the image using ImageMagick's crop tool like this:
convert input.png -crop 121x18+357+50 firstLink.png
convert input.png -crop 47x18+140+16 secondLink.png
Have you considered using image map? With an image map you can define clickable hot-spots in an image. This way there would be no need to cut the image into multiples. The calculation of the link's coordinates should be possible the way you detailed in your question. As long as the font is monospaced (refering to halfer's comment)
image map docs
Well it seems that you are doing slightly more than converting text as much as converting HTML (maybe text only HTML) since you have the ability to have a link. And since you are talking about a div with a width you also need to perform word-wrapping (which in itself is actually harder than it sounds). When you start getting into things like that then you will start looking more and more at a HTML parser.
Wouldn't a imagemap suffice ?
What do you plan on doing when a link spans multiple lines? or non-english languages (some languages are read right to left instead of left to right)?
A imagemap is my initial choice, then if that's not acceptable then I would suggest moving away from PHP to a different language (I would recommend Java).
Can you provide some more details about the broader project you are trying to put together?
I have a default image that I want my users when they first create their profile to have, and I need to each one of them have a different background color but with the same base shape that will be in a png file, I can do this by creating for each background color create a png but I dont think it might be the best choice. How can I do this?
Use Imagick extension to work on your image. You can set a background color for your transparent png image by simply doing this
shell_exec("convert testimage.png -fill '#CCCCCC00' -opaque none image_wth_bgcolor.png");
This will give a slight gray(#CCCCCC) background to the the image.
See this link.
My suggestion is to create a png file for each colour (which seems to be the only way)
and use PHP to randomly pick one of the images.
Im trying to convert a PDF or JPG file into a png with specific colors being transparent.
For example. I have a file with white background and black text and would like to convert the white area to be transparent on the png
I have tried using imagemagick :
exec('convert -density 144 ' . $infile.' -transparent "#FFFFFF" ' .$png_file);
and this seems to work at times and not other times for some reason
also the edges of the black come out kind of jagged. Does anyone know of a way to make the edges smoother. or any other function in php to use to create the transparency.
Also the quality needs to be perfect as well as sometimes when the dimensions of the file are small the output png is very low res and i need to keep it at the same dimensions so i cant really use the -density function
You can overcome the jagged edges using the fuzz factor option -fuzz, but as the usage manual explains, the results may or may not fit your needs.
Background removal is also discussed at length in the usage manual, describing several techniques besides using the -transparent option.
Without more information, I don't know why your conversion code works sometimes and not at others, but I don't think you need the -density option for JPG conversion. That might be the problem.
Ok, I searched the internet and stackoverflow but I just can't seem to find an answer for my problem.
I need to watermark images uploaded by users dynamically, but I don't want just text applied on an image. I need a real watermark like this:
The only way I can achieve this effect is by using Photoshop, adding shadow and decreasing the filling to 0%. But if my site is visited by 200 users who upload their images, I just can't make for everyone of them a new PNG file with their user name. That's why I'm looking for a dynamic solution for this problem.
I already found classes how to add a png file as a watermark to images, but like I said before this won't work if my site is visited by a lot of users.
I hope someone knows a way how to solve this and get the same effect on images dynamically.
Thank you very much.
The documentation of the ImageMagick image processing library includes such a transparent watermark example. Even if you would like to use GD instead of ImageMagick, it might give you an idea of how to do it.
You can use imageMagick to do this with PHP. Do some Googling for PHP imagemagick watermarking, this thread may help some:
http://www.imagemagick.org/discourse-server/viewtopic.php?f=1&t=17067
You essentially want to make a PNG file of your watermark. The PNG will allow for alpha transparency and you can get your drop shadow effect etc.
This will then be applied to your JPG image, and a final watermarked JPG image will be made with your PNG added on top of it.
Should work.
The other answers here are great answers, but I wanted to throw in an alternative.
You can dynamically build scripts for the GIMP to execute, which gives you tons of flexibility. This is way overkill for a simple watermark, but if you needed to do some more complex image processing, it is definitely an option. CoolText.com is an example of a website that does this.
The same approach should work in Photoshop as well. In fact, you could probably instantiate Photoshop's COM interface with PHP.
Again, I don't recommend this for basic watermarking... just if you need more functions than what is provided with ImageMagick/GD.
To the other answers I will add that you should not be generating the image on the fly. If the watermark is by username, generate the watermark file once when the user registers for your site (or changes their username), then use that file as an overlay for the uploaded images. This will save a lot of CPU time.
Use the following command:
magick convert input.jpg ( -size 960x640 xc:none -font microsoft-new-tai-lue -pointsize 90 -fill black -annotate +120+370 Watermark -blur 0x4 -fill none -annotate +125+365 Watermark ) -flatten output.png