HTML 5 Image upload uses the feature of HTML 5 and file handling. The requirments for using this tool are jQuery 1.9.x or higher and the use of Twitter Bootstrap.
The basic usage of the HTML 5 Image upload is to write the HTML code below and assign the JavaScript class to the element. The code can be used on a single element as well as multiple elements.
HTML + CSS
<div class="dropzone" data-width="960" data-height="540" data-resize="true" data-url="canvas.php" style="width: 100%;"> <input type="file" name="thumb" /> </div>
Javascript
$('.dropzone').html5imageupload();Below are all the options that can be given with the plugin. The options can be given via the data- attribute of the chosen element or within the javascript declaration.
Important to know is that the options set with the data- attribute are prior to the options that are declared in JavaScript.
| Option | Default | Description |
|---|---|---|
data-width or width |
- | The width of the image in pixels |
data-height or height |
- | The height of the image in pixels |
data-url or url |
- | The url where to send the data when using AJAX to save the image. |
data-ajax or ajax |
true |
Set this to false to use a form to save the image. When using the data-canvas="true" option, the data will be set in a input field. The name of the base64 encoded image is data, the whole field is json encoded, containing the width and height of the original image, the width and height of the final image and the left en top position of the crop that needs to be made. |
data-canvas or canvas |
true |
Set this to false when you want to save the image with a serverside script. When true the data send to the server will be cropped and ready to be saved in a file. The data of the image is base64 encoded and is json encoded. |
data-originalsize or originalsize |
true |
With this option the picked image by the uploader will apear in the original size or already resized to fill the element. Set false to let it resize. |
data-ghost or ghost |
true |
This will show a ghost of the image outside the border of the element, to let the user know what he is cropping. Set false to hide this. |
data-image or image |
- | This will let you preview an image you already have on your server. |
data-removeurl or removeurl |
- | When given this url, everytime the user will upload an image and then clicks the trashcan, the url gets called so you can remove the image. This way your server doesn't get filled up with "tmp" images the user made. Also, when providing data-image, when the user clicks the trashcan, the url gets called so you can remove the preview image. |
data-dimensionsonly or dimensionsonly |
false |
This option will let you $_POST only the dimensions and not the image source. Use this option if you only want the user to post dimensions, for example when you have the original image already stored on your server. |
data-editstart or editstart |
false |
When you provide data-image you can let users start editing the image immediately |
data-save-original or save-original |
false |
Set this option to true if you want to save the original image and the cropped one. You need to edited your saving scripts also! |
data-resize or resize |
false |
Set this option to true if you want the plugin to change size when you resize your window or when a mobile device orientation is changed. |
data |
{} |
The data option can only be filled within the javascript. It's a object that you can add when the image is saving via AJAX. The object will be added in with the POST call of the AJAX request. |
HTML example
<div class="dropzone" data-width="1920" data-height="1080" data-ghost="false" data-url="upload.php"> <input type="file" name="thumb" /> </div>
Javascript example
<script>$('.dropzone').html5imageupload({width: 1920, height: 1080, ghost: false, url: 'upload.php', data: {customValue: 'here'}});</script>
There have been requests for hiding buttons in the editor. You can achive this with CSS, but now i have made a change that you can do this with the (example) data-button-edit attribute (also the buttonEdit). The only thing you have to do, to not display the button, is set it to false!
Below a list of possible buttons.
| Button | Data attribute | Option | CSS | Description |
|---|---|---|---|---|
| data-button-edit | buttonEdit |
.dropzone .btn-edit |
Edit an existing image (when providing data-image) | |
| data-button-zoomin | buttonZoomin |
.dropzone .btn-zoom-in |
Zooming in on the image in the editor | |
| data-button-zoomout | buttonZoomout |
.dropzone .btn-zoom-out |
Zooming out on the image in the editor | |
| data-button-reset | buttonReset |
.dropzone .btn-reset |
Reseting the image to the original size, same size as when selecting the image (so when data-originalsize = false it will be the smaller size, fitting the element) |
|
| data-button-cancel | buttonCancel |
.dropzone .btn-cancel |
Canceling the uploaded image and reseting the uploader. | |
| data-button-done | buttonDone |
.dropzone .btn-done |
Crop the image to the selected dimensions. When hiding this button, you cannot crop the image! | |
| data-button-del | buttonDel |
.dropzone .btn-del |
"Deleting" the preview image or the image when done cropping. No actual deleting is done, only when using data-removeurl is set to a script removing an image. |
There are several callback functions implemented in the plugin. You can use them in the JavaScript. The argument that we give to each callback is the plugin itself (this). Within the object, you can all the image (this.image), the element (this.element) and the input (this.input).
| Callback | Description |
|---|---|
onAfterInitImage |
When the script has been initialized and the element is turned into the plugin. |
onAfterZoomImage |
When zooming the image |
onAfterMoveImage |
After draging the image |
onAfterResetImage |
When users reset the image to starting size. |
onAfterProcessImage |
Triggers after the user click on done button (green button) and after uploading via AJAX (when options is set). |
onAfterCancel |
When users clicks reset button (red button). |
onAfterRemoveImage |
When removing an image (clicking the delete button and making the ajax call) |
Javascript example
<script>
$('.dropzone').html5imageupload({
onAfterInitImage: function(this) {
console.log(this);
}
});
</script>
Because this plugin heavely leans on the HTML5 file api, it only works with HTML5 browsers. At this point, we tested the plugin on pc and mac with these results
| PC (Microsoft Windows 7+) | Mac (Mac OS X Lion+) | |||||
|---|---|---|---|---|---|---|
| Firefox | Chrome | Internet Explorer | Opera | Safari | Safari | Firefox |
| 3.6+ | 13+ | 10+ | 12+ | Not working | 6+ | 7+ |
| On click event not working in IE10 on input / drag field. Dragging image works. | Only supported with version 6 and above, the windows version of Safari ended with version 5.1 | Only supported with version 6 and above. You need OS X Lion or higher to get Safari version 6 or higher. | ||||
When a user try to use the plugin in a unsupported browser, the following message will show.
Tested on iPad with iOS 8.1 (8.0 will not work! This is because Apple has forgotten to add the file API in safari!).
Tested on Android 4.4
Canvas doesn't use any kind of anti-aliasing when resizing an image. There are multiple custom solutions you can use for this problem and implement it in a callback function. http://lmgtfy.com/?q=canvas+image+quality+html5
If there is a great interest for a new functionality, i will consider making it. When i start working on it, i will announce it here first.
UPDATE: nov. 21
Improvement Script is working with tablet and phone!
New Resize option added for responsive design
UPDATE: nov. 17
New Save original option added
UPDATE: oct. 20
Bugfix Input required will remain after deleting image
UPDATE: oct. 13
Improvement Saving button show directly when clicking
Improvement Mimetype on toDataURL
Improvement Hide buttons with data-button-edit = false
Improvement Set save text with data-save-label = "Saving"
Improvement Documentation
Bugfix Background text not hidding with transparent PNG
Bugfix Wrong script usage in demo
UPDATE: oct. 6
New Server image
New POST only dimensions
Improvement Buttons all have own CSS label for your own implementation
UPDATE: sept. 25
New Preview image
New Image remove server request
Improvement Better error response
Improvement PHP script examples
Bugfix ajax=false not removing editor
Bugfix double image with canvas