I want to create a programme that can
take text input from user and adjust anywhere in specific div
change font, fontcolor and size as per user selection
upload image as background
save whole customization and send as email
with help of PHP/JavaScript
Can anyone suggest how to do this.
Main issue is create image from user customization.
An existing programme to do this is also acceptable
I am programmer and working on php javascript magento
EDIT
Reading your description, it doesn't sound like you really need a screencapture-like version of the content the user created, you just need an HTML embedded editor and a way for someone to upload an image as the background with a way to preview the result. You can send emails with backgrounds using CSS.
(Not sure what you mean, but I presume you can figure this one out)
Use TinyMCE for an editor: http://tinymce.moxiecode.com/
Use jQuery AJAX file upload plugins (maybe http://www.uploadify.com/)
Submit the form (with the selected settings and edited html) to server and process as email
Try here for how to add an image to the background of an email:
http://www.campaignmonitor.com/blog/post/3170/adding-background-images-to-your-email-in-two-simple-steps/
Related
I'm trying to create a website where users can fill out a form and submit a design (via upload) and show a preview of the uploaded design/image on another image (preview). Basically it'd be like Threadless or Overnightprints.com where the user fills out the form, chooses the color, and uploads the file, then a preview would show the mockup (the uploaded graphic would on the shirt in the color chosen).
I'm not even sure what this is called exactly so if someone can point me to the right direction that would help immensely. Ideally i'd want to do this in wordpress but i'm open to any platforms that will get the job done. Thanks!!
Here is a TODO list for you:
[HTML] Create an upload form
[PHP] Process the form (validate and save uploaded data)
[PHP] Generate the preview image (image manipulation is done in PHP using fg.GD library - for a quick start see this)
[HTML] Output the preview image
Good luck!
I would like to implement a RTE (Rich Text Editor) with the ability to upload images anywhere inside the text. My aim is to create an "add / edit news article" page, where the client can write a story with images.
I am good at PHP and Javascript programming, so I am looking for help about methods of implementing this. Do I create a custom button in this RTE to insert a previously uploaded image or some other way? How do I display those images for the user to choose? Etc.
Bonus points for:
Multiple files upload: the ability for the client to just select e.g. 10 images that are relevant to this story.
Uses some method other than Flash as a default for upload.
Uses jQuery as I use it a lot.
RTE is very lightweight. I don't care if the client has to know a few things (like markdown or something similar), I just don't like bloated RTEs.
Uses new technologies, like HTML5 and / or CSS3.
Let me clarify a few things. I know a few Javascript RTEs and have also used them in several CMSs. So I don't need links to these, I can Google "javascript RTE" myself :). However, something like #hakre said is useful as he pointed out how extensible CKEditor is, which I was not fully aware.
To give an example of the answer I'm looking for: "you can do this with CKEditor, upload images asynchronously with jquery-html5-upload, save all uploaded image filename in a Javascript array, create a new button inside CKEditor with a custom click handler, which displays an overlay with Fancybox and you show all the images (you have filenames stored in an array), user clicks an image and you insert html into the editor".
Something like that but better :) (or should I say accurate).
Anything in here that meets with your reqs? http://ckeditor.com/developer-features
You taken a look at TinyMCEor CKEditor?
The "fake answer" you gave yourself is quite accurate. You would need a RTE editor that supports custom functionality.
The logistics would go along these lines:
User presses a button
An empty div is appended to the input with a unique id
An image uploader popup will open, with pointers to the new div
A combination of jQuery / AJAX / PHP will allow the user to upload a file within the page
The filename is returned after the upload process and inserted in the originally appended div
If you are looking for the specific code for each of these steps, I would recommend finding some tutorials as this isn't something that we can write some fast example code for.
Strange trouble
I want to upload image via ajax which many plugin does but none support textarea to write caption. As i want to assign a caption to every image ,how do my new learning task makes it different is i want user to be able to put up caption whilst image is uploading.
Do any one know of such plugin that just donot send ajax request but also have text box requests attached
Well, to answer your question, I don't know of any such plugin.
However, all plugins should support custom parameters to send as GET or POST. Check the documentation.
If it doesn't, then it sucks. You can however mod it yourselt.
If it does, then it is a simple issue of fetching the textarea value and attaching it in one such parameter to be sent.
Hope this helps you.
some of the script like t-shirt design script,mug designer available for customization. For an example. we add text, rotate text, change color of text add/upload image re-size image etc after customization they give image as we customize.
how to save this all customization as image ?
any this type of script in php available ?
I'm guessing what you want is to take modifications made by JavaScript to an image in a browser and "save them" to a new image using PHP?
I am not sure how you'd go about doing that without regenerating the whole thing in PHP.
If I had to do it, I'd save all the modifications in an array in Javascript and using jQuery/AJAX send a request to the PHP file along with those modifications and have the PHP script re-do the things, for example write text on the source image, re-size it, add shapes and what-not.
However, this might end up being quite a time consuming task.
This question is a bit open at the moment as I'm not sure the idea is even possible.
So far I've loaded an image from a url, and then used jQuery UI draggable feature to allow the user to drag html text (which has been replaced using cufon font replacement) over the top of the image.
The major step (which is what my question relates to) is being able to take the image and text layered over the top of the image, and save the result, either to the server, or potentially offer the option to save the altered image to the user's HD, or what would also be useful is to upload to facebook using the facebook API, but this is something I know is possible.
It all hangs on whether it's even possible to achieve the first step, which is to save the image and layered text as a combined image?
I wonder if there is a PHP/jQuery solution that would allow me to do this?
My suggestion would be to have an internal URL that outputs the final image using jQuery and PHP, then take a screenshot using webkit2png of that page. You should know the dimensions etc., so you'll be able to crop down the resulting screenshot to just the region you're looking for.