Please see below for the answer to my own question
I hope you can help.
I have been working on a HTML form which as an image, which is automatically re-sized when uploaded, by pre-defined parameters. I have listed the example code I have within this form at the moment. I don't think that the problem I am having is with the HTML code posted below, as on the HTML page everything works as expected, it is only when the PHP is invoked things don't go to plan.
HTML code:
<input id="width" type="hidden" value="320" />
<input id="height" type="hidden" />
<input id="file" type="file" capture="camera"/>
<br /><span id="message"></span><br />
<div id="img"></div>
Script directly beneath HTML code:
(function (global, $width, $height, $file, $message, $img) {
// simple FileReader detection
if (!global.FileReader)
return $message.innerHTML = "FileReader API not supported"
;
// async callback, received the base 64 encoded resampled image
function resampled(data) {
$message.innerHTML = "Image Preview:";
($img.lastChild || $img.appendChild(new Image)
).src = data;
}
// async callback, fired when the image file has been loaded
function load(e) {
$message.innerHTML = "resampling ...";
//resample.js
Resample(
this.result,
this._width || null,
this._height || null,
resampled
);
}
// async callback, fired if the operation is aborted
function abort(e) {
$message.innerHTML = "operation aborted";
}
// async callback, fired if an error occur (i.e. security)
function error(e) {
$message.innerHTML = "Error: " + (this.result || e);
}
// listener for the input@file onchange
$file.addEventListener("change", function change() {
var
width = parseInt($width.value, 10),
height = parseInt($height.value, 10),
file
;
// no width and height specified
if (!width && !height) {
// reset the input simply swapping it
$file.parentNode.replaceChild(
file = $file.cloneNode(false),
$file
);
// remove the listener to avoid leaks, if any
$file.removeEventListener("change", change, false);
// reassign the $file DOM pointer with the new input text and add the change listener
($file = file).addEventListener("change", change, false);
// notify user there was something wrong
$message.innerHTML = "please specify width or height";
} else if(
// there is a files property and this has a length greater than 0
($file.files || []).length &&
/^image\//.test((file = $file.files[0]).type)
) {
// reading action notification
$message.innerHTML = "reading ...";
// create a new object
file = new FileReader;
// assign directly events as example, Chrome does not inherit EventTarget yet so addEventListener won't work as expected
file.onload = load;
file.onabort = abort;
file.onerror = error;
// cheap and easy place to store desired width and/or height
file._width = width;
file._height = height;
// time to read as base 64 encoded data te selected image
file.readAsDataURL($file.files[0]);
// it will notify onload when finished
} else if (file) {
// if file variable has been created during precedent checks, there is a file but the type is not the expected one wrong file type notification
$message.innerHTML = "please chose an image";} else {
// No File Attached!
$message.innerHTML = "No File Attached!";
}
}, false);
}(
// the global object
this,
// all required fields ...
document.getElementById("width"),
document.getElementById("height"),
document.getElementById("file"),
document.getElementById("message"),
document.getElementById("img")
));
Actual Javascript code:
var Resample = (function (canvas) {
// Resample function, accepts an image
// as url, base64 string, or Image/HTMLImgElement
// optional width or height, and a callback
// to invoke on operation complete
function Resample(img, width, height, onresample) {
var
// check the image type
load = typeof img == "string",
// Image pointer
i = load || img
;
// if string, a new Image is needed
if (load) {
i = new Image;
// with propers callbacks
i.onload = onload;
i.onerror = onerror;
}
// easy/cheap way to store info
i._onresample = onresample;
i._width = width;
i._height = height;
// if string, we trust the onload event
// otherwise we call onload directly
// with the image as callback context
load ? (i.src = img) : onload.call(img);
}
// just in case something goes wrong
function onerror() {
throw ("not found: " + this.src);
}
// called when the Image is ready
function onload() {
var
// minifier friendly
img = this,
// the desired width, if any
width = img._width,
// the desired height, if any
height = img._height,
// the callback
onresample = img._onresample
;
// if width and height are both specified
// the resample uses these pixels
// if width is specified but not the height
// the resample respects proportions
// accordingly with orginal size
// same is if there is a height, but no width
width == null && (width = round(img.width * height / img.height));
height == null && (height = round(img.height * width / img.width));
// remove (hopefully) stored info
delete img._onresample;
delete img._width;
delete img._height;
// when we reassign a canvas size
// this clears automatically
// the size should be exactly the same
// of the final image
// so that toDataURL ctx method
// will return the whole canvas as png
// without empty spaces or lines
canvas.width = width;
canvas.height = height;
// drawImage has different overloads
// in this case we need the following one ...
context.drawImage(
// original image
img,
// starting x point
0,
// starting y point
0,
// image width
img.width,
// image height
img.height,
// destination x point
0,
// destination y point
0,
// destination width
width,
// destination height
height
);
// retrieve the canvas content as
// base4 encoded PNG image
// and pass the result to the callback
onresample(canvas.toDataURL("image/png"));
}
var
// point one, use every time ...
context = canvas.getContext("2d"),
// local scope shortcut
round = Math.round
;
return Resample;
}(
// lucky us we don't even need to append
// and render anything on the screen
// let's keep this DOM node in RAM
// for all resizes we want
this.document.createElement("canvas"))
);
I'm happy with the above scripts, they could do with being slimmed down a little, but performance isn't key at the moment, only functionality. Now it may seem daft, but I do not know where to even begin with PHP to get this posting, I do have a PHP file, which is used to print fields from the HTML, as an example I have the following code for some other fields present in the form:
if($_SERVER['REQUEST_METHOD']=='POST') {
$address = test_input($_POST['address1']);
$address2 = test_input($_POST['address2']);
$address3 = test_input($_POST['address3']);
$cover = test_input($_POST['coverphoto']);
$consultantName = test_input($_POST['consultantName']);
$reportDate = test_input($_POST['reportDate']);
$reportDate = date_create($reportDate);
Would you be able to let me know the best way to get the above HTML code to post the image through to PHP? My previous attempts have left with just a blank space, as if no code was there in the first place. I have done some extensive research around this in the past couple of day, but just can't get my head around it!
Many thanks in advance.
