@@ -101,8 +135,9 @@ dd{margin:32px;}
+
+
get it on A4
+
+
+
+
+
@@ -139,11 +210,11 @@ function updateCanvasBg( imageURL){
canvas.setHeight(img.getScaledHeight())
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
// Optionally add an opacity lvl to the image
- backgroundImageOpacity: 0.5,
+ // backgroundImageOpacity: 0.5,
// should the image be resized to fit the container?
backgroundImageStretch: false
});
- bgImage=imageURL.split(/(\\|\/)/g).pop()
+ bgImage=imageURL.split(/(\\|\/)/g).pop()
})
@@ -154,6 +225,7 @@ updateCanvasBg( '');
// Update the background according to the select
document.getElementById("background-image").addEventListener("change", function(){
+ if( "" === this.value ) return
updateCanvasBg( this.value)
}, false);
@@ -213,6 +285,40 @@ function saveImage(e) {
var imageSaver = document.getElementById('lnkDownload');
imageSaver.addEventListener('click', saveImage, false);
+$( "#montage" ).on("submit",function(e){
+var dataURL = canvas.toDataURL();
+var div = $("
Upload: %
")
+$(this).append(div)
+var data = {}
+$.each( $(this).serializeArray(), function( k,v ){
+ data[v["name"]] = v["value"]
+})
+data["img"] = dataURL
+data["bgImage"] = bgImage
+e.preventDefault()
+ $.ajax({
+ type: "POST",
+ uploadProgress: function(e) {
+ // track uploading
+ if (e.lengthComputable) {
+ var completedPercentage = Math.round((e.loaded * 100) / e.total);
+ if( completedPercentage != 100 ){
+ div.find("#counter").text( completedPercentage)
+ }else{
+ div.text("Building...");
+ }
+ }
+ },
+ success : function(url,msg,xhr){
+ div.html( "
Download "+data["horizontal"]+"x"+data["vertical"]+"") },
+error: function( data, msg, xhr){
+console.log( msg)
+},
+ url: "montage.php",
+ data: data
+ });
+})
+