[fix] cosmetics && sec

This commit is contained in:
alban 2019-11-22 23:28:46 +01:00
parent b95d02c411
commit f7f6fa25ea
2 changed files with 210 additions and 217 deletions

View File

@ -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;
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,13 +217,10 @@ function updateCanvasBg( imageURL){
backgroundImageStretch: false
});
bgImage=imageURL.split(/(\\|\/)/g).pop()
})
}
updateCanvasBg( '<?= current( $first ) ?>');
updateCanvasBg( '<?= current( $first ) ?>');
// Update the background according to the select
document.getElementById("background-image").addEventListener("change", function(){
@ -229,54 +228,48 @@ 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();
reader.onload = function (event){
var imgObj = new Image();
imgObj.src = event.target.result;
// 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();
};
};
// 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
// Export the image
function saveImage(e) {
this.href = canvas.toDataURL({
format: 'jpeg',
@ -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>

View File

@ -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 ) );
}