Created
March 30, 2016 23:00
-
-
Save ascottmccauley/4c707e01a5a3bd3d237662bacbe06993 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// save button | |
jQuery('.save-crop').on('click', function() { | |
console.log('saving the cropped image'); | |
jQuery('#cropperModal').foundation('reveal', 'close'); // TODO: this doesn't seem to work... | |
currentFile.cropData = jQuery('#cropper').cropper('getData'); | |
var printOverlay = new Image(); | |
jQuery(printOverlay).on('load', function() { | |
console.log('creating Print Overlay '); | |
// create a 300dpi scaled canvas based off of print overlay width/height | |
var scaledCanvas = jQuery('#cropper').cropper('getCroppedCanvas', {width: this.width, height: this.height}); | |
var scaledContext = scaledCanvas.getContext('2d'); | |
scaledContext.drawImage(this, 0, 0); | |
currentFile.cropImage = scaledCanvas.toDataURL("image/png"); | |
// change initial preiew to show cropped thumbnail | |
var thumbSize = 120; | |
var thumbWidth = Math.min(overlay.width / overlay.height * thumbSize, thumbSize); | |
var thumbHeight = Math.min(overlay.height / overlay.width * thumbSize, thumbSize); | |
var thumbCanvas = jQuery('#cropper').cropper('getCroppedCanvas', {width: thumbWidth, height: thumbHeight}); | |
var thumbContext = thumbCanvas.getContext('2d'); | |
thumbContext.drawImage(overlay, 0, 0, thumbWidth, thumbHeight); | |
currentFile.thumbnail.attr('src', thumbCanvas.toDataURL("image/png")); | |
// change 'crop button color' and text | |
var cropButton = jQuery(currentFile.previewElement).children('.button'); | |
cropButton.addClass('success'); | |
cropButton.removeClass('secondary'); | |
cropButton.text('Re-Crop'); | |
// show 'Finish' button | |
var finishButton = jQuery('.button.finish'); | |
finishButton.removeClass('disabled'); | |
finishButton.addClass('success'); | |
finishButton.unbind('click'); | |
finishButton.on('click', function() { | |
createFinal(); | |
}); | |
jQuery('#cropperModal').foundation('reveal', 'close'); | |
}); | |
printOverlay.src = wpVars.imageFolder + 'locket-templates/print/' + currentFile.template + '.png'; | |
}); | |
function createFinal() { | |
console.log('creating the final masterpiece now'); | |
// create a new 4x6 canvas (1800x1200 pixels) | |
jQuery('#finalCanvas').remove(); | |
jQuery('body').append('<canvas id="finalCanvas" width="1800" height="1200"></canvas>'); | |
var finalCanvas = document.getElementById('finalCanvas'); | |
var finalContext = finalCanvas.getContext('2d'); | |
// clear the canvas | |
finalContext.clearRect(0, 0, finalCanvas.width, finalCanvas.height); | |
prevW = 0; | |
// Add 300x1200 branding to the right side of canvas | |
var brandingImage = new Image(); | |
brandingImage.onload = function() { | |
// create a 2px black border around the edge | |
var borderWidth = 2; | |
finalContext.fillStyle = "black"; | |
finalContext.fillRect(0,0,finalCanvas.width,finalCanvas.height); | |
finalContext.fillStyle = "white"; | |
finalContext.fillRect( borderWidth, borderWidth, finalCanvas.width - (2 * borderWidth), finalCanvas.height - (2 * borderWidth) ); | |
// add branding image | |
console.log('adding branding'); | |
finalContext.drawImage(this, finalCanvas.width - this.width - borderWidth, borderWidth, this.width - borderWidth, this.height - 2*borderWidth); | |
// Add each of the images in a grid | |
var imageList = []; | |
// strip out images that have not been cropped or have errors | |
jQuery.each(droplet.files, function(i, file) { | |
if(file.cropImage != null) { | |
imageList.push(file.cropImage); | |
} | |
}); | |
console.log('add final Images'); | |
console.log(imageList); | |
// update progressbar | |
jQuery('#progressModal').foundation('reveal', 'open'); | |
var progressBar = jQuery('#progressModal .meter'); | |
progressTotal = 4 + imageList.length; // Init + Images + Saving + never show 100%; | |
var progress = 100 * (1 / progressTotal); | |
progressBar.animate({ | |
width: progress + '%', | |
}, 'slow'); | |
jQuery('#progressModal .steps').html('Step 1: Collecting Images'); | |
// start adding images to canvas | |
addFinalImages(finalContext, imageList); | |
}; | |
brandingImage.src = wpVars.imageFolder + 'locket-branding.jpg'; | |
} | |
function addFinalImages(finalContext, imageList) { | |
console.log('called addFinalImages'); | |
var finalCanvas = document.getElementById('finalCanvas'); | |
var margin = 20; | |
var prevH = 0; | |
var croppedImage = new Image(); | |
croppedImage.onload = function() { | |
console.log('image has been loaded'); | |
// update progressbar | |
jQuery('#progressModal').foundation('reveal', 'open'); | |
var progressBar = jQuery('#progressModal .meter'); | |
var currentProgress = progressTotal - imageList.length + 1 | |
var progress = 100 * (currentProgress / progressTotal); | |
progressBar.animate({ | |
width: progress + '%', | |
}, 'slow'); | |
jQuery('#progressModal .steps').html('Step 2: Cropping Images <small>(' + imageList.length + ' remaing)</small>'); | |
//keep adding to fill 4" column | |
while ((prevH + this.height + margin ) < finalCanvas.height) { | |
// add greyish background to non-image areas. | |
finalContext.fillStyle = "#e6e6e6"; | |
finalContext.fillRect(prevW + margin + 1, prevH + margin + 1, this.width - 2, this.height - 2); | |
// add the image now. | |
finalContext.drawImage(this, prevW + margin, prevH + margin); | |
prevH = this.height + prevH + margin; | |
} | |
prevH = 0; | |
prevW = this.width + prevW + margin; | |
// remove first image from array | |
imageList.splice(0,1); | |
// add the next image if there is one | |
if(imageList.length > 0) { | |
addFinalImages(finalContext, imageList); | |
} else { | |
var finalCanvasData = finalCanvas.toDataURL("image/png"); | |
saveFinal(finalCanvasData); | |
} | |
}; | |
croppedImage.src = imageList[0]; | |
} | |
function saveFinal(finalCanvasData){ | |
console.log('saving the masterpiece'); | |
// update progressbar | |
jQuery('#progressModal').foundation('reveal', 'open'); | |
var progressBar = jQuery('#progressModal .meter'); | |
var currentProgress = progressTotal - 1; | |
var progress = 100 * (currentProgress / progressTotal); | |
progressBar.animate({ | |
width: progress + '%', | |
}, 'slow'); | |
jQuery('#progressModal .steps').html('Step 3: Saving final image'); | |
jQuery('#finalImage').remove(); | |
jQuery('body').append('<img src="" id="finalImage" width="1800" height="1200">'); | |
jQuery('#finalImage').attr('src', finalCanvasData); | |
data = { 'action': 'cropper_upload', | |
'nonce' : wpVars.nonce, | |
'sessionID': wpVars.sessionID, | |
'imageData': finalCanvasData, | |
'imageName': 'final.jpg' //TODO: Do we need this, or can we change it to include the date+time | |
}; | |
jQuery.post(wpVars.ajaxurl, data, function(response) { | |
if(response.success) { | |
progressBar.animate({ | |
width: '100%', | |
}, 'slow'); | |
jQuery('#emailImage').val(response.path); | |
jQuery('#finalImage').attr('src', response.url); | |
jQuery('#downloadImage').attr('href',response.url); | |
var downloadImage = new Image(); | |
jQuery(downloadImage).on('load', function() { | |
jQuery('#progressModal').foundation('reveal', 'close'); | |
jQuery('#finishModal').foundation('reveal', 'open'); | |
}); | |
downloadImage.src = response.url; | |
} | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment