From a94ef951a31060005da50cfbede18930ad339b8e Mon Sep 17 00:00:00 2001 From: franknstayn Date: Fri, 25 Feb 2022 17:20:43 +0800 Subject: [PATCH] udapte --- .../download_pages/tshirt.blade.php | 292 +++++++++++++----- 1 file changed, 221 insertions(+), 71 deletions(-) diff --git a/resources/views/admin_pages/download_pages/tshirt.blade.php b/resources/views/admin_pages/download_pages/tshirt.blade.php index 7ed7f27..04e1e27 100644 --- a/resources/views/admin_pages/download_pages/tshirt.blade.php +++ b/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(){ + var frontCanvas = new fabric.StaticCanvas( document.getElementById("frontCanvas")); + var backCanvas = new fabric.StaticCanvas( document.getElementById("backCanvas")); + 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); - frontCanvas.backgroundImage = 0; - frontCanvas.clear(); - frontCanvas.renderAll(); + } 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) { - frontCanvas.renderAll(); - frontCanvas.selection = false; - }); + side_canvas.backgroundImage = 0; + side_canvas.clear(); + 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") ); - tmp_backCanvas = {!! json_encode($client_design_array[0]->ContentBack) !!}; - backCanvas.loadFromJSON(tmp_backCanvas, function(objects, options) { - backCanvas.renderAll(); + },1000); - setTimeout(function(){ + } ,500); + }); + }, 1000); + } - backCanvas.backgroundImage = 0; - backCanvas.clear(); - backCanvas.renderAll(); + // var frontCanvas = new fabric.StaticCanvas( document.getElementById("frontCanvas")); + // tmp_frontCanvas = {!! json_encode($client_design_array[0]->ContentFront) !!}; + // console.log(tmp_frontCanvas) - setTimeout(function(){ + // let frontCanvas_json = JSON.parse(tmp_frontCanvas); + // let objects = []; + + // Object.entries(frontCanvas_json.objects).forEach(([key, item]) => { + // if(item.type == 'image') { + // toDataURL(item.src, function(src) { + // const images = ada = {...item, src } + // objects.push(images) + + // }) + // } + // }); + + // 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(); + + // setTimeout(function(){ + + // frontCanvas.backgroundImage = 0; + // frontCanvas.clear(); + // frontCanvas.renderAll(); + + // setTimeout(function(){ + + // frontCanvas.loadFromJSON(frontCanvas_json, function(objects, options) { + // frontCanvas.renderAll(); + // frontCanvas.selection = false; + // }); + + // },1000); + + // } ,500); + // }); + // }, 1000); - 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(){ + // var backCanvas = new fabric.StaticCanvas( document.getElementById("backCanvas") ); + // tmp_backCanvas = {!! json_encode($client_design_array[0]->ContentBack) !!}; + // backCanvas.loadFromJSON(tmp_backCanvas, function(objects, options) { + // backCanvas.renderAll(); - rightCanvas.loadFromJSON(tmp_rightCanvas, function(objects, options) { - rightCanvas.renderAll(); - rightCanvas.selection = false; - }); + // setTimeout(function(){ - },1000); - } ,500); + // backCanvas.backgroundImage = 0; + // backCanvas.clear(); + // backCanvas.renderAll(); - }); + // setTimeout(function(){ - 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(); + // backCanvas.loadFromJSON(tmp_backCanvas, function(objects, options) { + // backCanvas.renderAll(); + // backCanvas.selection = false; + // }); - setTimeout(function(){ + // },1000); + // } ,500); - leftCanvas.backgroundImage = 0; - leftCanvas.clear(); - leftCanvas.renderAll(); + // }); + + // 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(){ + // setTimeout(function(){ - leftCanvas.loadFromJSON(tmp_leftCanvas, function(objects, options) { - leftCanvas.renderAll(); - leftCanvas.selection = false; - }); + // rightCanvas.backgroundImage = 0; + // rightCanvas.clear(); + // rightCanvas.renderAll(); - },1000); - } ,500); + // 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], @@ -467,13 +591,14 @@ } var contents = JSON.stringify(consolidatedContents1); - + var con = jQuery.parseJSON(contents); var countContents = con.length; if(countContents != 0){ // check if content var jContent = $.map(con, function(value) { return(value); }); + $("#Front_Border").html(jContent.join("")); } } @@ -579,7 +704,7 @@ var el_id = document.getElementById('svgRightContent'); - var getAllImageTag = el_id.getElementsByTagName('image'); + var getAllImageTag = el_id.getElementsByTagName('image'); for (var i=0; i < getAllImageTag.length ; i++) { var getElements = getAllImageTag[i]; var getXAttribute = getElements.getAttribute('x'); @@ -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,7 +927,20 @@ },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(); + } - \ No newline at end of file +