We Keep Coding

jsPDF low quality image exporting

So I am using a cool tool called cropit to crop images. Now I am trying to get the cropped image exported in a PDF file, using jsPDF.
You can check the editor here: http://code.reloado.com/ecagos3/edit#html,live
(The PDF downloading part wont work, but by downloading the code an trying it out in localhost should be fine I guess)
The PDF file gets generated, but the quality of the image is just awful. You can check it out here: https://www.docdroid.net/KgJbYjk/test.pdf.html
Here is the original image: http://imgur.com/a/ZtmE1
Does someone know a solution for getting the normal output, or why this issue happened? Thanks in advance!

I've found the solution via a PHP library. It's called - mPDF

Checking if a certain URL exists and return an image

I need a way to check if an image has been uploaded. I want to do this by checking if a certain URL is existing.
I am getting clients to upload files to my site for their account and I want a tick to appear next to the upload box to show that the file exists.
The uploaded file URLs will be something along the lines of: http://www.example.com/Practitioner-Area/($user.firstname$)+NI
The tick file will be:
http://www.example.com/Practitioner-Area/images/complete.jpg
I think I will need a jquery but I have never used them before. So I would prefer a standard html code tbh, but will use jquery if needed.
Any help would be much appreciated.
Matt

Try the onerror event:
<img src="image.gif" onerror="alert('The image could not be loaded.')">
Then try to load that outside of screen or something.
Edit: This will create errors on the page so the AJAX result answer is the better one.

prettyphoto not displaying thumbnail but resolves image when clicked

I had to move my wordpress site to a different directory folder on my hosting server. Now for some reason on the portfolio pages of my website it's not displaying the thumbnail preview for lightbox images. The image will display when the thumbnail is clicked so I know it's pulling the right image from the right place but why is it not showing the preview thumbnail?
Here is a link:
Any help would be really appreciated!

You don't have the img src defined which PrettyPhoto uses to pull the thumb:

OK, well based on your comments the switch across from one server to another has stopped the method aq_resize() working. It is called Aqua-Resizer, here's the Github page;
https://github.com/sy4mil/Aqua-Resizer/blob/master/aq_resizer.php
The wiki on it explains it's use but if all you've done is change the server then you will have to look at other explanations for why it's not working. The following is a list you can start looking through;
Make sure your functions.php still has require_once('aq_resizer.php'); with the correct path to this script. Make sure the script is actually there. If it is try changing the file permissions on the file to see if that helps. If the script uses a cache directory try changing the permissions on this.
It could also be that the PHP version on the new server is different (maybe, I'm guessing now)? Check that too.

Thumbnail Generation

Is there a "good" way to generate a thumbnail for a JPEG file that doesn't have on in the EXIF information?
If a user uploads an image, I'm trying to display the thumbnail, but if there's no thumbnail in the image the display is blank (src=""). Currently we replace blank images with a loading image that gets swapped out with the thumbnail generated on the server by an AJAX call back.
Is there anything I can do client-side (jQuery & jQuery UI are already integrated, but open to new libraries if they'll help) other than displaying a loading image that gets changed by the AJAX call back?
For clarification I don't just mean taking the Base64 raw data and changing the height and width attributes most of our users upload 5MB+ files, and the text alone crashes the browser if we use the raw data. I mean actually appending a thumbnail to the EXIF, or creating it and using the created base64 data as the image source.
Apologies in advance for breaches in etiquette or lack of clarity, this is my first question on Stack Overflow.

Image upload button div

How do I turn the div with id "uploadWrapper" from this jsFiddle into a button that can upload images - basically doing the same as <input type="file">. Thanks in advance.
EDIT - DUE TO ANSWERS RECEIVED
How can I show a preview of the image in the place of the div with the blue background when someone uploads an image, see this jsFiddle

Check this fiddle: http://jsfiddle.net/techfoobar/kM9aa/1/
Preview: Like Justin Satyr said, there's no way using plan HTML/JS to preview the chosen image unless you upload it to your server and use the uploaded image's URL.

This is not as easy to do as one would imagine, and some browsers prevent triggering file uploads from untrusted elements automatically for security purposes.
I recommend using a third party file upload plugin, such as Plupload, or faking a custom button using progressive enhancement (invisible file upload button, with a custom graphic under it (of course not the most flexible of solutions) as described here:
http://filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/
Plupload events allows you to hook into the events that might occur during ajax file upload, and do stuff with the upload info. See this page on examples of what response data you might get:
http://www.plupload.com/example_events.php
You can get response data like this:
id=p16in5el9ne2fc1rd08120in081
name=denim.png
size=20623
loaded=20623
percent=100
status=DONE
target_name=p16in5el9ne2fc1rd08120in081.png
And of course you can modify what the server returns on a successful upload, to be able to get the full absolute URL to the uploaded image.
After you have this data, you can hook into it and switch the image doing something like this (with jQuery):
// Called when a file has finished uploading
FileUploaded: function(up, file, info) {
$('#id_of_the_image').attr('src', 'uploads/' + file.target_name);
}

You can't unless you use Flash, Silverlight, or an Active-X object. Browsers lock down all file browsing operations.
You can appear to do this by making the <input type="file" /> invisible but over a button so that when the user clicks the "button", they are actually clicking the input.
UPDATE:
In response to your second question, to preview the image, you would need to post it to your server and then point your img's src to an image path on your server.