HTML5 Browser/Device Compatible Image Resize Before Upload WordPress

• REFUNDED

Hi,

Looking for help with the final bit of an implementation using Formidable Pro. Through Formidable, I'm asking a series of questions through a series of pages which can be started [[LINK href="http://dev.studiopence.com/juxtapose/start/"]]here[[/LINK]]. On the third page of the form, I'm asking the user to submit a 'good' and 'bad' photo, again using Formidable Pro to power the upload functionality. The problem with asking folks to upload a photo and making the site responsive is that visitors will likely upload photos directly with their phone, without editing, which means huge photos. We'd rather not limit file sizes because that will turn people away. Instead, we'd like to use HTML5's File API to browse, preview, and resize the images <strong>BEFORE</strong> they are uploaded. So if someone selects an image at a resolution of 4000 px X 3000 px we'd like to use HTML5 and jQuery to reduce it down to something like 800 px X 600 px before it gets uploaded. That means faster uploading and less of a load/bandwidth on the server under simultaneous connections/uploads - it's all client side.

To help work through this, I've been referring to this [[LINK href="http://www.jqueryscript.net/layout/jQuery-Plugin-for-Client-Side-Image-Resizing-canvasResize.html"]]site[[/LINK]] which can be demo'd [[LINK href="http://www.jqueryscript.net/demo/jQuery-Plugin-for-Client-Side-Image-Resizing-canvasResize/"]]here (without the actual uploading part)[[/LINK]].

On the first image upload field, I'm successfully able to grab the image and using the properties under canvasResize able to set its width, height, and quality appropriately. The problem I'm having is actually taking the canvas and putting it back into the upload form so that it can be uploaded at a smaller file size. It just keeps the original large file inside the upload field. Note: I haven't tried anything with the second field yet.

Here's my current JavaScript for the canvasResize:



<script type="text/JavaScript">

jQuery().ready(function() {

jQuery('#frm_field_90_container').click(function() {
jQuery('input[name=file90]').trigger('click');
});

jQuery('input[name=file90]').change(function(e) {
var file = e.target.files[0];

// RESET
jQuery('#area p span').css('width', 0 + "%").html('');
jQuery('#area img, #area canvas').remove();
jQuery('#area i').html(JSON.stringify(e.target.files[0]).replace(/,/g, ", <br/>"));


// CANVAS RESIZING
jQuery.canvasResize(file, {
width: 300,
height: 0,
crop: false,
quality: 80,
//rotate: 90,
callback: function(data, width, height) {

// SHOW AS AN IMAGE
// =================================================

jQuery('<img>').load(function() {

jQuery(this).css({
'margin': '10px auto',
'width': width,
'height': height
}).appendTo('#area div');

}).attr('src', data);

// /SHOW AS AN IMAGE
// =================================================

// IMAGE UPLOADING
// =================================================

// Create a new formdata
var fd = new FormData();
// Add file data
var f = jQuery.canvasResize('dataURLtoBlob', data);
f.name = file.name;
fd.append(jQuery('#frm_field_90_container input').attr('name'), f);

jQuery.ajax({
url: 'uploader.php',
type: 'POST',
data: fd,
dataType: 'json',
contentType: false,
processData: false,
beforeSend: function(xhr) {
xhr.setRequestHeader("pragma", "no-cache");
},
xhr: function() {
var xhr = new window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener("progress", function(e) {
if (e.lengthComputable) {
var loaded = Math.ceil((e.loaded / e.total) * 100);
jQuery('p span').css({
'width': loaded + "%"
}).html(loaded + "%");
}
}, false);
return xhr;
}
}).done(function(response) {

//console.log(response);
if (response.filename) {
// Complete
jQuery('#area p span').html('done');
jQuery('#area b').html(response.filename);
jQuery('<img>').attr({
'src': response.filename
})
.appendTo(jQuery('#area div'));
}

});

// /IMAGE UPLOADING
// =================================================
}
});

});
});


</script>


I know something needs to happen under the '//Image Uploading' section of the script but haven't been able to figure out how to apply it to Formidable.

<em><strong>Requirements: </strong></em>
- Solution must be compatible with modern iOS / Android / and desktop devices/browsers
- We must continue to use Formidable Pro for easier management of entries as they come in.
- The fields must continue to validate
- Functionality must be applied to both images, though each are a separate file input field and so the canvasResize can happen separately on each - doesn't have to be the same time.

Thanks in advance for guidance!

Answers (0)