953 lines
40 KiB
PHP
953 lines
40 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Customize Uniform</title>
|
|
<link href="{{asset('/designer/custom-fonts/custom-fonts.php')}}" rel='stylesheet' type='text/css'>
|
|
<style>
|
|
canvas {
|
|
display:none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body onload="loadPrintFile()">
|
|
|
|
<div id="svgFrontContent" style="display:none;"></div>
|
|
<div id="svgBackContent" style="display:none;"></div>
|
|
<div id="svgRightContent" style="display:none;"></div>
|
|
<div id="svgLeftContent" style="display:none;"></div>
|
|
<div id="svgJockTag" style="display:none;"></div>
|
|
|
|
<p>Please wait... Click here to go <a href="#" id="close_window" >back</a></p>
|
|
<!-- width="157.936" height="173.727" -->
|
|
<canvas id="frontCanvas" width="157.936px" height="173.727px" style="border: 1px solid black;"></canvas>
|
|
<canvas id="backCanvas" width="157.936" height="173.727px" style="border: 1px solid black;"></canvas>
|
|
<canvas id="rightCanvas" width="96px" height="112px" style="border: 1px solid black;"></canvas>
|
|
<canvas id="leftCanvas" width="96px" height="112px" style="border: 1px solid black;"></canvas>
|
|
<div id="printFileDiv" style="display:none;"></div>
|
|
|
|
<form id="myForm" action="{{ url('admin/orders/download') }}" method="post" accept-charset="UTF-8"></form>
|
|
<p id="log"></p>
|
|
<!-- jQuery 3 -->
|
|
<script src="{{ asset('/bower_components/jquery/dist/jquery.min.js') }}"></script>
|
|
<!-- fabric js 1.7.20 -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
|
|
<!-- curvetext -->
|
|
<script src="https://rawgit.com/EffEPi/fabric.curvedText/master/fabric.curvedText.js"></script>
|
|
|
|
<script>
|
|
function logSubmit(event) {
|
|
log.textContent = `Form Submitted! Time stamp: ${event.timeStamp}`;
|
|
|
|
event.preventDefault();
|
|
}
|
|
|
|
var form = document.getElementById('myForm');
|
|
var log = document.getElementById('log');
|
|
form.addEventListener('submit', logSubmit);
|
|
|
|
// const sides = ["Front", "Back", "Right", "Left"];
|
|
|
|
|
|
|
|
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) ? tmp_frontCanvas : {});
|
|
loadDesigns(backCanvas, (tmp_backCanvas) ? tmp_backCanvas : {});
|
|
loadDesigns(leftCanvas, (tmp_leftCanvas) ? tmp_leftCanvas : {});
|
|
loadDesigns(rightCanvas, (tmp_rightCanvas) ? tmp_rightCanvas : {} );
|
|
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
|
|
|
|
function loadDesigns(side_canvas, canvas_json) {
|
|
console.log("canvas_json", 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 = {...item, src }
|
|
objects.push(images)
|
|
|
|
})
|
|
}else {
|
|
objects.push(item)
|
|
}
|
|
});
|
|
|
|
console.log("objects", objects)
|
|
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(){
|
|
|
|
side_canvas.backgroundImage = 0;
|
|
side_canvas.clear();
|
|
side_canvas.renderAll();
|
|
|
|
setTimeout(function(){
|
|
|
|
side_canvas.loadFromJSON(canvas_json, function(objects, options) {
|
|
side_canvas.renderAll();
|
|
side_canvas.selection = false;
|
|
});
|
|
|
|
},1000);
|
|
|
|
} ,500);
|
|
});
|
|
}, 1000);
|
|
}
|
|
|
|
// var frontCanvas = new fabric.StaticCanvas( document.getElementById("frontCanvas"));
|
|
// tmp_frontCanvas = {!! json_encode($client_design_array[0]->ContentFront) !!};
|
|
// console.log(tmp_frontCanvas)
|
|
|
|
// 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);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 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();
|
|
|
|
// 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(){
|
|
var path = 'https://crewsportswear.com/uploads/images/';
|
|
var template_code = "{{ $client_design_array[0]->TemplateCode }}";
|
|
var size = "{{ $order_item_array[0]->Size }}";
|
|
|
|
|
|
var svgLocation = path + "uniform-templates/" + template_code + "/HOODIE/SIZES/" + size + ".svg";
|
|
|
|
$.ajax({ //create an ajax request to load_page.php
|
|
type: "GET",
|
|
url : svgLocation,
|
|
dataType: "text", //expect html to be returned.
|
|
success: function(response){
|
|
|
|
$("#printFileDiv").html(response)
|
|
|
|
var fb = document.getElementById('Front_Border');
|
|
var fb_x = $(fb).children("rect").attr("x");
|
|
var fb_y = $(fb).children("rect").attr("y");
|
|
var fb_height = $(fb).children("rect").attr("height");
|
|
var fb_width = $(fb).children("rect").attr("width");
|
|
|
|
var bb = document.getElementById('Back_Border');
|
|
var bb_x = $(bb).children("rect").attr("x");
|
|
var bb_y = $(bb).children("rect").attr("y");
|
|
var bb_height = $(bb).children("rect").attr("height");
|
|
var bb_width = $(bb).children("rect").attr("width");
|
|
|
|
var rb = document.getElementById('Right_Border');
|
|
var rb_x = $(rb).children("rect").attr("x");
|
|
var rb_y = $(rb).children("rect").attr("y");
|
|
var rb_height = $(rb).children("rect").attr("height");
|
|
var rb_width = $(rb).children("rect").attr("width");
|
|
|
|
var lb = document.getElementById('Left_Border');
|
|
var lb_x = $(lb).children("rect").attr("x");
|
|
var lb_y = $(lb).children("rect").attr("y");
|
|
var lb_height = $(lb).children("rect").attr("height");
|
|
var lb_width = $(lb).children("rect").attr("width");
|
|
|
|
|
|
setTimeout(function() {
|
|
|
|
loadTemplateDesign();
|
|
frontContent(fb_height, fb_width, fb_x, fb_y);
|
|
backContent(bb_height, bb_width, bb_x, bb_y);
|
|
rightContent(rb_height, rb_width, rb_x, rb_y);
|
|
leftContent(lb_height, lb_width, lb_x, lb_y);
|
|
|
|
setTimeout(function(){
|
|
sendSVG();
|
|
},2000);
|
|
|
|
}, 3000);
|
|
}
|
|
});
|
|
}
|
|
|
|
function loadTemplateDesign(){
|
|
|
|
// tmpdetails = {!! json_encode($client_design_array[0]->TemplateDesign) !!};
|
|
var tmpdetails = "{{ $client_design_array[0]->TemplateDesign }}";
|
|
// var obj = JSON.parse(tmpdetails);
|
|
var obj = JSON.parse(tmpdetails.replace(/"/g,'"'))
|
|
|
|
|
|
///////////// for mainColor
|
|
var getMainColorType = obj[0].mainColor[0].type;
|
|
if(getMainColorType == "Solid"){
|
|
var setMainColor = obj[0].mainColor[0].solidColor;
|
|
$('#Front_MainColor').attr("fill", setMainColor);
|
|
$('#Back_MainColor').attr("fill", setMainColor);
|
|
}else{
|
|
var gradientColor1 = obj[0].mainColor[0].gradientColor1;
|
|
var gradientColor2 = obj[0].mainColor[0].gradientColor2;
|
|
var gradientColorOffset1 = obj[0].mainColor[0].gradientColorOffset1;
|
|
var gradientColorOffset2 = obj[0].mainColor[0].gradientColorOffset2;
|
|
var gradientFor = "Body";
|
|
var trimCount = 0;
|
|
var gradientIds = "Gradient_List";
|
|
|
|
loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
|
|
|
|
$('#Back_MainColor').attr("fill", "url(#Body_Gradient)");
|
|
$('#Front_MainColor').attr("fill", "url(#Body_Gradient)");
|
|
|
|
}///////////// END for mainColor
|
|
|
|
///////////// for patternColor
|
|
try{
|
|
|
|
var getMainBodyPatternId = obj[0].patternColors[0].patternId;
|
|
// console.log(getMainBodyPatternId);
|
|
var pColors = obj[0].patternColors[0].patternColors['length'];
|
|
|
|
if(pColors > 0){ // check if pattern exist
|
|
var k, arrayPatternColor = [];
|
|
for (i = 0 ; i < pColors ; i++){
|
|
l = i + 1;
|
|
k = "PatternColor" + l;
|
|
temp = {};
|
|
temp['PatternColor' + l] = obj[0].patternColors[0].patternColors[i][k];
|
|
arrayPatternColor.push(temp);
|
|
}
|
|
var getPatternURL = pattern_properties(getMainBodyPatternId);
|
|
var front_clipathval = "url(#Front_MainColor_Clippath_URL)";
|
|
var back_clipathval = "url(#Back_MainColor_Clippath_URL)";
|
|
|
|
var front_svgpatternid = "Front_MainColor_Pattern";
|
|
var back_svgpatternid = "Back_MainColor_Pattern";
|
|
|
|
var front_idappend = "Front_MainColor";
|
|
var back_idappend = "Back_MainColor";
|
|
|
|
if(obj[0].patternColors[0].patternColorType == "Solid"){
|
|
|
|
loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, arrayPatternColor);
|
|
loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, arrayPatternColor);
|
|
|
|
}else{
|
|
var gradientColor1 = obj[0].patternColors[0].patternGradientColor1;
|
|
var gradientColor2 = obj[0].patternColors[0].patternGradientColor2;
|
|
var gradientColorOffset1 = obj[0].patternColors[0].patternGradientOffset1;
|
|
var gradientColorOffset2 = obj[0].patternColors[0].patternGradientOffset2;
|
|
var gradientFor = "Body_Pattern";
|
|
var trimCount = 0;
|
|
var gradientIds = "Gradient_List";
|
|
var GradientPatternColor = [{
|
|
"PatternColor1" : "url(#Body_Pattern_Gradient)"
|
|
}];
|
|
|
|
// console.log(GradientPatternColor);
|
|
|
|
loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
|
|
loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, GradientPatternColor);
|
|
loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, GradientPatternColor);
|
|
|
|
}
|
|
}
|
|
|
|
}catch (e){
|
|
//error
|
|
}/////////////END PatternColor
|
|
|
|
|
|
var Trims = obj[0].Trims['length'];
|
|
if(Trims > 0){ // check if Trim exist
|
|
for (i = 0 ; i < Trims ; i++){
|
|
trimCount = i + 1;
|
|
trimNum = "Trim" + trimCount;
|
|
trimNumPattern = "Trim" + trimCount + "_Pattern";
|
|
SVGTrimId = "Trim_" + trimCount;
|
|
trimPattern = "Trim" + trimCount + "_Pattern";
|
|
trimPatternColor = "Trim" + trimCount + "_patternColor";
|
|
|
|
if(obj[0].Trims[i][trimNum].type == "Solid"){
|
|
var trim_solid_color = obj[0].Trims[i][trimNum].solidColor;
|
|
|
|
$('#Front_'+SVGTrimId).attr("fill", trim_solid_color);
|
|
$('#Back_'+SVGTrimId).attr("fill", trim_solid_color);
|
|
$('#Left_'+SVGTrimId).attr("fill", trim_solid_color);
|
|
$('#Right_'+SVGTrimId).attr("fill", trim_solid_color);
|
|
|
|
}else{
|
|
var gradientColor1 = obj[0].Trims[i][trimNum].gradientColor1;
|
|
var gradientColor2 = obj[0].Trims[i][trimNum].gradientColor2;
|
|
var gradientColorOffset1 = obj[0].Trims[i][trimNum].gradientColorOffset1;
|
|
var gradientColorOffset2 = obj[0].Trims[i][trimNum].gradientColorOffset2;
|
|
var gradientFor = "Trim";
|
|
var gradientIds = "Gradient_List";
|
|
|
|
loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
|
|
$('#Front_'+SVGTrimId).attr("fill", "url(#"+SVGTrimId+"_Gradient)");
|
|
$('#Back_'+SVGTrimId).attr("fill", "url(#"+SVGTrimId+"_Gradient)");
|
|
}
|
|
|
|
///// TRIM PATTERN
|
|
try{
|
|
var getTrimPattern = obj[0].Trims[i][trimNumPattern].patternId;
|
|
|
|
if((getTrimPattern != "noPattern") || (getTrimPattern != "")){
|
|
var pColors = obj[0].Trims[i][trimNumPattern].patternColors['length'];
|
|
if(pColors > 0){
|
|
var k, arrayPatternColor = [];
|
|
for (a = 0 ; a < pColors ; a++){
|
|
l = a + 1;
|
|
k = "PatternColor" + l;
|
|
temp = {};
|
|
temp['PatternColor' + l] = obj[0].Trims[i][trimNumPattern].patternColors[a][k];
|
|
arrayPatternColor.push(temp);
|
|
}
|
|
// console.log(arrayPatternColor);
|
|
// console.log(obj[0].Trims[i][trimNumPattern].patternColorType);
|
|
|
|
var getPatternURL = pattern_properties(getTrimPattern);
|
|
var front_clipathval = "url(#Front_Trim_"+trimCount+"_Clippath_URL)";
|
|
var back_clipathval = "url(#Back_Trim_"+trimCount+"_Clippath_URL)";
|
|
|
|
var front_svgpatternid = "Front_Trim_"+trimCount+"_Pattern";
|
|
var back_svgpatternid = "Back_Trim_"+trimCount+"_Pattern";
|
|
|
|
var front_idappend = "Front_Trim_"+trimCount;
|
|
var back_idappend = "Back_Trim_"+trimCount;
|
|
// console.log(getPatternURL);
|
|
|
|
if(obj[0].Trims[i][trimNumPattern].patternColorType == "Solid"){
|
|
//console.log('solid');
|
|
loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, arrayPatternColor);
|
|
loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, arrayPatternColor);
|
|
}
|
|
else{
|
|
var gradientColor1 = obj[0].Trims[i][trimNumPattern].patternGradientColor1;
|
|
var gradientColor2 = obj[0].Trims[i][trimNumPattern].patternGradientColor2;
|
|
var gradientColorOffset1 = obj[0].Trims[i][trimNumPattern].patternGradientOffset1;
|
|
var gradientColorOffset2 = obj[0].Trims[i][trimNumPattern].patternGradientOffset2;
|
|
var gradientFor = "Trim_Pattern";
|
|
var gradientIds = "Gradient_List";
|
|
var GradientPatternColor = [{
|
|
"PatternColor1" : "url(#Trim_"+trimCount+"_Pattern_Gradient)"
|
|
}];
|
|
|
|
loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
|
|
loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, GradientPatternColor);
|
|
loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, GradientPatternColor);
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
}catch(e){
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
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) {
|
|
var id = objects[j].get('idNumber');
|
|
if(id == "NumberFront"){
|
|
objects[j].setText(p_number.toString());
|
|
objects[j].centerH();
|
|
objects[j].setCoords();
|
|
break;
|
|
}
|
|
}
|
|
|
|
}catch(e){
|
|
console.log('Error: ' + e);
|
|
}
|
|
|
|
try{
|
|
for (var i in objects) {
|
|
if(objects[i].get('type') == "text"){
|
|
if(objects[i].getStroke() != null){
|
|
var getStrokeWidth = objects[i].getStrokeWidth();
|
|
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;
|
|
|
|
var el_id = document.getElementById('svgFrontContent');
|
|
|
|
var getAllImageTag = el_id.getElementsByTagName('image');
|
|
for (var i=0; i < getAllImageTag.length ; i++) {
|
|
var getElements = getAllImageTag[i];
|
|
var getXAttribute = getElements.getAttribute('x');
|
|
var getYAttribute = getElements.getAttribute('y');
|
|
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');
|
|
var consolidatedContents1 = [];
|
|
item = {}
|
|
|
|
for (var i=0; i < allGs.length ; i++) {
|
|
var finalXvalue = 0;
|
|
var finalYvalue = 0;
|
|
var gElem = allGs[i];
|
|
|
|
|
|
var children = gElem.childNodes;
|
|
|
|
var xforms = gElem.getAttribute('transform');
|
|
var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
|
|
|
|
var firstX = parts[1],
|
|
firstY = parts[2];
|
|
// x="3009.299" y="363.447"
|
|
var defaultXvalue = fb_x;
|
|
var defaultYvalue = fb_y;
|
|
|
|
//console.log(firstX, firstY);
|
|
var finalXvalue = Number(firstX) + Number(defaultXvalue);
|
|
var finalYvalue = Number(firstY) + Number(defaultYvalue);
|
|
//console.log(finalXvalue, finalYvalue);
|
|
gElem.transform.baseVal.getItem(0).setTranslate(finalXvalue,finalYvalue);
|
|
// console.log(gElem.transform.baseVal.getItem(0));
|
|
var s = new XMLSerializer();
|
|
|
|
var str = s.serializeToString(gElem);
|
|
|
|
// this for the fucking excess of curve text
|
|
var scale = /scale\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
|
|
|
|
if(scale != null){
|
|
consolidatedContents1.push(str);
|
|
}
|
|
}
|
|
|
|
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(""));
|
|
}
|
|
}
|
|
|
|
function backContent(bb_height, bb_width, bb_x, bb_y){
|
|
|
|
var objects = backCanvas.getObjects();
|
|
|
|
try{
|
|
for (var i in objects) {
|
|
if(objects[i].get('type') == "text"){
|
|
if(objects[i].getStroke() != null){
|
|
var getStrokeWidth = objects[i].getStrokeWidth();
|
|
objects[i].setStrokeWidth(getStrokeWidth * 4);
|
|
}
|
|
}
|
|
}
|
|
}catch(e){
|
|
|
|
}
|
|
|
|
|
|
zoomIn(backCanvas, bb_width, bb_height, "Back");
|
|
var content = backCanvas.toSVG();
|
|
document.getElementById('svgBackContent').innerHTML = content;
|
|
|
|
var el_id = document.getElementById('svgBackContent');
|
|
|
|
var getAllImageTag = el_id.getElementsByTagName('image');
|
|
for (var i=0; i < getAllImageTag.length ; i++) {
|
|
var getElements = getAllImageTag[i];
|
|
var getXAttribute = getElements.getAttribute('x');
|
|
var getYAttribute = getElements.getAttribute('y');
|
|
getElements.removeAttribute('x')
|
|
getElements.removeAttribute('y');
|
|
getElements.setAttribute("transform", "matrix(1 0 0 1 "+getXAttribute+" "+getYAttribute+")");
|
|
}
|
|
|
|
var allGs = el_id.getElementsByTagName('g');
|
|
|
|
var consolidatedContents = [];
|
|
item = {}
|
|
|
|
for (var i=0; i < allGs.length ; i++) {
|
|
var finalXvalue = 0;
|
|
var finalYvalue = 0;
|
|
var gElem = allGs[i];
|
|
var children = gElem.childNodes;
|
|
|
|
var xforms = gElem.getAttribute('transform');
|
|
//console.log(xforms);
|
|
var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
|
|
var firstX = parts[1],
|
|
firstY = parts[2];
|
|
// x="460.455" y="363.397"
|
|
var defaultXvalue = bb_x;
|
|
var defaultYvalue = bb_y;
|
|
|
|
//console.log(firstX, firstY);
|
|
var finalXvalue = Number(firstX) + Number(defaultXvalue);
|
|
var finalYvalue = Number(firstY) + Number(defaultYvalue);
|
|
gElem.transform.baseVal.getItem(0).setTranslate(finalXvalue,finalYvalue);
|
|
|
|
var s = new XMLSerializer();
|
|
var str = s.serializeToString(gElem);
|
|
consolidatedContents.push(str);
|
|
|
|
}
|
|
|
|
var contents = JSON.stringify(consolidatedContents);
|
|
var con = jQuery.parseJSON(contents);
|
|
|
|
var countContents = con.length;
|
|
if(countContents != 0){ // check if content
|
|
var jContent = $.map(con, function(value) {
|
|
return(value);
|
|
});
|
|
$("#Back_Border").html(jContent.join(""));
|
|
}
|
|
}
|
|
|
|
function rightContent(rb_height, rb_width, rb_x, rb_y){
|
|
|
|
var objects = rightCanvas.getObjects();
|
|
|
|
try{
|
|
for (var i in objects) {
|
|
if(objects[i].get('type') == "text"){
|
|
if(objects[i].getStroke() != null){
|
|
var getStrokeWidth = objects[i].getStrokeWidth();
|
|
objects[i].setStrokeWidth(getStrokeWidth * 4);
|
|
}
|
|
}
|
|
}
|
|
}catch(e){
|
|
|
|
}
|
|
|
|
|
|
zoomIn(rightCanvas, rb_width, rb_height, "Right");
|
|
var content = rightCanvas.toSVG();
|
|
document.getElementById('svgRightContent').innerHTML = content;
|
|
|
|
var el_id = document.getElementById('svgRightContent');
|
|
|
|
var getAllImageTag = el_id.getElementsByTagName('image');
|
|
for (var i=0; i < getAllImageTag.length ; i++) {
|
|
var getElements = getAllImageTag[i];
|
|
var getXAttribute = getElements.getAttribute('x');
|
|
var getYAttribute = getElements.getAttribute('y');
|
|
getElements.removeAttribute('x')
|
|
getElements.removeAttribute('y');
|
|
getElements.setAttribute("transform", "matrix(1 0 0 1 "+getXAttribute+" "+getYAttribute+")");
|
|
}
|
|
|
|
var allGs = el_id.getElementsByTagName('g');
|
|
|
|
var consolidatedContents = [];
|
|
item = {}
|
|
|
|
for (var i=0; i < allGs.length ; i++) {
|
|
var finalXvalue = 0;
|
|
var finalYvalue = 0;
|
|
var gElem = allGs[i];
|
|
var children = gElem.childNodes;
|
|
|
|
var xforms = gElem.getAttribute('transform');
|
|
//console.log(xforms);
|
|
var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
|
|
var firstX = parts[1],
|
|
firstY = parts[2];
|
|
// x="460.455" y="363.397"
|
|
var defaultXvalue = rb_x;
|
|
var defaultYvalue = rb_y;
|
|
|
|
//console.log(firstX, firstY);
|
|
var finalXvalue = Number(firstX) + Number(defaultXvalue);
|
|
var finalYvalue = Number(firstY) + Number(defaultYvalue);
|
|
gElem.transform.baseVal.getItem(0).setTranslate(finalXvalue,finalYvalue);
|
|
|
|
var s = new XMLSerializer();
|
|
var str = s.serializeToString(gElem);
|
|
consolidatedContents.push(str);
|
|
|
|
}
|
|
|
|
var contents = JSON.stringify(consolidatedContents);
|
|
var con = jQuery.parseJSON(contents);
|
|
|
|
var countContents = con.length;
|
|
if(countContents != 0){ // check if content
|
|
var jContent = $.map(con, function(value) {
|
|
return(value);
|
|
});
|
|
$("#Right_Border").html(jContent.join(""));
|
|
}
|
|
}
|
|
|
|
function leftContent(lb_height, lb_width, lb_x, lb_y){
|
|
|
|
var objects = leftCanvas.getObjects();
|
|
|
|
try{
|
|
for (var i in objects) {
|
|
if(objects[i].get('type') == "text"){
|
|
if(objects[i].getStroke() != null){
|
|
var getStrokeWidth = objects[i].getStrokeWidth();
|
|
objects[i].setStrokeWidth(getStrokeWidth * 4);
|
|
}
|
|
}
|
|
}
|
|
}catch(e){
|
|
|
|
}
|
|
|
|
|
|
zoomIn(leftCanvas, lb_width, lb_height, "Left");
|
|
var content = leftCanvas.toSVG();
|
|
document.getElementById('svgLeftContent').innerHTML = content;
|
|
|
|
var el_id = document.getElementById('svgLeftContent');
|
|
|
|
var getAllImageTag = el_id.getElementsByTagName('image');
|
|
for (var i=0; i < getAllImageTag.length ; i++) {
|
|
var getElements = getAllImageTag[i];
|
|
var getXAttribute = getElements.getAttribute('x');
|
|
var getYAttribute = getElements.getAttribute('y');
|
|
getElements.removeAttribute('x')
|
|
getElements.removeAttribute('y');
|
|
getElements.setAttribute("transform", "matrix(1 0 0 1 "+getXAttribute+" "+getYAttribute+")");
|
|
}
|
|
|
|
var allGs = el_id.getElementsByTagName('g');
|
|
|
|
var consolidatedContents = [];
|
|
item = {}
|
|
|
|
for (var i=0; i < allGs.length ; i++) {
|
|
var finalXvalue = 0;
|
|
var finalYvalue = 0;
|
|
var gElem = allGs[i];
|
|
var children = gElem.childNodes;
|
|
|
|
var xforms = gElem.getAttribute('transform');
|
|
//console.log(xforms);
|
|
var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
|
|
var firstX = parts[1],
|
|
firstY = parts[2];
|
|
var defaultXvalue = lb_x;
|
|
var defaultYvalue = lb_y;
|
|
|
|
//console.log(firstX, firstY);
|
|
var finalXvalue = Number(firstX) + Number(defaultXvalue);
|
|
var finalYvalue = Number(firstY) + Number(defaultYvalue);
|
|
gElem.transform.baseVal.getItem(0).setTranslate(finalXvalue,finalYvalue);
|
|
|
|
var s = new XMLSerializer();
|
|
var str = s.serializeToString(gElem);
|
|
consolidatedContents.push(str);
|
|
|
|
}
|
|
|
|
var contents = JSON.stringify(consolidatedContents);
|
|
var con = jQuery.parseJSON(contents);
|
|
|
|
var countContents = con.length;
|
|
if(countContents != 0){ // check if content
|
|
var jContent = $.map(con, function(value) {
|
|
return(value);
|
|
});
|
|
$("#Left_Border").html(jContent.join(""));
|
|
}
|
|
}
|
|
|
|
function zoomIn(canvas, actualSizeX, actualSizeY, side) {
|
|
var canvasScale = 1;
|
|
var SCALE_FACTOR = 1.2;
|
|
// TODO limit the max canvas zoom in
|
|
//Your scale factor is 2.172 (1086/500 = 2.172) or 2.13 (639/300 = 2.13) to be more precise.
|
|
// X = WIDTH and Y = HEIGHT
|
|
if(side == "Front" || side == "Back"){
|
|
// width="157.936px" height="173.727px" // hoodie
|
|
var SCALE_FACTOR_X = actualSizeX / 157.936;
|
|
var SCALE_FACTOR_Y = actualSizeY / 173.727;
|
|
}
|
|
|
|
if(side == "Right" || side == "Left"){
|
|
var SCALE_FACTOR_X = actualSizeX / 96;
|
|
var SCALE_FACTOR_Y = actualSizeY / 112;
|
|
}
|
|
|
|
canvasScale = canvasScale * SCALE_FACTOR;
|
|
|
|
canvas.setHeight(canvas.getHeight() * SCALE_FACTOR_Y);
|
|
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;
|
|
var left = objects[i].left;
|
|
var top = objects[i].top;
|
|
|
|
var tempScaleX = scaleX * SCALE_FACTOR_X;
|
|
var tempScaleY = scaleY * SCALE_FACTOR_Y;
|
|
var tempLeft = left * SCALE_FACTOR_X;
|
|
var tempTop = top * SCALE_FACTOR_Y;
|
|
|
|
objects[i].scaleX = tempScaleX;
|
|
objects[i].scaleY = tempScaleY;
|
|
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();
|
|
}
|
|
|
|
function sendSVG(){
|
|
var svgText = document.getElementById('printFileDiv').innerHTML;
|
|
|
|
|
|
var form = document.querySelector('form');
|
|
// form.setAttribute("method", "post");
|
|
// form.setAttribute("id", "frm_svg");
|
|
// form.setAttribute("action", "");
|
|
// form.setAttribute("accept-charset", "UTF-8");
|
|
|
|
var hiddenSVGField = document.createElement("input");
|
|
hiddenSVGField.setAttribute("type", "hidden");
|
|
hiddenSVGField.setAttribute("name", "svgText");
|
|
hiddenSVGField.setAttribute("value", svgText);
|
|
|
|
var hiddenToken = document.createElement("input");
|
|
hiddenToken.setAttribute("type", "hidden");
|
|
hiddenToken.setAttribute("name", "_token");
|
|
hiddenToken.setAttribute("value", "{{ csrf_token() }}");
|
|
|
|
var hiddenDetails = document.createElement("input");
|
|
hiddenDetails.setAttribute("type", "hidden");
|
|
hiddenDetails.setAttribute("name", "filename");
|
|
hiddenDetails.setAttribute("value", "{{ $order_item_array[0]->ProductName . "_" . $order_item_array[0]->Size }}");
|
|
|
|
|
|
form.appendChild(hiddenSVGField);
|
|
form.appendChild(hiddenToken);
|
|
form.appendChild(hiddenDetails);
|
|
|
|
document.body.appendChild(form);
|
|
form.submit();
|
|
alert("Print file is successfully generated!");
|
|
/* setTimeout(function(){
|
|
window.location = "{{ url('admin/orders/view') }}" + "/" + "{{ $order_item_array[0]->CartKey }}"
|
|
},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>
|
|
</html>
|