179 lines
6.6 KiB
PHP
179 lines
6.6 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'>
|
||
|
||
</head>
|
||
<body>
|
||
|
||
<div id="svgFrontContent" style="display:none;"></div>
|
||
|
||
<p>Please wait... Click here to go <a href="#" id="close_window" >back</a></p>
|
||
<canvas id="frontCanvas" width="572px" height="502px" style="border: 1px solid black; display:none"></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="http://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 dwn = document.getElementById('btndownload'); */
|
||
var form = document.getElementById('myForm');
|
||
var log = document.getElementById('log');
|
||
form.addEventListener('submit', logSubmit);
|
||
|
||
|
||
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.overlayImage = null;
|
||
frontCanvas.renderAll();
|
||
|
||
setTimeout(function(){
|
||
|
||
frontCanvas.backgroundImage = 0;
|
||
frontCanvas.overlayImage = null;
|
||
frontCanvas.clear();
|
||
frontCanvas.renderAll();
|
||
|
||
setTimeout(function(){
|
||
|
||
frontCanvas.loadFromJSON(tmp_frontCanvas, function(objects, options) {
|
||
frontCanvas.overlayImage = null;
|
||
frontCanvas.renderAll();
|
||
frontCanvas.selection = false;
|
||
zoomIn(frontCanvas, "Front");
|
||
download(frontCanvas, 'print_file.jpg');
|
||
});
|
||
|
||
},1000);
|
||
|
||
} ,500);
|
||
});
|
||
|
||
|
||
/* dwn.onclick = function(){
|
||
download(frontCanvas, 'print_file.');
|
||
} */
|
||
|
||
function download(canvas, filename) {
|
||
/// create an "off-screen" anchor tag
|
||
var lnk = document.createElement('a'), e;
|
||
|
||
/// the key here is to set the download attribute of the a tag
|
||
lnk.download = filename;
|
||
|
||
/// convert canvas content to data-uri for link. When download
|
||
/// attribute is set the content pointed to by link will be
|
||
/// pushed as "download" in HTML5 capable browsers
|
||
lnk.href = canvas.toDataURL("image/jpeg;base64");
|
||
|
||
/// create a "fake" click-event to trigger the download
|
||
if (document.createEvent) {
|
||
e = document.createEvent("MouseEvents");
|
||
e.initMouseEvent("click", true, true, window,
|
||
0, 0, 0, 0, 0, false, false, false,
|
||
false, 0, null);
|
||
|
||
lnk.dispatchEvent(e);
|
||
} else if (lnk.fireEvent) {
|
||
lnk.fireEvent("onclick");
|
||
}
|
||
}
|
||
|
||
|
||
function zoomIn(canvas, 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"){
|
||
var SCALE_FACTOR_X = 792 / 572;
|
||
var SCALE_FACTOR_Y = 695.164 / 502;
|
||
}
|
||
|
||
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;
|
||
|
||
objects[i].setCoords();
|
||
}
|
||
|
||
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);
|
||
}
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html> |