[fix] cosmetics && sec
This commit is contained in:
alban
parent
b95d02c411
commit
f7f6fa25ea
394
public/index.php
394
public/index.php
@ -1,32 +1,34 @@
|
||||
<?php
|
||||
|
||||
// Yay! Welcome to the wonderful world of Ugly PHP In Headers!
|
||||
|
||||
// Build the stamp images list
|
||||
$stampsSelect="<option>soulless feelings</option>";
|
||||
$stampsImgList=scandir("../stamps");
|
||||
foreach( $stampsImgList as $file ){
|
||||
if( strpos( "$file", ".") != 0 ){
|
||||
$name = ucwords(str_replace("_", " ",substr($file,0,-4)));
|
||||
$stampsSelect .= "<option value='../stamps/".urlencode($file)."'>$name</option>";
|
||||
}
|
||||
}
|
||||
|
||||
if( strpos( "$file", ".") != 0 ){
|
||||
$name = ucwords(str_replace("_", " ",substr($file,0,-4)));
|
||||
$stampsSelect .= "<option value='../stamps/".urlencode($file)."'>$name</option>";
|
||||
}
|
||||
}
|
||||
|
||||
// Build the background images list
|
||||
$bgdImgList = scandir("../synthesis");
|
||||
$randomKeys = array_rand( $bgdImgList , 13 );
|
||||
$bgdSelect="<option value=''>the beauty is in your eyes</option>";
|
||||
foreach( $randomKeys as $key ){
|
||||
$file = $bgdImgList[ $key ];
|
||||
if( strpos( "$file", ".") != 0 ){
|
||||
$key = substr( $file, 11, -4 );
|
||||
$bgdArr[$key] ="../synthesis/".urlencode($file);
|
||||
$file = $bgdImgList[ $key ];
|
||||
if( strpos( "$file", ".") != 0 ){
|
||||
$key = substr( $file, 11, -4 );
|
||||
$bgdArr[$key] ="../synthesis/".urlencode($file);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
uksort( $bgdArr, "strnatcasecmp");
|
||||
|
||||
|
||||
$init_key = array_keys($bgdArr)[count($bgdArr)-1];
|
||||
$first = array( $init_key => $bgdArr [ $init_key ] );
|
||||
foreach( $bgdArr as $key => $val ){
|
||||
$bgdSelect .= "<option value='$val'>$key</option>";
|
||||
$bgdSelect .= "<option value='$val'>$key</option>";
|
||||
}
|
||||
|
||||
|
||||
@ -43,58 +45,59 @@
|
||||
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
|
||||
|
||||
body {
|
||||
font-size: 32px;
|
||||
font-family: monospace;
|
||||
font-size: 32px;
|
||||
font-family: monospace;
|
||||
}
|
||||
* {
|
||||
font-size: 32px;
|
||||
color: #222;
|
||||
font-size: 32px;
|
||||
color: #222;
|
||||
}
|
||||
#container{
|
||||
display:grid;
|
||||
position: relative;
|
||||
grid-template-areas:
|
||||
"title"
|
||||
"drawingArea" "menu" ;
|
||||
}
|
||||
"title"
|
||||
"drawingArea" "menu" ;
|
||||
}
|
||||
|
||||
#menu{
|
||||
grid-area: menu;
|
||||
grid-area: menu;
|
||||
}
|
||||
#canvas{
|
||||
grid-area: drawingArea;
|
||||
grid-area: drawingArea;
|
||||
}
|
||||
#title{
|
||||
font-size: 1.6em;
|
||||
grid-area: title;
|
||||
color:red;
|
||||
grid-area: title;
|
||||
color:red;
|
||||
}
|
||||
dd{
|
||||
margin:32px;
|
||||
}
|
||||
dd{margin:32px;}
|
||||
#canvas{
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
.btn{
|
||||
text-decoration: none;
|
||||
border: 1px solid #eee;
|
||||
padding: 8px 16px;
|
||||
border-radius: 24px;
|
||||
color: inherit;
|
||||
background: #ddd;
|
||||
text-decoration: none;
|
||||
border: 1px solid #eee;
|
||||
padding: 8px 16px;
|
||||
border-radius: 24px;
|
||||
color: inherit;
|
||||
background: #ddd;
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
#container{
|
||||
grid-template-areas:
|
||||
"title"
|
||||
"drawingArea"
|
||||
"menu"
|
||||
;
|
||||
"menu";
|
||||
|
||||
}
|
||||
#canvas{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0px;
|
||||
}
|
||||
#menu {
|
||||
position: absolute;
|
||||
@ -106,103 +109,102 @@ dd{margin:32px;}
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<h1 id="title">Your #HSF2020 flyer </h1>
|
||||
<!-- Create the container of the tool -->
|
||||
<div id="canvas">
|
||||
|
||||
<div id="drawingArea" class="drawing-area">
|
||||
<div class="canvas-container">
|
||||
<canvas id="composition-canvas" width="200" height="400"></canvas>
|
||||
<h1 id="title">Your #HSF2020 flyer </h1>
|
||||
|
||||
<div id="canvas">
|
||||
<div id="drawingArea" class="drawing-area">
|
||||
<div class="canvas-container">
|
||||
<canvas id="composition-canvas" width="200" height="400"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="menu">
|
||||
<dl>
|
||||
<dt>
|
||||
<label for="background-image">pick a word</label>
|
||||
</dt>
|
||||
<dd>
|
||||
<select class=btn id="background-image">
|
||||
<?= $bgdSelect ?>
|
||||
</select>
|
||||
</dd>
|
||||
<dt>
|
||||
<label for="stamps">stamp it</label>
|
||||
</dt>
|
||||
<dd>
|
||||
<select class=btn id="stamps">
|
||||
<?= $stampsSelect ?>
|
||||
</select>
|
||||
</dd>
|
||||
<!--
|
||||
<dt>
|
||||
<label>a stamp of your own?</label>
|
||||
</dt>
|
||||
<dd>
|
||||
<input class=btn type="file" id="custompicture" />
|
||||
</dd>
|
||||
<dt>
|
||||
<label>now shine</label>
|
||||
</dt>
|
||||
<dd>
|
||||
<a id="lnkDownload" class=btn href="#">Save image</a>
|
||||
</dd>
|
||||
-->
|
||||
<dt>get it on A4</dt>
|
||||
<dd>
|
||||
<form id="montage" action="montage.php" method="POST">
|
||||
↔
|
||||
<select class=btn name="horizontal">
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
</select>
|
||||
↕
|
||||
<select class=btn name="vertical">
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
</select>
|
||||
<br>
|
||||
<select class=btn name="landscape">
|
||||
<option value="0">portrait</option>
|
||||
<option value="1">paysage</option>
|
||||
</select>
|
||||
<br>
|
||||
<button class=btn type="submit">build</button>
|
||||
</form>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="menu">
|
||||
<dl>
|
||||
<dt>
|
||||
<label for="background-image">pick a word</label>
|
||||
</dt>
|
||||
<dd>
|
||||
<select class=btn id="background-image">
|
||||
<?= $bgdSelect ?>
|
||||
</select>
|
||||
</dd>
|
||||
<dt>
|
||||
<label for="stamps">stamp it</label>
|
||||
</dt>
|
||||
<dd>
|
||||
<select class=btn id="stamps">
|
||||
<?= $stampsSelect ?>
|
||||
</select>
|
||||
</dd>
|
||||
<!--
|
||||
<dt>
|
||||
<label>a stamp of your own?</label>
|
||||
</dt>
|
||||
<dd>
|
||||
<input class=btn type="file" id="custompicture" />
|
||||
</dd>
|
||||
<dt>
|
||||
<label>now shine</label>
|
||||
</dt>
|
||||
<dd>
|
||||
<a id="lnkDownload" class=btn href="#">Save image</a>
|
||||
</dd>
|
||||
-->
|
||||
<dt>get it on A4</dt>
|
||||
<dd>
|
||||
<form id="montage" action="montage.php" method="POST">
|
||||
↔
|
||||
<select class=btn name="horizontal">
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
</select>
|
||||
↕
|
||||
<select class=btn name="vertical">
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected>2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
</select>
|
||||
<br>
|
||||
<select class=btn name="landscape">
|
||||
<option value="0">portrait</option>
|
||||
<option value="1">paysage</option>
|
||||
</select>
|
||||
<br>
|
||||
<button class=btn type="submit">build</button>
|
||||
</form>
|
||||
</dd>
|
||||
</dl>
|
||||
<script src="./jquery.js"></script>
|
||||
<script src="./jq-ajax-progress.js"></script>
|
||||
|
||||
<!-- Include Fabric.js in the page -->
|
||||
<script src="./fabric.js"></script>
|
||||
|
||||
<script>
|
||||
let canvas = new fabric.Canvas('composition-canvas');
|
||||
|
||||
function updateCanvas(imageURL){
|
||||
fabric.Image.fromURL(imageURL, function(img) {
|
||||
img.scaleToHeight(300);
|
||||
img.scaleToWidth(300);
|
||||
canvas.centerObject(img);
|
||||
canvas.add(img);
|
||||
canvas.renderAll();
|
||||
});
|
||||
}
|
||||
<script src="./jquery.js"></script>
|
||||
<script src="./jq-ajax-progress.js"></script>
|
||||
<script src="./fabric.js"></script>
|
||||
<script>
|
||||
|
||||
let canvas = new fabric.Canvas('composition-canvas');
|
||||
function updateCanvas(imageURL){
|
||||
fabric.Image.fromURL(imageURL, function(img) {
|
||||
img.scaleToHeight(300);
|
||||
img.scaleToWidth(300);
|
||||
canvas.centerObject(img);
|
||||
canvas.add(img);
|
||||
canvas.renderAll();
|
||||
});
|
||||
}
|
||||
bgImage="";
|
||||
function updateCanvasBg( imageURL){
|
||||
var img=fabric.Image.fromURL( imageURL, function(img){
|
||||
@ -215,10 +217,7 @@ function updateCanvasBg( imageURL){
|
||||
backgroundImageStretch: false
|
||||
});
|
||||
bgImage=imageURL.split(/(\\|\/)/g).pop()
|
||||
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
|
||||
updateCanvasBg( '<?= current( $first ) ?>');
|
||||
@ -229,51 +228,45 @@ document.getElementById("background-image").addEventListener("change", function(
|
||||
updateCanvasBg( this.value)
|
||||
}, false);
|
||||
|
||||
// Add stamps according to the select
|
||||
document.getElementById("stamps").addEventListener("change", function(){
|
||||
|
||||
// Call the updateCanvas method providing as first argument the URL
|
||||
// of the image provided by the select
|
||||
updateCanvas(this.value);
|
||||
}, false);
|
||||
// Add stamps according to the select
|
||||
document.getElementById("stamps").addEventListener("change", function(){
|
||||
updateCanvas(this.value);
|
||||
}, false);
|
||||
|
||||
/*
|
||||
// When the user clicks on upload a custom picture
|
||||
document.getElementById('custompicture').addEventListener("change", function(e){
|
||||
var reader = new FileReader();
|
||||
// When the user clicks on upload a custom picture
|
||||
document.getElementById('custompicture').addEventListener("change", function(e){
|
||||
var reader = new FileReader();
|
||||
reader.onload = function (event){
|
||||
var imgObj = new Image();
|
||||
imgObj.src = event.target.result;
|
||||
// When the picture loads, create the image in Fabric.js
|
||||
imgObj.onload = function () {
|
||||
var img = new fabric.Image(imgObj);
|
||||
img.scaleToHeight(300);
|
||||
img.scaleToWidth(300);
|
||||
canvas.centerObject(img);
|
||||
canvas.add(img);
|
||||
canvas.renderAll();
|
||||
};
|
||||
};
|
||||
|
||||
reader.onload = function (event){
|
||||
var imgObj = new Image();
|
||||
imgObj.src = event.target.result;
|
||||
|
||||
// When the picture loads, create the image in Fabric.js
|
||||
imgObj.onload = function () {
|
||||
var img = new fabric.Image(imgObj);
|
||||
|
||||
img.scaleToHeight(300);
|
||||
img.scaleToWidth(300);
|
||||
canvas.centerObject(img);
|
||||
canvas.add(img);
|
||||
canvas.renderAll();
|
||||
};
|
||||
};
|
||||
|
||||
// If the user selected a picture, load it
|
||||
if(e.target.files[0]){
|
||||
reader.readAsDataURL(e.target.files[0]);
|
||||
}
|
||||
}, false);
|
||||
// If the user selected a picture, load it
|
||||
if(e.target.files[0]){
|
||||
reader.readAsDataURL(e.target.files[0]);
|
||||
}
|
||||
}, false);
|
||||
*/
|
||||
// When the user selects a picture that has been added and press the DEL key
|
||||
// The object will be removed !
|
||||
document.addEventListener("keydown", function(e) {
|
||||
var keyCode = e.keyCode;
|
||||
// When the user selects a picture that has been added and press the DEL key
|
||||
// The object will be removed !
|
||||
document.addEventListener("keydown", function(e) {
|
||||
var keyCode = e.keyCode;
|
||||
|
||||
if(keyCode == 46){
|
||||
console.log("Removing selected element on Fabric.js on DELETE key !");
|
||||
canvas.remove(canvas.getActiveObject());
|
||||
}
|
||||
}, false);
|
||||
if(keyCode == 46){
|
||||
console.log("Removing selected element on Fabric.js on DELETE key !");
|
||||
canvas.remove(canvas.getActiveObject());
|
||||
}
|
||||
}, false);
|
||||
|
||||
/*
|
||||
// Export the image
|
||||
@ -287,40 +280,43 @@ function saveImage(e) {
|
||||
var imageSaver = document.getElementById('lnkDownload');
|
||||
imageSaver.addEventListener('click', saveImage, false);
|
||||
*/
|
||||
|
||||
// Handles AJAX queries to A4 production process
|
||||
$( "#montage" ).on("submit",function(e){
|
||||
var dataURL = canvas.toDataURL();
|
||||
var div = $("<div class=progress>Upload: <span id=counter></span>%</div>")
|
||||
$(this).append(div)
|
||||
var data = {}
|
||||
$.each( $(this).serializeArray(), function( k,v ){
|
||||
data[v["name"]] = v["value"]
|
||||
})
|
||||
data["img"] = dataURL
|
||||
data["bgImage"] = bgImage
|
||||
e.preventDefault()
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
var dataURL = canvas.toDataURL();
|
||||
var div = $("<div class=progress>Upload: <span id=counter></span>%</div>")
|
||||
$(this).append(div)
|
||||
var data = {}
|
||||
$.each( $(this).serializeArray(), function( k,v ){
|
||||
data[v["name"]] = v["value"]
|
||||
})
|
||||
data["img"] = dataURL
|
||||
data["bgImage"] = bgImage
|
||||
e.preventDefault()
|
||||
// Call the montage URL to build the PDF
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
uploadProgress: function(e) {
|
||||
// track uploading
|
||||
if (e.lengthComputable) {
|
||||
var completedPercentage = Math.round((e.loaded * 100) / e.total);
|
||||
if( completedPercentage != 100 ){
|
||||
div.find("#counter").text( completedPercentage)
|
||||
}else{
|
||||
div.text("Building...");
|
||||
var completedPercentage = Math.round((e.loaded * 100) / e.total);
|
||||
if( completedPercentage != 100 ){
|
||||
div.find("#counter").text( completedPercentage)
|
||||
}else{
|
||||
div.text("Building...");
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
success : function(url,msg,xhr){
|
||||
div.html( "<a href="+url+" target=_blank>Download "+data["horizontal"]+"x"+data["vertical"]+"</a>") },
|
||||
error: function( data, msg, xhr){
|
||||
console.log( msg)
|
||||
},
|
||||
url: "montage.php",
|
||||
data: data
|
||||
});
|
||||
success : function(url,msg,xhr){
|
||||
div.html( "<a href="+url+" target=_blank>Download "+data["horizontal"]+"x"+data["vertical"]+"</a>")
|
||||
},
|
||||
error: function( data, msg, xhr){
|
||||
console.log( msg)
|
||||
},
|
||||
url: "montage.php",
|
||||
data: data
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,29 +5,26 @@ $vertical = intval( $_POST['vertical'] );
|
||||
$bgImage = basename( $_POST['bgImage'], ".jpg");
|
||||
$landscape = intval( $_POST['landscape'] );
|
||||
function panic( $msg ){
|
||||
header("HTTP/1.1 500 Internal Server Error");
|
||||
die( $msg );
|
||||
header("HTTP/1.1 500 Internal Server Error");
|
||||
die( $msg );
|
||||
}
|
||||
|
||||
if (strpos($img, 'data:image/png;base64') === 0) {
|
||||
|
||||
$img = str_replace('data:image/png;base64,', '', $img);
|
||||
$img = str_replace(' ', '+', $img);
|
||||
$data = base64_decode($img);
|
||||
$file = __DIR__.'/../a4/'.microtime(true).'_'.$bgImage.".png";
|
||||
|
||||
if ( ! file_put_contents($file, $data)) {
|
||||
panic("Failed to save canvas");
|
||||
}
|
||||
|
||||
$img = str_replace('data:image/png;base64,', '', $img);
|
||||
$img = str_replace(' ', '+', $img);
|
||||
$data = base64_decode($img);
|
||||
$file = __DIR__.'/../a4/'.microtime(true).'_'.$bgImage.".png";
|
||||
if ( ! file_put_contents($file, $data)) {
|
||||
panic("Failed to save canvas");
|
||||
}
|
||||
}else{
|
||||
panic("Not a valid image");
|
||||
panic("Not a valid image");
|
||||
}
|
||||
$output = $return_code = NULL;
|
||||
exec( __DIR__."/../page_generator.sh $file $horizontal $vertical $landscape" , $output, $return_code);
|
||||
exec( __DIR__."/../page_generator.sh ".escapeshellargs($file)." ".escapeshellargs($horizontal)." ".escapeshellargs($vertical)." ".escapeshellargs($landscape) , $output, $return_code);
|
||||
if( 0 === $return_code ){
|
||||
$pdf = basename(implode("", $output));
|
||||
echo( "https://2020.hackersfest.org//ImageGenerator/a4/".urlencode($pdf) );
|
||||
echo( "https://2020.hackersfest.org/ImageGenerator/a4/".urlencode($pdf) );
|
||||
}else{
|
||||
panic( implode(" / ", $output ) );
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user