I have a php/mysql driven database, where image paths are stored for specific pages. The images are all hosted locally on my server. Users can upload images, and the data is then stored in mysql.
I would like to enable users to draw on top of rendered images.
Do I need JAVA to accomplish this?
Are there other APIs or languages that can aid me in my goal?
Basically, I would just let users draw "on top" of the existing image. Somehow their drawings would be saved to a .png, which I can then overlay on top of the original image. However, I'd like for the user to be able to choose the color, etc. Also, I would like to limit how much a person can draw on each photo per 24 hour period.
So, what do you guys think? Flash? JAVA? Php (if I should be so lucky)? I would love to hear your thoughts on this.
JavaScript.
The HTML5 Canvas might do the trick.
You need not to use Java. You can do that with PHP Canvas programming or in client side javascript canvas.
http://www.phpjabbers.com/put-watermark-on-images-using-php-php20.html
http://motyar.info/blog/2010/04/drawing-on-web-with-canvas-and-jquery.html
Look at SketchPad (http://mudcu.be/sketchpad/) - it has examples of everything you want to do in HTML5 / Canvas, but note that a downside of the Canvas approach is the "save" is a little clunky and seems to be browser dependent. You need to convert the image to a data uri, then save it using the available browser commands manually (like right click and "Save As").
Related
I have am planning to use Colorbox the jquery lightbox plugin. I am just wondering as to what the best method would be to implement a 'add/upload image' option so it would be easy for a user to upload new images without having to go into the HTML markup and add an individual <img> line of code for each new image.
I am only currently knowledgeable with HTML and CSS at this current time. So if no one already has a snippet they could possibly provide me with, which language would be 'simpler' to learn for just for this specific task. Would it be PHP or Js or something different?
OR am I going about this completely wrong?
Of course they have to upload images to database. You need a suitable back end design. That means you need php to interact with database(or python will also do). If you need dummy upload procedures then you can easily do it with appendTo() method using jquery.
As you are using a plugin, then you will have a method to add an image to the webpage. It will be something like $("user-uploaded-image").plugin-name();
Where you want to upload the image?
Uploading an image means transferring the image to another location (server). For that you need a server side script that
Receives the image.
Saves the image to server hard disk.
php is a server side scripting language.
JS is client side language that is used to sending requests (in this case image ) to server.
Just google it for getting sample image upload scripts.
From taking a look around google for upload scripts suggested by #kiren Siva I came across quite a few CMS type plugins that give me the ability to do exactly what I need.
Some examples can be found here.
Thank you all for your help and suggestions.
I am looking to create a small app that allows a user to create a custom cover for a book. The client doesn't want to just be supplied with what the customer selected but a print ready 300dpi JPEG or PDF.
I know PHP can handle most of this. But the customisation seems to be a bit difficult to get right. I have tried using canvas to create the client side preview, which work ok enough.
Just to see if I'm wasting time trying to recreate the wheel, does anyone know if something like what I need exists already?
Basically it would be something kind of similiar to this but for creating print ready images.
Thanks!
If you're using Canvas for building the editor, for the best results, I'd recommend you re-render the customization on the server using whatever technology fits your need in PHP and not try to take the image they're looking at and make it work somehow by sending it to the server. The DPI will be wrong if you use Canvas in a standard way (it will be at the screen DPI).
For example, if they have the ability to place an image, then just note the coordinates and place the image in a web server created image at 300 DPI. Text, same thing, etc. Yes, it will be extra work, but it should be of higher quality and better consistency.
This would imply that there's a simple serialization format for the representation of the custom cover that is sent to the web server.
You might be able to use SVG, but you'll have to introduce a reliable SVG to PDF conversion and handle fonts. Maybe something like this? (I'm not sure that building an SVG editor would be easier than Canvas based).
Starting from your "work ok enough preview", jsPDF will be able to generate a PDF right from the browser in a breez.
convert the canvas to a image/jpeg (toDataURL will be your best friend)
instanciate a jsPDF object, add the image
output the jsPDF object
Tricky details:
beware your screen displays stuff with 72dpi but print expect 300dpi. So you can up scale your canvas then draw the image within the pdf PDF
beware to Cross Origin Resources: if you are using images outside your domain, you are doomed (or you will need a proxy)
I am working on a project that consists of a online store, to sell Printed Circuit Boards.
But the hole system will be automated, and will be able to view online the Gerber files (Gerber are the files that has the machine code for the pcb).
I need to choose the best way to "output" this file uploaded by the user, to the webpage. Only for viewing the PCB before buying.
I have done the entire PHP code to process the Gerber, but, I can't decide if the file will be proccesed, and then:
I will save as a PNG file (rendering will be done with the PHP image library {that is a shit}), and if the user zoom, or do anything, it will not be perfect... (I would need to render in a high resolutiong, and would take a lot of space, and also time to load)
Render as an SVG file (Vector file), and show on the HTML as an mbeded element (Does it work on all new browsers? Is it slow to proccess?), The SVG file are awsome in terms of drawing lines...
And the last but not least way to doit, is to create a list of JavaScript commands, that draws on a Canvas Element (I have already implemented this, and works really good, but I don't like to think, that I'm actualy 'rendering' to a code...)
Anyway, what do you think I should use, and if I didn't tought in another way of doing it, please tell me!
Here is an example of the output as Canvas (With the source being a JavaScript function object, that has many drawLine commands):
I'm opting for SVG file, even if it's slower than canvas, but considering that won't be real time drawing process in terms of user interaction with the drawing object it's a good choice. SVG's are actually vectors, hence the images won't be crispy on large images. There are some quite good libraries out there which are working with svg-s like:
http://processingjs.org
http://d3js.org/
http://fabricjs.com/
http://raphaeljs.com/
I think d3 is one of the best. I definitely wont' recommend PHP image library.
Currently I'm working on a project in which user of website can design a giftwall by drag and drop of gifts. Drag, drop and sorting works perfect and I'm able to store generated giftwall into database. On recipient side system lists all the gift images in the same sequence sender sent so it visually looks like a giftwall. I want to allow users to store this giftwall into a single image so they can store their giftwalls into image album. In current system it lists all individual gifts into a individual div resided in main wrapper div. How can I export this wrapper div to image so it looks same as HTML. Any help will really be appreciated. Waiting for reply.
Thanks!
I don't know if there is a way by using pure javascript, but you can generate the image on your server and send it back.
I have never heard of saving browser's viewport to an image file via JS. I think it's only possible vie creating SVG or using HTML5 canvas.
I asked exactly the same thing a while back.
HTML div to screenshot?
The conclusion is... it is not possible with JS. Questionably possible from PHP also.
Use can use an online service for screen capture, like browsershots, but its not in real-time, and doesn't render everything well.
I used a workaround for my situation.
Recreated all the DOM/HTML elements which create the image (load parameters form database, and generate the DOM). Wrap everything in one container div, and zoom it out to the size you need.
I know, not the prettiest solution, but the only solution I could get to work.
Using <canvas> you can create image that will looks similar to how it looks on the page. Try it this way:
Get the size of wrapper <div> and create the same canvas element. Then get the position of each image in the div wrapper and draw that image on canvas at the same position with the same size.
Things may be harder if you need to draw additional controls, like button or textbox.
All modern desktop browsers suport <canvas> now.
You can either use html2canvas, which isn't perfect yet. Or store browser offsets of elements in div and then with GD or ImageMagick combine them into an image
Maybe this could be of use: http://html2canvas.hertzen.com/
I am trying to develop a website in which you can scribble on an element and want to share it to all who is seeing the page using ajax. A miniature version of whiteboard. I have know Idea where to start. I have decent understanding of Html, CSS, Javascript(Jquery)and PHP. I am having a starting trouble. No idea what all technologies and methods to use.
You should create an HTML5 canvas element and position it above the element. On the canvas you can implement a simple scribbling functionality (such as the one here).
When you want to sync the scribbling to the server you can use the Canvas's toDataURL method to post the image data to the server using ajax.
On the server you can decode the base64 encoded dataurl and distribute the image as a regular image to the other viewers.
try to implement a single-user wihteboard with canvas. thats a method to draw something on websites, not limited to vector-graphics.
if you're done with this try to communicate with a central server via ajax and upload the canvas' data. then it's possible to distribute your new content to as amany other clients as you wish. and if they modifie it, reupload the new data.
as an alternative for canvas you may want to try a svg approach. this could bring some benefits as the data you will have to send over the internet is smaller, but ie is like always...