Okay, I know questions like this exist in multiple forms across StackOverflow and other places on the web, but none of them is pointing me to what I actually need (maybe I missed a question that was more catered to my problem).
I need a Facebook-style image upload mechanism, using Codeigniter and javascript/jquery. Here's what it's supposed to do -
Using a single file upload control (or for that matter any clickable control), open up the "Choose Files" dialog window, and allow the user to select multiple images from it. (I know this cannot yet be done in IE, and I do not really care about the multiple file selection not working in IE).
Once the user has selected the files, the page should display a series of progress bars (like Facebook does). As each image gets uploaded, the corresponding progress bar reaches 100% (if it's simpler to implement, I am willing to forego the graphical progress bar for a text that displays the progress percentage), and the thumbnail of the image is displayed next to the completed progress bar (or text). At this point, the user should have the option to delete the uploaded image by clicking a cancel button (I think I can get this part working on my own).
The upload can be sequential (like Facebook does), or asynchronous (some upload libraries I found work this way).
What's most important (and the part that is stumping me) is the thumbnail generation. I know that there's some HTML5/CSS3 technique that allows you to display the thumbnail before the files have actually been uploaded, pulling them directly from the user's hard drive. But that won't work in IE8, and while I am not concerned about the multiple image selection not working in IE8, I need for the thumbnail generation to work cross-browser, and that includes IE8 (deciding on the browser compatibility is not something I can command, so please don't come up with a "screw IE!" solution).
I have tried using uploadify (I have no constraints against using Flash), but cannot seem to able to customize it to my needs. While uploadify does indeed display progress bars, I was unable to find a way to generate (and display) thumbnails on the fly, in accordance with the behavior I described above. I know how thumbnail generation works on PHP, just cannot figure out how to implement this together with the progress indicators. Am I looking for a suitable jQuery/ajax call?
Any help and/or pointers would be appreciated. I admit that I might have missed a StackOverflow question that would solve my issue, so please direct me to that page, or to any other page you believe will help me. Please feel free to suggest upload libraries other than uploadify, which you believe I might find useful.
Thanks in advance. And thanks for reading through all this - I tried my best to make the question properly descriptive!
I have used Jquery file upload with good results. It does need IE to be in compatibility mode, but worked well for chrome/firefox.
UPDATE. It now claims to support IE 6.0+.
I'll focus on point 4 here. It can be done, but you'll end up using iframes (yeah, I now).
They can be 1px small, but you'll need them if you want to create thumbnail previews.
A good starting point would be here: http://www.zurb.com/playground/ajax_upload
As for creating the actual preview images (smaller versions) you can use CI's image library.
Let me know how it works out.
Related
I am building an avatar-generator for a PHP/MySQL site I am working on. It uses CSS to layer multiple .png files to create the background, body, facial expressions, etc. for a user's avatar. This I have covered.
I want to add a feature to my site that will allow the user to download their layered avatar "image" as one .jpg file. Is this even possible? I think I have seen this functionality before but can't recall the site where I saw this now.
Of course, I could come up with a series of pre-generated files that would cover all of the computations possible with my images, but with somewhere around 200 objects to choose from and a maximum of 10 layers of choices, the number of permutations possible is somewhere around 8.14702044e+22! Obviously, this is possible for me to do but I would be old and gray before completing the task!
Poking around the Internet has led me to believe there might be some way to "screen cap" - with what software and if it can capture a small section of the screen I don't know. Besides, would this bog down my site (which is currently running at top speed)?
I've searched through Stack Overflow for similar questions but didn't find anything that addresses my problem specifically. That said, I am not certain what to even search for (the precise terminology) as this concept of layering and saving as one image is foreign to me.
I found a solution to my own problem. It's not quite what I had in mind when planning this part of the project, but the end result will be close enough (with some other modifications).
I will implement html2canvas (http://html2canvas.hertzen.com) to take a screenshot of the user's avatar when they have pressed "Save". I will store the resultant image to my server and this will be their avatar. Their selected variable data will be stored in a database so that they can load up their avatar at a later date and make changes to it.
i am developing a cake-php application, under this i want to show powerpoint slideshow for the end user but the condition is that the user can only be able to see the show, not be able to download the slideshow.
Can any one plz suggest the best way to do it.
If the slideshow is based on images you can split each image into 9,16 or more squares and display the tiled image. That way if the user decides to 'Save-as' the image he will get only 1/9, or 1/16-th of the real image. If the slideshow is quite big it will be a pain to put together all the pieces and will discourage the users to try and save the slide.
You can see such implementation here - http://whatismycar.com/info/16540/ - the 4 images below the header are in fancybox and if you try to 'Save-as' one of them you will save only a small tile of the original image.
Hope this helps.
It is impossible prevent downloading images from internet, but you can make it hard for users with this. Also you can hide source html image path with php check it here
While I am no expert on this subject, something worth noting is what Youtube seems to be doing.
Ever notice how the whole video never loads if you pause it?
Upon monitoring the network tab during a video you will see that they are actually making hundreds or even thousands of requests for video segments from their server and most likely using JS to clear the cache of parts you've watched.
^^ this is why going back to an earlier point in the video causes it to stall for a bit while it re-downloads the segment which you wish to see.
At the end of the day, PrtScn will trump all of your efforts because the web browser does not have the privilege to control the keyboard outside of it's own environment.
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.
I am trying to find some sort of plug-in for Ajax upload with a file preview. The image will be saved into a MySQL dataBase. Is that even possible? I guess all things are possible with certain requirements. Have you guys ever come across anything like that?
Let me tackle your question one bit at a time:
I am trying to find some sort of plug-in for Ajax upload...
BAM!
...with a file preview.
Yep, from the page above, although I might wonder why this is necessary and if it isn't remove it (I believe minimalist design is usually better) and go with fancy upload which seems to be more popular (sorry, I don't have much experience with ajax uploaders)
The image will be saved into a MySQL dataBase. Is that even possible?
Unfortunately, it is; you will have to use the blob data type (alternate tutorial). Personally though I would just create a directory and save the images there, because then you don't have to query MySQL every f***ing time you want to display the image (I would feel bad for hat server). In which case I suggest you use class.upload.php (I have good experiences with it), in conjunction with whatever ajax uploader you chose to use.
I guess all things are possible with certain requirements. Have you guys ever come across anything like that?
...yes
I also store the uploaded images in a directory and their names in the database.
I have developed a jQuery plugin that performs a dynamic upload of an image when it is selected, and previews it.
You can find a demo of the UploaderPreviewer plugin here:
http://dondedeportes.es/uploader-previewer
Hope it is useful for you or for anyone with the same problem.
I have read a few similar questions and answers, but none completely address my issue.
Here is My Scenario:
I have what is similar to a tinyMCE (a home-brew version though) kind of editor. It lets users enter some text, and an image or two, etc. I have code that takes the items in there and renders them into a smaller div (what is essentially a thumbnail) in real time.
Here is What I Want to Do
Ultimately, the user may want to use their 'page' somewhere else, so I would like to let them go to a screen, view thumbnails of each page, and pick one.
Here is the Problem
Obviously, I could just use the same thumbnail code to render each page thumbnail. However, it can be bandwidth intensive (each page could have several images, not to mention the calculation would have to be performed many times - we are talking perhaps 40 to 50 thumbnails on a preview page).
So, I wanted to try to take the thumbnail div, and somehow create a png or jpg when they save the page in the editor (so the code for the page, and also a thumbnail image), and push it up to my PHP script to save the image to the server.
My first thought was that maybe canvas could do that, but there is the issue of translating the text and images onto the canvas first, which may or may not be possible.
So there it is. I am interested in any and all options, including commercial libraries if available that will do this -- only thing is, would like it to be in javascript.
You may want to look at:
http://html2canvas.hertzen.com/
A similar question was already asked:
Screen Grab with PHP and/or Javascript?