update downloader for hoodie

This commit is contained in:
franknstayn
2022-04-01 21:12:48 +08:00
parent a326a2202d
commit 43929eef33

View File

@@ -1,6 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -9,29 +8,28 @@
<link href="{{asset('/designer/custom-fonts/custom-fonts.php')}}" rel='stylesheet' type='text/css'>
<style>
canvas {
display: none;
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="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>
<p>Please wait... Click here to go <a href="#" id="close_window" >back</a></p>
<canvas id="frontCanvas" width="222px" height="380px" style="border: 1px solid black;"></canvas>
<canvas id="backCanvas" width="222px" height="380px" 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> -->
<canvas id="frontCanvas" width="222px" height="380px" style="border: 1px solid black;"></canvas>
<canvas id="backCanvas" width="222px" height="380px" 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>
<p id="log"></p>
<!-- jQuery 3 -->
<script src="{{ asset('/bower_components/jquery/dist/jquery.min.js') }}"></script>
<!-- fabric js 1.7.20 -->
@@ -40,56 +38,56 @@
<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}`;
function logSubmit(event) {
log.textContent = `Form Submitted! Time stamp: ${event.timeStamp}`;
event.preventDefault();
event.preventDefault();
}
var form = document.getElementById('myForm');
var log = document.getElementById('log');
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"));
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(/&quot;/g, '"'));
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(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,'"'));
}
// 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);
loadDesigns(leftCanvas, tmp_leftCanvas);
loadDesigns(rightCanvas, tmp_rightCanvas);
} catch (error) {
console.log(error)
console.log(error)
}
@@ -99,12 +97,9 @@
let objects = [];
Object.entries(canvas_json.objects).forEach(([key, item]) => {
if (item.type == 'image') {
toDataURL(item.src, function(src) {
const images = ada = {
...item,
src
}
if(item.type == 'image') {
toDataURL(item.src, function(src) {
const images = ada = {...item, src }
objects.push(images)
})
@@ -119,23 +114,23 @@
side_canvas.loadFromJSON(final_json, function(objects, options) {
side_canvas.renderAll();
setTimeout(function() {
setTimeout(function(){
side_canvas.backgroundImage = 0;
side_canvas.clear();
side_canvas.renderAll();
side_canvas.backgroundImage = 0;
side_canvas.clear();
side_canvas.renderAll();
setTimeout(function() {
setTimeout(function(){
side_canvas.loadFromJSON(canvas_json, function(objects, options) {
side_canvas.renderAll();
side_canvas.selection = false;
});
side_canvas.loadFromJSON(canvas_json, function(objects, options) {
side_canvas.renderAll();
side_canvas.selection = false;
});
}, 1000);
},1000);
}, 500);
});
} ,500);
});
}, 1000);
}
@@ -185,7 +180,7 @@
@@ -211,7 +206,7 @@
// } ,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) {
@@ -257,24 +252,24 @@
// } ,500);
// });
function loadPrintFile() {
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 + "/TSHIRTS/SIZES/" + size + ".svg";
var svgLocation = path + "uniform-templates/" + template_code + "/HOODIE/SIZES/" + size + ".svg";
$.ajax({ //create an ajax request to load_page.php
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: svgLocation,
dataType: "text", //expect html to be returned.
success: function(response) {
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");
@@ -287,49 +282,49 @@
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");
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);
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);
rightContent(rb_height, rb_width, rb_x, rb_y);
leftContent(lb_height, lb_width, lb_x, lb_y);
setTimeout(function() {
setTimeout(function(){
sendSVG();
}, 2000);
},2000);
}, 3000);
}
});
}
function loadTemplateDesign() {
function loadTemplateDesign(){
tmpdetails = {!! json_encode($client_design_array[0]->TemplateDesign) !!};
var obj = JSON.parse(tmpdetails);
///////////// for mainColor
var getMainColorType = obj[0].mainColor[0].type;
if (getMainColorType == "Solid") {
if(getMainColorType == "Solid"){
var setMainColor = obj[0].mainColor[0].solidColor;
$('#Front_MainColor').attr("fill", setMainColor);
$('#Back_MainColor').attr("fill", setMainColor);
} else {
$('#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;
@@ -337,111 +332,111 @@
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
$('#Back_MainColor').attr("fill", "url(#Body_Gradient)");
$('#Front_MainColor').attr("fill", "url(#Body_Gradient)");
}///////////// END for mainColor
///////////// for patternColor
try {
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
if(pColors > 0){ // check if pattern exist
var k, arrayPatternColor = [];
for (i = 0; i < pColors; i++) {
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 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_svgpatternid = "Front_MainColor_Pattern";
var back_svgpatternid = "Back_MainColor_Pattern";
var front_idappend = "Front_MainColor";
var back_idappend = "Back_MainColor";
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);
if (obj[0].patternColors[0].patternColorType == "Solid") {
}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)"
}];
loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, arrayPatternColor);
loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, arrayPatternColor);
// console.log(GradientPatternColor);
} 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);
}
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) {
}catch (e){
//error
} /////////////END PatternColor
}/////////////END PatternColor
var Trims = obj[0].Trims['length'];
if (Trims > 0) { // check if Trim exist
for (i = 0; i < Trims; i++) {
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") {
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);
$('#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 {
}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)");
$('#Front_'+SVGTrimId).attr("fill", "url(#"+SVGTrimId+"_Gradient)");
$('#Back_'+SVGTrimId).attr("fill", "url(#"+SVGTrimId+"_Gradient)");
}
///// TRIM PATTERN
try {
try{
var getTrimPattern = obj[0].Trims[i][trimNumPattern].patternId;
if ((getTrimPattern != "noPattern") || (getTrimPattern != "")) {
if((getTrimPattern != "noPattern") || (getTrimPattern != "")){
var pColors = obj[0].Trims[i][trimNumPattern].patternColors['length'];
if (pColors > 0) {
if(pColors > 0){
var k, arrayPatternColor = [];
for (a = 0; a < pColors; a++) {
for (a = 0 ; a < pColors ; a++){
l = a + 1;
k = "PatternColor" + l;
temp = {};
@@ -451,71 +446,72 @@
// 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 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);
var front_svgpatternid = "Front_Trim_" + trimCount + "_Pattern";
var back_svgpatternid = "Back_Trim_" + trimCount + "_Pattern";
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)"
}];
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);
}
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) {
}catch(e){
}
}
}
}
}
function frontContent(fb_height, fb_width, fb_x, fb_y) {
function frontContent(fb_height, fb_width, fb_x, fb_y){
var objects = frontCanvas.getObjects();
console.log(objects)
try {
try{
var p_number = '{{ $order_item_array[0]->Number }}';
for (var j in objects) {
var id = objects[j].get('idNumber');
if (id == "NumberFront") {
if(id == "NumberFront"){
objects[j].setText(p_number.toString());
objects[j].centerH();
objects[j].setCoords();
break;
}
}
} catch (e) {
}catch(e){
console.log('Error: ' + e);
}
try {
try{
for (var i in objects) {
if (objects[i].get('type') == "text") {
if (objects[i].getStroke() != null) {
if(objects[i].get('type') == "text"){
if(objects[i].getStroke() != null){
var getStrokeWidth = objects[i].getStrokeWidth();
objects[i].setStrokeWidth(getStrokeWidth * 4);
}
@@ -529,47 +525,47 @@
// objects[i].setAttribute('scr') = dataUrl;
// })
// }
}
} catch (e) {
}
}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 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 + ")");
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++) {
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 parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
var firstX = parts[1],
firstY = parts[2];
// x="3009.299" y="363.447"
@@ -580,48 +576,48 @@
var finalXvalue = Number(firstX) + Number(defaultXvalue);
var finalYvalue = Number(firstY) + Number(defaultYvalue);
//console.log(finalXvalue, finalYvalue);
gElem.transform.baseVal.getItem(0).setTranslate(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) {
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
if(countContents != 0){ // check if content
var jContent = $.map(con, function(value) {
return (value);
return(value);
});
$("#Front_Border").html(jContent.join(""));
}
}
function backContent(bb_height, bb_width, bb_x, bb_y) {
}
function backContent(bb_height, bb_width, bb_x, bb_y){
var objects = backCanvas.getObjects();
try {
try{
for (var i in objects) {
if (objects[i].get('type') == "text") {
if (objects[i].getStroke() != null) {
if(objects[i].get('type') == "text"){
if(objects[i].getStroke() != null){
var getStrokeWidth = objects[i].getStrokeWidth();
objects[i].setStrokeWidth(getStrokeWidth * 4);
}
}
}
} catch (e) {
}catch(e){
}
@@ -631,14 +627,14 @@
var el_id = document.getElementById('svgBackContent');
var getAllImageTag = el_id.getElementsByTagName('image');
for (var i = 0; i < getAllImageTag.length; i++) {
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 + ")");
getElements.setAttribute("transform", "matrix(1 0 0 1 "+getXAttribute+" "+getYAttribute+")");
}
var allGs = el_id.getElementsByTagName('g');
@@ -646,7 +642,7 @@
var consolidatedContents = [];
item = {}
for (var i = 0; i < allGs.length; i++) {
for (var i=0; i < allGs.length ; i++) {
var finalXvalue = 0;
var finalYvalue = 0;
var gElem = allGs[i];
@@ -654,7 +650,7 @@
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],
firstY = parts[2];
// x="460.455" y="363.397"
@@ -664,7 +660,7 @@
//console.log(firstX, firstY);
var finalXvalue = Number(firstX) + Number(defaultXvalue);
var finalYvalue = Number(firstY) + Number(defaultYvalue);
gElem.transform.baseVal.getItem(0).setTranslate(finalXvalue, finalYvalue);
gElem.transform.baseVal.getItem(0).setTranslate(finalXvalue,finalYvalue);
var s = new XMLSerializer();
var str = s.serializeToString(gElem);
@@ -676,29 +672,29 @@
var con = jQuery.parseJSON(contents);
var countContents = con.length;
if (countContents != 0) { // check if content
if(countContents != 0){ // check if content
var jContent = $.map(con, function(value) {
return (value);
return(value);
});
$("#Back_Border").html(jContent.join(""));
}
}
function rightContent(rb_height, rb_width, rb_x, rb_y) {
function rightContent(rb_height, rb_width, rb_x, rb_y){
var objects = rightCanvas.getObjects();
try {
try{
for (var i in objects) {
if (objects[i].get('type') == "text") {
if (objects[i].getStroke() != null) {
if(objects[i].get('type') == "text"){
if(objects[i].getStroke() != null){
var getStrokeWidth = objects[i].getStrokeWidth();
objects[i].setStrokeWidth(getStrokeWidth * 4);
}
}
}
} catch (e) {
}catch(e){
}
@@ -709,13 +705,13 @@
var el_id = document.getElementById('svgRightContent');
var getAllImageTag = el_id.getElementsByTagName('image');
for (var i = 0; i < getAllImageTag.length; i++) {
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 + ")");
getElements.setAttribute("transform", "matrix(1 0 0 1 "+getXAttribute+" "+getYAttribute+")");
}
var allGs = el_id.getElementsByTagName('g');
@@ -723,7 +719,7 @@
var consolidatedContents = [];
item = {}
for (var i = 0; i < allGs.length; i++) {
for (var i=0; i < allGs.length ; i++) {
var finalXvalue = 0;
var finalYvalue = 0;
var gElem = allGs[i];
@@ -731,7 +727,7 @@
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],
firstY = parts[2];
// x="460.455" y="363.397"
@@ -741,7 +737,7 @@
//console.log(firstX, firstY);
var finalXvalue = Number(firstX) + Number(defaultXvalue);
var finalYvalue = Number(firstY) + Number(defaultYvalue);
gElem.transform.baseVal.getItem(0).setTranslate(finalXvalue, finalYvalue);
gElem.transform.baseVal.getItem(0).setTranslate(finalXvalue,finalYvalue);
var s = new XMLSerializer();
var str = s.serializeToString(gElem);
@@ -753,29 +749,29 @@
var con = jQuery.parseJSON(contents);
var countContents = con.length;
if (countContents != 0) { // check if content
if(countContents != 0){ // check if content
var jContent = $.map(con, function(value) {
return (value);
return(value);
});
$("#Right_Border").html(jContent.join(""));
}
}
function leftContent(lb_height, lb_width, lb_x, lb_y) {
function leftContent(lb_height, lb_width, lb_x, lb_y){
var objects = leftCanvas.getObjects();
try {
try{
for (var i in objects) {
if (objects[i].get('type') == "text") {
if (objects[i].getStroke() != null) {
if(objects[i].get('type') == "text"){
if(objects[i].getStroke() != null){
var getStrokeWidth = objects[i].getStrokeWidth();
objects[i].setStrokeWidth(getStrokeWidth * 4);
}
}
}
} catch (e) {
}catch(e){
}
@@ -785,14 +781,14 @@
var el_id = document.getElementById('svgLeftContent');
var getAllImageTag = el_id.getElementsByTagName('image');
for (var i = 0; i < getAllImageTag.length; i++) {
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 + ")");
getElements.setAttribute("transform", "matrix(1 0 0 1 "+getXAttribute+" "+getYAttribute+")");
}
var allGs = el_id.getElementsByTagName('g');
@@ -800,7 +796,7 @@
var consolidatedContents = [];
item = {}
for (var i = 0; i < allGs.length; i++) {
for (var i=0; i < allGs.length ; i++) {
var finalXvalue = 0;
var finalYvalue = 0;
var gElem = allGs[i];
@@ -808,7 +804,7 @@
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],
firstY = parts[2];
var defaultXvalue = lb_x;
@@ -817,7 +813,7 @@
//console.log(firstX, firstY);
var finalXvalue = Number(firstX) + Number(defaultXvalue);
var finalYvalue = Number(firstY) + Number(defaultYvalue);
gElem.transform.baseVal.getItem(0).setTranslate(finalXvalue, finalYvalue);
gElem.transform.baseVal.getItem(0).setTranslate(finalXvalue,finalYvalue);
var s = new XMLSerializer();
var str = s.serializeToString(gElem);
@@ -829,9 +825,9 @@
var con = jQuery.parseJSON(contents);
var countContents = con.length;
if (countContents != 0) { // check if content
if(countContents != 0){ // check if content
var jContent = $.map(con, function(value) {
return (value);
return(value);
});
$("#Left_Border").html(jContent.join(""));
}
@@ -843,16 +839,16 @@
// 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") {
if(side == "Front" || side == "Back"){
var SCALE_FACTOR_X = actualSizeX / 222;
var SCALE_FACTOR_Y = actualSizeY / 380;
}
if (side == "Right" || side == "Left") {
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);
@@ -888,12 +884,12 @@
// canvas.renderAll();
objects[i].setCoords();
}
// console.log(objects)
canvas.renderAll();
}
function sendSVG() {
function sendSVG(){
var svgText = document.getElementById('printFileDiv').innerHTML;
@@ -907,7 +903,7 @@
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");
@@ -916,7 +912,7 @@
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 }}");
hiddenDetails.setAttribute("value", "{{ $order_item_array[0]->ProductName . "_" . $order_item_array[0]->Size }}");
form.appendChild(hiddenSVGField);
@@ -929,14 +925,14 @@
/* 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);
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
@@ -947,5 +943,4 @@
</script>
</body>
</html>
</html>