webmaster/merchbay_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
franknstayn
2022-02-25 17:05:51 +08:00
parent 7e7a003f22
commit ba8503692b
1 changed files with 72 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

274
resources/views/admin_pages/download_pages/tshirt.blade.php
View File

@@ -33,7 +33,7 @@
<!-- jQuery 3 --> <!-- jQuery 3 -->
<script src="{{ asset('/bower_components/jquery/dist/jquery.min.js') }}"></script> <script src="{{ asset('/bower_components/jquery/dist/jquery.min.js') }}"></script>
<!-- fabric js 1.7.20 --> <!-- fabric js 1.7.20 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<!-- curvetext --> <!-- curvetext -->
<script src="https://rawgit.com/EffEPi/fabric.curvedText/master/fabric.curvedText.js"></script> <script src="https://rawgit.com/EffEPi/fabric.curvedText/master/fabric.curvedText.js"></script>
@@ -48,210 +48,99 @@
var log = document.getElementById('log'); var log = document.getElementById('log');
form.addEventListener('submit', logSubmit); form.addEventListener('submit', logSubmit);
// const sides = ["Front", "Back", "Right", "Left"];
var frontCanvas = new fabric.StaticCanvas( document.getElementById("frontCanvas")); var frontCanvas = new fabric.StaticCanvas( document.getElementById("frontCanvas"));
var backCanvas = new fabric.StaticCanvas( document.getElementById("backCanvas")); tmp_frontCanvas = {!! json_encode($client_design_array[0]->ContentFront) !!};
var leftCanvas = new fabric.StaticCanvas( document.getElementById("leftCanvas")); frontCanvas.loadFromJSON(tmp_frontCanvas, function(objects, options) {
var rightCanvas = new fabric.StaticCanvas( document.getElementById("rightCanvas")); frontCanvas.renderAll();
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(/&quot;/g,'"'));
}
if(backContentRaw) {
var tmp_backCanvas = JSON.parse(backContentRaw.replace(/&quot;/g,'"'));
}
if(leftContentRaw) {
var tmp_leftCanvas = JSON.parse(leftContentRaw.replace(/&quot;/g,'"'));
}
if(rightContentRaw) {
var tmp_rightCanvas = JSON.parse(rightContentRaw.replace(/&quot;/g,'"'));
}
// var tmp_frontCanvas = JSON.parse(frontContentRaw.replace(/&quot;/g,'"'));
// var tmp_leftCanvas = JSON.parse(leftContentRaw.replace(/&quot;/g,'"'));
// var tmp_rightCanvas = JSON.parse(rightContentRaw.replace(/&quot;/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(){ setTimeout(function(){
side_canvas.backgroundImage = 0; frontCanvas.backgroundImage = 0;
side_canvas.clear(); frontCanvas.clear();
side_canvas.renderAll(); frontCanvas.renderAll();
setTimeout(function(){ setTimeout(function(){
side_canvas.loadFromJSON(canvas_json, function(objects, options) { frontCanvas.loadFromJSON(tmp_frontCanvas, function(objects, options) {
side_canvas.renderAll(); frontCanvas.renderAll();
side_canvas.selection = false; frontCanvas.selection = false;
}); });
},1000); },1000);
} ,500); } ,500);
}); });
}, 1000);
}
// var frontCanvas = new fabric.StaticCanvas( document.getElementById("frontCanvas")); var backCanvas = new fabric.StaticCanvas( document.getElementById("backCanvas") );
// tmp_frontCanvas = {!! json_encode($client_design_array[0]->ContentFront) !!}; tmp_backCanvas = {!! json_encode($client_design_array[0]->ContentBack) !!};
// console.log(tmp_frontCanvas) backCanvas.loadFromJSON(tmp_backCanvas, function(objects, options) {
backCanvas.renderAll();
// let frontCanvas_json = JSON.parse(tmp_frontCanvas); setTimeout(function(){
// let objects = [];
// Object.entries(frontCanvas_json.objects).forEach(([key, item]) => { backCanvas.backgroundImage = 0;
// if(item.type == 'image') { backCanvas.clear();
// toDataURL(item.src, function(src) { backCanvas.renderAll();
// const images = ada = {...item, src }
// objects.push(images)
// }) setTimeout(function(){
// }
// });
// var final_front_json = ""; backCanvas.loadFromJSON(tmp_backCanvas, function(objects, options) {
// setTimeout(() => { backCanvas.renderAll();
// frontCanvas_json.objects = []; backCanvas.selection = false;
// frontCanvas_json.objects = objects; });
// final_front_json = JSON.stringify(frontCanvas_json);
// frontCanvas.loadFromJSON(final_front_json, function(objects, options) {
// frontCanvas.renderAll();
// setTimeout(function(){ },1000);
} ,500);
// frontCanvas.backgroundImage = 0; });
// frontCanvas.clear();
// frontCanvas.renderAll();
// setTimeout(function(){ 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();
// frontCanvas.loadFromJSON(frontCanvas_json, function(objects, options) { setTimeout(function(){
// frontCanvas.renderAll();
// frontCanvas.selection = false;
// });
// },1000); rightCanvas.backgroundImage = 0;
rightCanvas.clear();
rightCanvas.renderAll();
// } ,500); setTimeout(function(){
// });
// }, 1000);
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();
// var backCanvas = new fabric.StaticCanvas( document.getElementById("backCanvas") ); setTimeout(function(){
// tmp_backCanvas = {!! json_encode($client_design_array[0]->ContentBack) !!};
// backCanvas.loadFromJSON(tmp_backCanvas, function(objects, options) {
// backCanvas.renderAll();
// setTimeout(function(){ leftCanvas.loadFromJSON(tmp_leftCanvas, function(objects, options) {
leftCanvas.renderAll();
leftCanvas.selection = false;
});
// backCanvas.backgroundImage = 0; },1000);
// backCanvas.clear(); } ,500);
// 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(){ function loadPrintFile(){
@@ -491,7 +380,7 @@
function frontContent(fb_height, fb_width, fb_x, fb_y){ function frontContent(fb_height, fb_width, fb_x, fb_y){
var objects = frontCanvas.getObjects(); var objects = frontCanvas.getObjects();
console.log(objects)
try{ try{
var p_number = '{{ $order_item_array[0]->Number }}'; var p_number = '{{ $order_item_array[0]->Number }}';
for (var j in objects) { for (var j in objects) {
@@ -516,20 +405,11 @@
objects[i].setStrokeWidth(getStrokeWidth * 4); 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){ }catch(e){
console.log(e)
} }
frontCanvas.renderAll();
zoomIn(frontCanvas, fb_width, fb_height, "Front"); zoomIn(frontCanvas, fb_width, fb_height, "Front");
var content = frontCanvas.toSVG(); var content = frontCanvas.toSVG();
document.getElementById('svgFrontContent').innerHTML = content; document.getElementById('svgFrontContent').innerHTML = content;
@@ -544,11 +424,6 @@
getElements.removeAttribute('x') getElements.removeAttribute('x')
getElements.removeAttribute('y'); getElements.removeAttribute('y');
getElements.setAttribute("transform", "matrix(1 0 0 1 "+getXAttribute+" "+getYAttribute+")"); 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'); var allGs = el_id.getElementsByTagName('g');
@@ -564,6 +439,7 @@
var children = gElem.childNodes; var children = gElem.childNodes;
var xforms = gElem.getAttribute('transform'); var xforms = gElem.getAttribute('transform');
// console.log(xforms);
var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms); var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
var firstX = parts[1], var firstX = parts[1],
@@ -598,7 +474,6 @@
var jContent = $.map(con, function(value) { var jContent = $.map(con, function(value) {
return(value); return(value);
}); });
$("#Front_Border").html(jContent.join("")); $("#Front_Border").html(jContent.join(""));
} }
} }
@@ -855,7 +730,6 @@
canvas.setWidth(canvas.getWidth() * SCALE_FACTOR_X); canvas.setWidth(canvas.getWidth() * SCALE_FACTOR_X);
var objects = canvas.getObjects(); var objects = canvas.getObjects();
for (var i in objects) { for (var i in objects) {
var scaleX = objects[i].scaleX; var scaleX = objects[i].scaleX;
var scaleY = objects[i].scaleY; var scaleY = objects[i].scaleY;
@@ -872,20 +746,9 @@
objects[i].left = tempLeft; objects[i].left = tempLeft;
objects[i].top = tempTop; 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(); objects[i].setCoords();
} }
// console.log(objects)
canvas.renderAll(); canvas.renderAll();
} }
@@ -927,19 +790,6 @@
},2000); */ },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> </script>
</body> </body>