update downloader

resources/views/admin/main.blade.php

@@ -338,13 +338,11 @@ desired effect
                         var min = $('#min').datepicker("getDate");
                         var max = $('#max').datepicker("getDate");
                         var startDate = new Date(data[10]);
-                        // console.log("store_od", startDate)
                     } else {
                         //    tbl_order_status
                         var min = $('#min_tbl_order_status').datepicker("getDate");
                         var max = $('#max_tbl_order_status').datepicker("getDate");
                         var startDate = new Date(data[5]);
-                        // console.log("order", startDate)
                     }
 
                     

resources/views/admin_pages/download_pages/tshirt.blade.php

@@ -48,99 +48,210 @@
         var  log = document.getElementById('log');
         form.addEventListener('submit', logSubmit);
 
+        // const sides = ["Front", "Back", "Right", "Left"];
 
-        var frontCanvas = new fabric.StaticCanvas( document.getElementById("frontCanvas"));
-        tmp_frontCanvas = {!! json_encode($client_design_array[0]->ContentFront) !!};
-        frontCanvas.loadFromJSON(tmp_frontCanvas, function(objects, options) {
-            frontCanvas.renderAll();
     
-            setTimeout(function(){
 
-                frontCanvas.backgroundImage = 0;
+         var frontCanvas = new fabric.StaticCanvas( document.getElementById("frontCanvas"));
-                frontCanvas.clear();
+         var backCanvas = new fabric.StaticCanvas( document.getElementById("backCanvas"));
-                frontCanvas.renderAll();
+         var leftCanvas = new fabric.StaticCanvas( document.getElementById("leftCanvas"));
+         var rightCanvas = new fabric.StaticCanvas( document.getElementById("rightCanvas"));
+         
+        try {
+            var frontContentRaw = "{{ $client_design_array[0]->ContentFront }}";
+            var backContentRaw = "{{ $client_design_array[0]->ContentBack }}";
+            var leftContentRaw = "{{ $client_design_array[0]->ContentLeft }}";
+            var rightContentRaw = "{{ $client_design_array[0]->ContentRight }}";
+            
+            console.log(leftContentRaw)
+            if(frontContentRaw) {
+                var tmp_frontCanvas = JSON.parse(frontContentRaw.replace(/"/g,'"'));
+            }
+            if(backContentRaw) {
+                var tmp_backCanvas = JSON.parse(backContentRaw.replace(/"/g,'"'));
+            }
+            if(leftContentRaw) {
+                var tmp_leftCanvas = JSON.parse(leftContentRaw.replace(/"/g,'"'));
+            }
+            if(rightContentRaw) {
+                var tmp_rightCanvas = JSON.parse(rightContentRaw.replace(/"/g,'"'));
+            }
+            // var tmp_frontCanvas = JSON.parse(frontContentRaw.replace(/"/g,'"'));
+           
+            // var tmp_leftCanvas = JSON.parse(leftContentRaw.replace(/"/g,'"'));
+            // var tmp_rightCanvas = JSON.parse(rightContentRaw.replace(/"/g,'"'));
+            // console.log(frontCanvas)
+            loadDesigns(frontCanvas, tmp_frontCanvas);
+            loadDesigns(backCanvas, tmp_backCanvas);
+            loadDesigns(leftCanvas, tmp_leftCanvas);
+            loadDesigns(rightCanvas, tmp_rightCanvas);
+
+        } catch (error) {
+            console.log(error)  
+        }
+
+
+        function loadDesigns(side_canvas, canvas_json) {
+            // console.log(side_canvas, canvas_json)
+            // let frontCanvas_json = JSON.parse(tmp_frontCanvas);
+            let objects = [];
+
+            Object.entries(canvas_json.objects).forEach(([key, item]) => {
+                if(item.type == 'image') {
+                   toDataURL(item.src, function(src) {
+                        const images =   ada = {...item,  src }
+                        objects.push(images)
+
+                    })
+                }
+            });
+
+            var final_json = "";
+            setTimeout(() => {
+                canvas_json.objects = [];
+                canvas_json.objects = objects;
+                final_json = JSON.stringify(canvas_json);
+                side_canvas.loadFromJSON(final_json, function(objects, options) {
+                    side_canvas.renderAll();
 
                 setTimeout(function(){
 
-                    frontCanvas.loadFromJSON(tmp_frontCanvas, function(objects, options) {
+                    side_canvas.backgroundImage = 0;
-                        frontCanvas.renderAll();
+                    side_canvas.clear();
-                        frontCanvas.selection = false;
+                    side_canvas.renderAll();
-                    });
 
-                },1000);
+                    setTimeout(function(){
 
-            } ,500);
+                        side_canvas.loadFromJSON(canvas_json, function(objects, options) {
-        });
+                            side_canvas.renderAll();
+                            side_canvas.selection = false;
+                        });
 
-        var backCanvas = new fabric.StaticCanvas( document.getElementById("backCanvas") );
+                    },1000);
-        tmp_backCanvas = {!! json_encode($client_design_array[0]->ContentBack) !!};
-        backCanvas.loadFromJSON(tmp_backCanvas, function(objects, options) {
-            backCanvas.renderAll();
 
-            setTimeout(function(){
+                } ,500);
+            });
+            }, 1000);
+        }
 
-                backCanvas.backgroundImage = 0;
+        // var frontCanvas = new fabric.StaticCanvas( document.getElementById("frontCanvas"));
-                backCanvas.clear();
+        // tmp_frontCanvas = {!! json_encode($client_design_array[0]->ContentFront) !!};
-                backCanvas.renderAll();
+        // console.log(tmp_frontCanvas)
 
-                setTimeout(function(){
+        // let frontCanvas_json = JSON.parse(tmp_frontCanvas);
+        // let objects = [];
 
-                    backCanvas.loadFromJSON(tmp_backCanvas, function(objects, options) {
+        // Object.entries(frontCanvas_json.objects).forEach(([key, item]) => {
-                        backCanvas.renderAll();
+        //     if(item.type == 'image') {
-                        backCanvas.selection = false;
+        //        toDataURL(item.src, function(src) {
-                    });
+        //             const images =   ada = {...item,  src }
+        //             objects.push(images)
 
-                },1000);
+        //         })
-            } ,500);
+        //     }
+        // });
 
-        });
+        // var final_front_json = "";
+        // setTimeout(() => {
+        //     frontCanvas_json.objects = [];
+        //     frontCanvas_json.objects = objects;
+        //     final_front_json = JSON.stringify(frontCanvas_json);
+        //     frontCanvas.loadFromJSON(final_front_json, function(objects, options) {
+        //     frontCanvas.renderAll();
 
-        var rightCanvas = new fabric.StaticCanvas( document.getElementById("rightCanvas") );
+        //     setTimeout(function(){
-        tmp_rightCanvas =  {!! json_encode($client_design_array[0]->ContentRight) !!};
-        rightCanvas.loadFromJSON(tmp_rightCanvas, function(objects, options) {
-            rightCanvas.renderAll();
 
-            setTimeout(function(){
+        //         frontCanvas.backgroundImage = 0;
+        //         frontCanvas.clear();
+        //         frontCanvas.renderAll();
 
-                rightCanvas.backgroundImage = 0;
+        //         setTimeout(function(){
-                rightCanvas.clear();
-                rightCanvas.renderAll();
 
-                setTimeout(function(){
+        //             frontCanvas.loadFromJSON(frontCanvas_json, function(objects, options) {
+        //                 frontCanvas.renderAll();
+        //                 frontCanvas.selection = false;
+        //             });
 
-                    rightCanvas.loadFromJSON(tmp_rightCanvas, function(objects, options) {
+        //         },1000);
-                        rightCanvas.renderAll();
-                        rightCanvas.selection = false;
-                    });
 
-                },1000);
+        //     } ,500);
-            } ,500);
+        // });
+        // }, 1000);
 
-        });
 
-        var leftCanvas = new fabric.StaticCanvas( document.getElementById("leftCanvas") );
-        tmp_leftCanvas = {!! json_encode($client_design_array[0]->ContentLeft) !!};
-        leftCanvas.loadFromJSON(tmp_leftCanvas, function(objects, options) {
-            leftCanvas.renderAll();
 
-            setTimeout(function(){
         
-                leftCanvas.backgroundImage = 0;
-                leftCanvas.clear();
-                leftCanvas.renderAll();
 
-                setTimeout(function(){
 
-                    leftCanvas.loadFromJSON(tmp_leftCanvas, function(objects, options) {
-                        leftCanvas.renderAll();
-                        leftCanvas.selection = false;
-                    });
 
-                },1000);
+        // var backCanvas = new fabric.StaticCanvas( document.getElementById("backCanvas") );
-            } ,500);
+        // tmp_backCanvas = {!! json_encode($client_design_array[0]->ContentBack) !!};
+        // backCanvas.loadFromJSON(tmp_backCanvas, function(objects, options) {
+        //     backCanvas.renderAll();
 
-        });
+        //     setTimeout(function(){
 
+        //         backCanvas.backgroundImage = 0;
+        //         backCanvas.clear();
+        //         backCanvas.renderAll();
+
+        //         setTimeout(function(){
+
+        //             backCanvas.loadFromJSON(tmp_backCanvas, function(objects, options) {
+        //                 backCanvas.renderAll();
+        //                 backCanvas.selection = false;
+        //             });
+
+        //         },1000);
+        //     } ,500);
+
+        // });
+        
+        // var rightCanvas = new fabric.StaticCanvas( document.getElementById("rightCanvas") );
+        // tmp_rightCanvas =  {!! json_encode($client_design_array[0]->ContentRight) !!};
+        // rightCanvas.loadFromJSON(tmp_rightCanvas, function(objects, options) {
+        //     rightCanvas.renderAll();
+
+        //     setTimeout(function(){
+
+        //         rightCanvas.backgroundImage = 0;
+        //         rightCanvas.clear();
+        //         rightCanvas.renderAll();
+
+        //         setTimeout(function(){
+
+        //             rightCanvas.loadFromJSON(tmp_rightCanvas, function(objects, options) {
+        //                 rightCanvas.renderAll();
+        //                 rightCanvas.selection = false;
+        //             });
+
+        //         },1000);
+        //     } ,500);
+
+        // });
+
+        // var leftCanvas = new fabric.StaticCanvas( document.getElementById("leftCanvas") );
+        // tmp_leftCanvas = {!! json_encode($client_design_array[0]->ContentLeft) !!};
+        // leftCanvas.loadFromJSON(tmp_leftCanvas, function(objects, options) {
+        //     leftCanvas.renderAll();
+
+        //     setTimeout(function(){
+
+        //         leftCanvas.backgroundImage = 0;
+        //         leftCanvas.clear();
+        //         leftCanvas.renderAll();
+
+        //         setTimeout(function(){
+
+        //             leftCanvas.loadFromJSON(tmp_leftCanvas, function(objects, options) {
+        //                 leftCanvas.renderAll();
+        //                 leftCanvas.selection = false;
+        //             });
+
+        //         },1000);
+        //     } ,500);
+
+        // });
       
         
         function loadPrintFile(){
@@ -380,7 +491,7 @@
 
         function frontContent(fb_height, fb_width, fb_x,  fb_y){
             var objects = frontCanvas.getObjects();
-
+            console.log(objects)
             try{
                 var p_number = '{{ $order_item_array[0]->Number }}';
                 for (var j in objects) {
@@ -405,11 +516,20 @@
                             objects[i].setStrokeWidth(getStrokeWidth * 4);
                         }
                     }
+
+                    // if(objects[i].get('type') == "image"){
+                    //     // console.log(objects[i])
+                    //     let imgUrl = objects[i].getSrc();
+                    //     // console.log(  objects[i].src = )
+                    //     toDataURL(imgUrl, function(dataUrl) {
+                    //         objects[i].setAttribute('scr') = dataUrl;
+                    //     })
+                    // }
                 }	
             }catch(e){
-                
+                console.log(e)
             }
-				
+            frontCanvas.renderAll();
             zoomIn(frontCanvas, fb_width, fb_height, "Front");
             var content = frontCanvas.toSVG();
             document.getElementById('svgFrontContent').innerHTML = content;
@@ -424,6 +544,11 @@
                 getElements.removeAttribute('x')
                 getElements.removeAttribute('y');
                 getElements.setAttribute("transform", "matrix(1 0 0 1 "+getXAttribute+" "+getYAttribute+")");
+
+                // toDataURL(getElements.getAttribute('xlink:href'), function(dataUrl) {
+                //     getElements.setAttributeNS("xlink:href", dataUrl)
+                // })
+                
             }
 
             var allGs = el_id.getElementsByTagName('g');
@@ -439,7 +564,6 @@
                 var children = gElem.childNodes;
 
                 var xforms = gElem.getAttribute('transform');
-                // console.log(xforms);
                 var parts  = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
                 
                 var firstX = parts[1],
@@ -474,6 +598,7 @@
                 var jContent = $.map(con, function(value) {
                     return(value);
                 });
+                
                 $("#Front_Border").html(jContent.join(""));
             }
 		}
@@ -730,6 +855,7 @@
             canvas.setWidth(canvas.getWidth() * SCALE_FACTOR_X);
 
             var objects = canvas.getObjects();
+
             for (var i in objects) {
                 var scaleX = objects[i].scaleX;
                 var scaleY = objects[i].scaleY;
@@ -746,9 +872,20 @@
                 objects[i].left = tempLeft;
                 objects[i].top = tempTop;
 
+                // if(objects[i].get('type') == "image"){
+                //     let imgUrl = objects[i].src;
+                //     toDataURL(imgUrl, function(dataUrl) {
+                //         // console.log(dataUrl)
+                //         objects[i].src = dataUrl;
+                //         canvas.renderAll();
+
+                //     })
+                // }
+                // canvas.renderAll();
                 objects[i].setCoords();
             }
             
+            // console.log(objects)
             canvas.renderAll();
         }
 
@@ -790,6 +927,19 @@
             },2000); */
 		}
 
+        function toDataURL(url, callback) {
+            var xhr = new XMLHttpRequest();
+            xhr.onload = function() {
+                var reader = new FileReader();
+                reader.onloadend = function() {
+                callback(reader.result);
+                }
+                reader.readAsDataURL(xhr.response);
+            };
+            xhr.open('GET', url);
+            xhr.responseType = 'blob';
+            xhr.send();
+        }
     </script>
 
 </body>