update
This commit is contained in:
franknstayn
179
resources/views/admin_pages/download_pages/mask.blade.php
Normal file
179
resources/views/admin_pages/download_pages/mask.blade.php
Normal file
@@ -0,0 +1,179 @@
|
||||
<!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>
|
||||
@@ -86,7 +86,6 @@
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
@foreach($item_goup_array as $item)
|
||||
|
||||
<div style="border: 1px solid #e2e2e2; padding: 10px; margin-bottom: 10px;">
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
@@ -127,6 +126,7 @@
|
||||
<tr>
|
||||
<th>Price</th>
|
||||
<th>Quantity</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
|
||||
|
||||
@@ -216,6 +216,9 @@
|
||||
<tr>
|
||||
<td>{{ $sub_item->Price }}</td>
|
||||
<td>{{ $sub_item->Quantity }}</td>
|
||||
<td>
|
||||
<a href="{{ url('admin/orders/download/mask' . '/' . $sub_item->DesignCode . '/' . $sub_item->Id )}}" class="btn btn-xs btn-primary"><i class="fa fa-download"></i> Download Print File</a>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
@elseif($item->FormUsed=="name-number-form")
|
||||
|
||||
Reference in New Issue
Block a user