I can use GD or something to draw user-selected shapes by writing some lines of code, but is there a library that is already taking care of it?
There are just 4-5 shapes that a user can select and text needs to be placed too.
If you want I think you want (to draw in browser without using server side scripting) check this article out, perhaps you will find what you need:
10-jquery-drawing-plugins
Enjoy!
Related
I had created one wordpress site. I want to make all post downloadable by converting it to image.
I tried using canvas but didn't succeed.
Can any one suggest me better working way on wordpress which lets me convert my post to image and make it downloadable?
I want to make post covered with specific div so that i can define size of content to be downloaded.
Like this HTML2CANVAS but I am unable to do.
PS-I have very small size of content in every post
I think your options are
Use some third-party service, such as http://web-capture.net/ or https://www.url2png.com . Most of them, especially the ones with API that you can call on-demand, will cost you, but there are free alternatives.
If you have access to linux console and some basic knowledge about it, the best approach is to run a real browser (if you're using a headless server, use Xvfb) with your post URL and make a screenshot with ImageMagick. You can crop the image to remove browser header etc. A working-grade explanation here http://www.leonardteo.com/2011/07/taking-server-side-screenshots-of-websites/ .
In both cases PHP will be just the trigger, whether it will call third-party API or your local shell script.
I'd also suggest to avoid JPEG format as it doesn't really play well with text. Use PNG instead.
You may try rendering the text with imagettftext() as #Progrock suggested, but this will be a huge pain, because you obviously have text with more than one line. First you need to determine the width of your image, then use imagettfbbox() to roughly estimate how many characters you can fit into one line, split your text into chunks of that size and write then one by one, adding the Y coordinate. Bonus points if you need paragraphs here... Make sure you're using monotype font, because it won't ever work properly with variable-width letters. look through comments here http://php.net/manual/en/function.imagettftext.php.
My advice - stick with the browser :) You can resize the browser window and crop the extra part.
I want to draw a dynamically generated line that bends around n points in php, depending on input. I know I could use image arc and painstakingly get the curves to overlap at the proper angles so that multiple curves give the illusion of a single bendy line. But is there is an easier/cleaner way?
I basically want to do this:
If you wish the client side to render this I recommend using the canvas tag
See reference here: http://www.html5canvastutorials.com/tutorials/html5-canvas-bezier-curves/
Or use imagemagick backend if you with the server side to do it
look up Bezier Primitive on page http://www.imagemagick.org/Usage/draw/#bezier
You could use ImageMagick to create an image of the output you want. I've always found it pretty straightforward.
eg
http://imagemagick.org/Usage/draw/#bezier
http://php.net/manual/en/imagickdraw.bezier.php
I have a project to draw relationships between different elements determined on a sheet.
When the user has finished making the plan, it can export it to a txt file that contains the links.
A bit like MS Visio but with only three or four elements draguable.
Does anyone have an idea of this project using web languages (php, js) ?
Thank you in advance.
I am not so sure of your question but if you want to draw graphs using php variables with javascript, then the html5 canvas is probably your best bet in terms or proffessionality with design and implementation.
Only downside is it is javascript only, and the user must have a browser that supports canvas.
Take a look at Raphael, you can make your users draw anything you want, export the structure as JSON,for example, and treat it with any language you want
Take a look at this Raphael example to see an interconnected graph
I was wondering if it was possible if I had an image like:
I would be able to change certain parts of the images colors. For example if I wanted the bow green and the present red with yellow stripes, would I have to make a new image that had that or is there a way to program something (elegantly) along the lines of that? I'm just asking to see if its possible and if it is, what language would be best to do this?
Keep in mind this would be a feature on a website.
That's not going to be easy the way the image is. You have no way to tell the computer which part is the bow, which part is the stripes, and which part is the box. However, if you pre-colored them, you could do a color replace using GD library or imagemagick pretty easily. You'd do this in PHP. Here are some examples of how you could do it, I'd personally go the imagemagick route.
How can I replace one color with another in a png 24 alpha transparent image with GD
http://www.imagemagick.org/Usage/color_basics/#replace
(this example even has a similar gift box as the usage case, hehe)
Try leaving the parts you want changable transparent. Then, give the div it's in a hover state with the second background color.
You could:
Use an indexed-color image and change the colors in the palette.
Use #MT's suggestion, though it kinda gets out of hand with multiple colors and jagged regions.
Pick control points and fill ("floodfill") the image through them - programmatic version of using the bucket tool.
Use #profitphp's suggestion, which is really better my last one.
Abandon compatibility and use the new canvas element while it still has the "cool" factor :)
i presume this is a web-based painting application; you'll require a human to tell you what the parts are, and where they want the coloring to be.
The issue then becomes how to perform a flood fill at the user's request.
The best i can suggest is perform the flood fill server-side, using an image processing library - handing back the image to the user:
There is no javascript ability to access pixel data of an image.
Edit: Performing flood fill with HTML Canvas
I interested, how can i draw 3d image in runtime using PHP,JS. (or what other programming language suggested for this..)
Specfically: I have a database-table with two filed. user and candle. For example Michael,100 means that Michael has 100 candle.
If i have a 10x10 candle image how can i use this image to draw a "3d candle image", something like this
So i have for exapmle a 300x300 DIV and i would like to fill in with the candle.png in 3d style. If the user have 3 candle in the database, then fill in with 3 candle randomly, if user have 30 then fill in with 30 candles..
Please help me how can i start this?
Rendering 3d graphics, while possible, is not really what php and javascript are created for.
If you are looking for a method of outputting pre-rendered images of candles to your page, then this is very easy with these languages, however I think you need to make your question more specific for a useful answer.
If you can run arbitrary code on your server, I recommend creating a program using something like http://liballeg.org/ that runs with CGI and querying it from within javascript. I think you are looking for what is called an affine transformation; look it up; I believe that allegro supports them.
How to approach this depends on how you want it displayed to the user, for example, if the user should be able to rotate the image then it would need to be done close to the user, ie on the browser.
If it is just a static bitmap is the final outcome then doing it on the server may be best, for performance.
Either way, it is a great deal of math involved, but I will assume you know the mathematics.
In order to do it in PHP you can use gdlib to save the image, and look for any examples in C on doing raytracing. It will be slow, and will be a performance hit on your webserver, but there are solutions to that.
If you want to do it in javascript, then your best bet would be to use the 3D canvas (https://wiki.mozilla.org/Canvas:3D), but this has very limited browser support at the moment, but it does give you access to an openGL API.