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

udapte

Browse Source
This commit is contained in:
franknstayn
2022-02-25 17:20:43 +08:00
parent 66b26b00d4
commit a94ef951a3
1 changed files with 221 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -48,99 +48,210 @@
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"));
tmp_frontCanvas = {!! json_encode($client_design_array[0]->ContentFront) !!}; var backCanvas = new fabric.StaticCanvas( document.getElementById("backCanvas"));
frontCanvas.loadFromJSON(tmp_frontCanvas, function(objects, options) { var leftCanvas = new fabric.StaticCanvas( document.getElementById("leftCanvas"));
frontCanvas.renderAll(); 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(){ setTimeout(function(){
frontCanvas.backgroundImage = 0; side_canvas.backgroundImage = 0;
frontCanvas.clear(); side_canvas.clear();
frontCanvas.renderAll(); side_canvas.renderAll();
setTimeout(function(){ setTimeout(function(){
frontCanvas.loadFromJSON(tmp_frontCanvas, function(objects, options) { side_canvas.loadFromJSON(canvas_json, function(objects, options) {
frontCanvas.renderAll(); side_canvas.renderAll();
frontCanvas.selection = false; side_canvas.selection = false;
}); });
},1000); },1000);
} ,500); } ,500);
}); });
}, 1000);
}
var backCanvas = new fabric.StaticCanvas( document.getElementById("backCanvas") ); // var frontCanvas = new fabric.StaticCanvas( document.getElementById("frontCanvas"));
tmp_backCanvas = {!! json_encode($client_design_array[0]->ContentBack) !!}; // tmp_frontCanvas = {!! json_encode($client_design_array[0]->ContentFront) !!};
backCanvas.loadFromJSON(tmp_backCanvas, function(objects, options) { // console.log(tmp_frontCanvas)
backCanvas.renderAll();
setTimeout(function(){ // let frontCanvas_json = JSON.parse(tmp_frontCanvas);
// let objects = [];
backCanvas.backgroundImage = 0; // Object.entries(frontCanvas_json.objects).forEach(([key, item]) => {
backCanvas.clear(); // if(item.type == 'image') {
backCanvas.renderAll(); // toDataURL(item.src, function(src) {
// const images = ada = {...item, src }
// objects.push(images)
setTimeout(function(){ // })
// }
// });
backCanvas.loadFromJSON(tmp_backCanvas, function(objects, options) { // var final_front_json = "";
backCanvas.renderAll(); // setTimeout(() => {
backCanvas.selection = false; // frontCanvas_json.objects = [];
}); // frontCanvas_json.objects = objects;
// final_front_json = JSON.stringify(frontCanvas_json);
// frontCanvas.loadFromJSON(final_front_json, function(objects, options) {
// frontCanvas.renderAll();
},1000); // setTimeout(function(){
} ,500);
}); // frontCanvas.backgroundImage = 0;
// frontCanvas.clear();
// 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.loadFromJSON(frontCanvas_json, function(objects, options) {
// frontCanvas.renderAll();
// frontCanvas.selection = false;
// });
rightCanvas.backgroundImage = 0; // },1000);
rightCanvas.clear();
rightCanvas.renderAll();
setTimeout(function(){ // } ,500);
// });
// }, 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();
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();
leftCanvas.loadFromJSON(tmp_leftCanvas, function(objects, options) { // setTimeout(function(){
leftCanvas.renderAll();
leftCanvas.selection = false;
});
},1000); // backCanvas.backgroundImage = 0;
} ,500); // 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(){ function loadPrintFile(){
@@ -380,7 +491,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) {
@@ -405,11 +516,20 @@
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;
@@ -424,6 +544,11 @@
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');
@@ -439,7 +564,6 @@
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],
@@ -474,6 +598,7 @@
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(""));
} }
} }
@@ -730,6 +855,7 @@
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;
@@ -746,9 +872,20 @@
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();
} }
@@ -790,6 +927,19 @@
},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>