tmplab/ImageGenerator
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[fix] cosmetics && sec

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

198
public/index.php
View File

@ -1,4 +1,8 @@
<?php <?php
// Yay! Welcome to the wonderful world of Ugly PHP In Headers!
// Build the stamp images list
$stampsSelect="<option>soulless feelings</option>"; $stampsSelect="<option>soulless feelings</option>";
$stampsImgList=scandir("../stamps"); $stampsImgList=scandir("../stamps");
foreach( $stampsImgList as $file ){ foreach( $stampsImgList as $file ){
@ -8,7 +12,7 @@
} }
} }
// Build the background images list
$bgdImgList = scandir("../synthesis"); $bgdImgList = scandir("../synthesis");
$randomKeys = array_rand( $bgdImgList , 13 ); $randomKeys = array_rand( $bgdImgList , 13 );
$bgdSelect="<option value=''>the beauty is in your eyes</option>"; $bgdSelect="<option value=''>the beauty is in your eyes</option>";
@ -21,8 +25,6 @@
} }
} }
uksort( $bgdArr, "strnatcasecmp"); uksort( $bgdArr, "strnatcasecmp");
$init_key = array_keys($bgdArr)[count($bgdArr)-1]; $init_key = array_keys($bgdArr)[count($bgdArr)-1];
$first = array( $init_key => $bgdArr [ $init_key ] ); $first = array( $init_key => $bgdArr [ $init_key ] );
foreach( $bgdArr as $key => $val ){ foreach( $bgdArr as $key => $val ){
@ -47,8 +49,8 @@ body {
font-family: monospace; font-family: monospace;
} }
* { * {
font-size: 32px; font-size: 32px;
color: #222; color: #222;
} }
#container{ #container{
display:grid; display:grid;
@ -56,21 +58,22 @@ color: #222;
grid-template-areas: grid-template-areas:
"title" "title"
"drawingArea" "menu" ; "drawingArea" "menu" ;
}
} }
#menu{ #menu{
grid-area: menu; grid-area: menu;
} }
#canvas{ #canvas{
grid-area: drawingArea; grid-area: drawingArea;
} }
#title{ #title{
font-size: 1.6em; font-size: 1.6em;
grid-area: title; grid-area: title;
color:red; color:red;
}
dd{
margin:32px;
} }
dd{margin:32px;}
#canvas{ #canvas{
user-select: none; user-select: none;
cursor: default; cursor: default;
@ -88,8 +91,8 @@ dd{margin:32px;}
grid-template-areas: grid-template-areas:
"title" "title"
"drawingArea" "drawingArea"
"menu" "menu";
;
} }
#canvas{ #canvas{
position: absolute; position: absolute;
@ -106,10 +109,10 @@ dd{margin:32px;}
</head> </head>
<body> <body>
<div id="container"> <div id="container">
<h1 id="title">Your #HSF2020 flyer </h1>
<!-- Create the container of the tool -->
<div id="canvas">
<h1 id="title">Your #HSF2020 flyer </h1>
<div id="canvas">
<div id="drawingArea" class="drawing-area"> <div id="drawingArea" class="drawing-area">
<div class="canvas-container"> <div class="canvas-container">
<canvas id="composition-canvas" width="200" height="400"></canvas> <canvas id="composition-canvas" width="200" height="400"></canvas>
@ -135,7 +138,7 @@ dd{margin:32px;}
<?= $stampsSelect ?> <?= $stampsSelect ?>
</select> </select>
</dd> </dd>
<!-- <!--
<dt> <dt>
<label>a stamp of your own?</label> <label>a stamp of your own?</label>
</dt> </dt>
@ -148,52 +151,52 @@ dd{margin:32px;}
<dd> <dd>
<a id="lnkDownload" class=btn href="#">Save image</a> <a id="lnkDownload" class=btn href="#">Save image</a>
</dd> </dd>
--> -->
<dt>get it on A4</dt> <dt>get it on A4</dt>
<dd> <dd>
<form id="montage" action="montage.php" method="POST"> <form id="montage" action="montage.php" method="POST">
↔ ↔
<select class=btn name="horizontal"> <select class=btn name="horizontal">
<option value="1">1</option> <option value="1">1</option>
<option value="2" selected>2</option> <option value="2" selected>2</option>
<option value="3">3</option> <option value="3">3</option>
<option value="4">4</option> <option value="4">4</option>
<option value="5">5</option> <option value="5">5</option>
<option value="6">6</option> <option value="6">6</option>
<option value="7">7</option> <option value="7">7</option>
<option value="8">8</option> <option value="8">8</option>
</select> </select>
↕ ↕
<select class=btn name="vertical"> <select class=btn name="vertical">
<option value="1">1</option> <option value="1">1</option>
<option value="2" selected>2</option> <option value="2" selected>2</option>
<option value="3">3</option> <option value="3">3</option>
<option value="4">4</option> <option value="4">4</option>
<option value="5">5</option> <option value="5">5</option>
<option value="6">6</option> <option value="6">6</option>
<option value="7">7</option> <option value="7">7</option>
<option value="8">8</option> <option value="8">8</option>
</select> </select>
<br> <br>
<select class=btn name="landscape"> <select class=btn name="landscape">
<option value="0">portrait</option> <option value="0">portrait</option>
<option value="1">paysage</option> <option value="1">paysage</option>
</select> </select>
<br> <br>
<button class=btn type="submit">build</button> <button class=btn type="submit">build</button>
</form> </form>
</dd> </dd>
</dl> </dl>
<script src="./jquery.js"></script> </div>
<script src="./jq-ajax-progress.js"></script> </div>
<!-- Include Fabric.js in the page --> <script src="./jquery.js"></script>
<script src="./jq-ajax-progress.js"></script>
<script src="./fabric.js"></script> <script src="./fabric.js"></script>
<script> <script>
let canvas = new fabric.Canvas('composition-canvas');
function updateCanvas(imageURL){ let canvas = new fabric.Canvas('composition-canvas');
function updateCanvas(imageURL){
fabric.Image.fromURL(imageURL, function(img) { fabric.Image.fromURL(imageURL, function(img) {
img.scaleToHeight(300); img.scaleToHeight(300);
img.scaleToWidth(300); img.scaleToWidth(300);
@ -201,8 +204,7 @@ dd{margin:32px;}
canvas.add(img); canvas.add(img);
canvas.renderAll(); canvas.renderAll();
}); });
} }
bgImage=""; bgImage="";
function updateCanvasBg( imageURL){ function updateCanvasBg( imageURL){
var img=fabric.Image.fromURL( imageURL, function(img){ var img=fabric.Image.fromURL( imageURL, function(img){
@ -215,10 +217,7 @@ function updateCanvasBg( imageURL){
backgroundImageStretch: false backgroundImageStretch: false
}); });
bgImage=imageURL.split(/(\\|\/)/g).pop() bgImage=imageURL.split(/(\\|\/)/g).pop()
}) })
} }
updateCanvasBg( '<?= current( $first ) ?>'); updateCanvasBg( '<?= current( $first ) ?>');
@ -229,27 +228,21 @@ document.getElementById("background-image").addEventListener("change", function(
updateCanvasBg( this.value) updateCanvasBg( this.value)
}, false); }, false);
// Add stamps according to the select // Add stamps according to the select
document.getElementById("stamps").addEventListener("change", function(){ 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); updateCanvas(this.value);
}, false); }, false);
/* /*
// When the user clicks on upload a custom picture // When the user clicks on upload a custom picture
document.getElementById('custompicture').addEventListener("change", function(e){ document.getElementById('custompicture').addEventListener("change", function(e){
var reader = new FileReader(); var reader = new FileReader();
reader.onload = function (event){ reader.onload = function (event){
var imgObj = new Image(); var imgObj = new Image();
imgObj.src = event.target.result; imgObj.src = event.target.result;
// When the picture loads, create the image in Fabric.js // When the picture loads, create the image in Fabric.js
imgObj.onload = function () { imgObj.onload = function () {
var img = new fabric.Image(imgObj); var img = new fabric.Image(imgObj);
img.scaleToHeight(300); img.scaleToHeight(300);
img.scaleToWidth(300); img.scaleToWidth(300);
canvas.centerObject(img); canvas.centerObject(img);
@ -258,22 +251,22 @@ document.getElementById("background-image").addEventListener("change", function(
}; };
}; };
// If the user selected a picture, load it // If the user selected a picture, load it
if(e.target.files[0]){ if(e.target.files[0]){
reader.readAsDataURL(e.target.files[0]); reader.readAsDataURL(e.target.files[0]);
} }
}, false); }, false);
*/ */
// When the user selects a picture that has been added and press the DEL key // When the user selects a picture that has been added and press the DEL key
// The object will be removed ! // The object will be removed !
document.addEventListener("keydown", function(e) { document.addEventListener("keydown", function(e) {
var keyCode = e.keyCode; var keyCode = e.keyCode;
if(keyCode == 46){ if(keyCode == 46){
console.log("Removing selected element on Fabric.js on DELETE key !"); console.log("Removing selected element on Fabric.js on DELETE key !");
canvas.remove(canvas.getActiveObject()); canvas.remove(canvas.getActiveObject());
} }
}, false); }, false);
/* /*
// Export the image // Export the image
@ -287,19 +280,22 @@ function saveImage(e) {
var imageSaver = document.getElementById('lnkDownload'); var imageSaver = document.getElementById('lnkDownload');
imageSaver.addEventListener('click', saveImage, false); imageSaver.addEventListener('click', saveImage, false);
*/ */
// Handles AJAX queries to A4 production process
$( "#montage" ).on("submit",function(e){ $( "#montage" ).on("submit",function(e){
var dataURL = canvas.toDataURL(); var dataURL = canvas.toDataURL();
var div = $("<div class=progress>Upload: <span id=counter></span>%</div>") var div = $("<div class=progress>Upload: <span id=counter></span>%</div>")
$(this).append(div) $(this).append(div)
var data = {} var data = {}
$.each( $(this).serializeArray(), function( k,v ){ $.each( $(this).serializeArray(), function( k,v ){
data[v["name"]] = v["value"] data[v["name"]] = v["value"]
}) })
data["img"] = dataURL data["img"] = dataURL
data["bgImage"] = bgImage data["bgImage"] = bgImage
e.preventDefault() e.preventDefault()
      $.ajax({ // Call the montage URL to build the PDF
         type: "POST",   $.ajax({
   type: "POST",
uploadProgress: function(e) { uploadProgress: function(e) {
// track uploading // track uploading
if (e.lengthComputable) { if (e.lengthComputable) {
@ -312,15 +308,15 @@ e.preventDefault()
} }
}, },
success : function(url,msg,xhr){ success : function(url,msg,xhr){
div.html( "<a href="+url+" target=_blank>Download "+data["horizontal"]+"x"+data["vertical"]+"</a>")       }, div.html( "<a href="+url+" target=_blank>Download "+data["horizontal"]+"x"+data["vertical"]+"</a>")       
error: function( data, msg, xhr){ },
console.log( msg) error: function( data, msg, xhr){
}, console.log( msg)
         url: "montage.php", },
         data: data          url: "montage.php",
      });     data: data     
  });
}) })
</script> </script>
</div>
</body> </body>
</html> </html>

