i was looking at this link that allows a user to drag an image over an avatar/profile photo and they can drop the image over it which will change/upload a different image.
link: http://css-tricks.com/html5-drag-and-drop-avatar-changer-with-resizing-and-cropping/
what i was wondering now is how i could use php to upload the photo, would anyone please be able to show me how i can do this? thanks
html:
<title>Drag Avatar</title>
<link rel='stylesheet' href='style.css'>
<div class="page-wrap">
<h1>Drag & Drop Image to Change Avatar</h1>
<div class="profile">
<div class="profile-avatar-wrap">
<img src="images/256.jpg" id="profile-avatar" alt="Image for Profile">
</div>
<h2>Betty Miller</h2>
<div class="location">Palo Alto, CA</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur voluptatem accusantium voluptas doloremque porro temporibus aut rerum possimus cum minus.</p>
</div>
<h3>You could do this with a file input too...</h3>
<input type="file" id="uploader">
</div>
<!-- In real life, these scripts are combined -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="resample.js"></script>
<script src="avatar.js"></script>
resample.js:
var Resample = (function (canvas) {
// (C) WebReflection Mit Style License
function Resample(img, width, height, onresample) {
var
load = typeof img == "string",
i = load || img;
// if string, a new Image is needed
if (load) {
i = new Image;
i.onload = onload;
i.onerror = onerror;
}
i._onresample = onresample;
i._width = width;
i._height = height;
load ? (i.src = img) : onload.call(img);
}
function onerror() {
throw ("not found: " + this.src);
}
function onload() {
var
img = this,
width = img._width,
height = img._height,
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
var minValue = Math.min(img.height, img.width);
width == null && (width = round(img.width * height / img.height));
height == null && (height = round(img.height * width / img.width));
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
minValue,
// image height
minValue,
// 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 context = canvas.getContext("2d"),
// local scope shortcut
round = Math.round
;
return Resample;
}(
this.document.createElement("canvas"))
);
avatar.js:
// Required for drag and drop file access
jQuery.event.props.push('dataTransfer');
// IIFE to prevent globals
(function() {
var s;
var Avatar = {
settings: {
bod: $("body"),
img: $("#profile-avatar"),
fileInput: $("#uploader")
},
init: function() {
s = Avatar.settings;
Avatar.bindUIActions();
},
bindUIActions: function() {
var timer;
s.bod.on("dragover", function(event) {
clearTimeout(timer);
if (event.currentTarget == s.bod[0]) {
Avatar.showDroppableArea();
}
// Required for drop to work
return false;
});
s.bod.on('dragleave', function(event) {
if (event.currentTarget == s.bod[0]) {
// Flicker protection
timer = setTimeout(function() {
Avatar.hideDroppableArea();
}, 200);
}
});
s.bod.on('drop', function(event) {
// Or else the browser will open the file
event.preventDefault();
Avatar.handleDrop(event.dataTransfer.files);
});
s.fileInput.on('change', function(event) {
Avatar.handleDrop(event.target.files);
});
},
showDroppableArea: function() {
s.bod.addClass("droppable");
},
hideDroppableArea: function() {
s.bod.removeClass("droppable");
},
handleDrop: function(files) {
Avatar.hideDroppableArea();
// Multiple files can be dropped. Lets only deal with the "first" one.
var file = files[0];
if (typeof file !== 'undefined' && file.type.match('image.*')) {
Avatar.resizeImage(file, 256, function(data) {
Avatar.placeImage(data);
});
} else {
alert("That file wasn't an image.");
}
},
resizeImage: function(file, size, callback) {
var fileTracker = new FileReader;
fileTracker.onload = function() {
Resample(
this.result,
size,
size,
callback
);
}
fileTracker.readAsDataURL(file);
fileTracker.onabort = function() {
alert("The upload was aborted.");
}
fileTracker.onerror = function() {
alert("An error occured while reading the file.");
}
},
placeImage: function(data) {
s.img.attr("src", data);
}
}
Avatar.init();
})();