7
public/montage.php
View File

@ -10,24 +10,21 @@ function panic( $msg ){
} }
if (strpos($img, 'data:image/png;base64') === 0) { if (strpos($img, 'data:image/png;base64') === 0) {
$img = str_replace('data:image/png;base64,', '', $img); $img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img); $img = str_replace(' ', '+', $img);
$data = base64_decode($img); $data = base64_decode($img);
$file = __DIR__.'/../a4/'.microtime(true).'_'.$bgImage.".png"; $file = __DIR__.'/../a4/'.microtime(true).'_'.$bgImage.".png";
if ( ! file_put_contents($file, $data)) { if ( ! file_put_contents($file, $data)) {
panic("Failed to save canvas"); panic("Failed to save canvas");
} }
}else{ }else{
panic("Not a valid image"); panic("Not a valid image");
} }
$output = $return_code = NULL; $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 ){ if( 0 === $return_code ){
$pdf = basename(implode("", $output)); $pdf = basename(implode("", $output));
echo( "https://2020.hackersfest.org//ImageGenerator/a4/".urlencode($pdf) ); echo( "https://2020.hackersfest.org/ImageGenerator/a4/".urlencode($pdf) );
}else{ }else{
panic( implode(" / ", $output ) ); panic( implode(" / ", $output ) );
} }