[fix] bugs
This commit is contained in:
Alban
parent
b40452b0fb
commit
46ba08519b
2
.gitignore
vendored
2
.gitignore
vendored
@ -2,3 +2,5 @@ images
|
|||||||
logs
|
logs
|
||||||
synthesis
|
synthesis
|
||||||
*swp
|
*swp
|
||||||
|
stamps
|
||||||
|
a4
|
||||||
|
|||||||
@ -17,8 +17,8 @@ read name type GEOMETRY canvas depth format size other <<< $( identify $IMG )
|
|||||||
IMG_WIDTH=$( cut -d "x" -f 1 <<< $GEOMETRY )
|
IMG_WIDTH=$( cut -d "x" -f 1 <<< $GEOMETRY )
|
||||||
IMG_HEIGHT=$( cut -d "x" -f 2 <<< $GEOMETRY )
|
IMG_HEIGHT=$( cut -d "x" -f 2 <<< $GEOMETRY )
|
||||||
|
|
||||||
TOTAL_WIDTH=$( [[ -n "$LANDSCAPE" ]] && echo $LARGE_SIDE || echo $SMALL_SIDE )
|
TOTAL_WIDTH=$( [[ "$LANDSCAPE" == "1" ]] && echo $LARGE_SIDE || echo $SMALL_SIDE )
|
||||||
TOTAL_HEIGHT=$( [[ -n "$LANDSCAPE" ]] && echo $SMALL_SIDE || echo $LARGE_SIDE )
|
TOTAL_HEIGHT=$( [[ "$LANDSCAPE" == "1" ]] && echo $SMALL_SIDE || echo $LARGE_SIDE )
|
||||||
|
|
||||||
REQ_WIDTH=$(( $TOTAL_WIDTH / $COUNT_HORIZONTAL ))
|
REQ_WIDTH=$(( $TOTAL_WIDTH / $COUNT_HORIZONTAL ))
|
||||||
REQ_HEIGHT=$(( $TOTAL_HEIGHT / $COUNT_VERTICAL ))
|
REQ_HEIGHT=$(( $TOTAL_HEIGHT / $COUNT_VERTICAL ))
|
||||||
@ -26,9 +26,9 @@ REQ_HEIGHT=$(( $TOTAL_HEIGHT / $COUNT_VERTICAL ))
|
|||||||
DUP=$(( ( $COUNT_HORIZONTAL * $COUNT_VERTICAL ) - 1 ))
|
DUP=$(( ( $COUNT_HORIZONTAL * $COUNT_VERTICAL ) - 1 ))
|
||||||
|
|
||||||
DATE=$( date +%s )
|
DATE=$( date +%s )
|
||||||
OUTPUT_DIR=/tmp
|
OUTPUT_DIR=$( dirname ~+ )/a4
|
||||||
FILENAME=$( basename $IMG )
|
FILENAME=$( basename $IMG )
|
||||||
PDF_NAME=${OUTPUT_DIR}/${DATE}_${FILENAME}.pdf
|
PDF_NAME=${OUTPUT_DIR}/${DATE}_${FILENAME}.pdf
|
||||||
OUT=$( montage -tile ${COUNT_HORIZONTAL}x${COUNT_VERTICAL} -density 200x200 -units pixelspercentimeter -border 0 -page ${TOTAL_WIDTH}x${TOTAL_HEIGHT} "$IMG" -geometry ${REQ_WIDTH}x${REQ_HEIGHT} -duplicate ${DUP},0 ${PDF_NAME} )
|
OUT=$( montage -tile ${COUNT_HORIZONTAL}x${COUNT_VERTICAL} -density 200x200 -units pixelspercentimeter -border 0 -page ${TOTAL_WIDTH}x${TOTAL_HEIGHT} -compress zip -quality 100 "$IMG" -geometry ${REQ_WIDTH}x${REQ_HEIGHT} -duplicate ${DUP},0 ${PDF_NAME} )
|
||||||
|
|
||||||
[ 0 -eq $? ] && echo $PDF_NAME || panic "An error occured... $OUT"
|
[ 0 -eq $? ] && echo $PDF_NAME || panic "An error occured... $OUT"
|
||||||
|
|||||||
144
public/index.php
144
public/index.php
@ -3,19 +3,19 @@
|
|||||||
$stampsImgList=scandir("../stamps");
|
$stampsImgList=scandir("../stamps");
|
||||||
foreach( $stampsImgList as $file ){
|
foreach( $stampsImgList as $file ){
|
||||||
if( strpos( "$file", ".") != 0 ){
|
if( strpos( "$file", ".") != 0 ){
|
||||||
$stampsSelect .= "<option value='../stamps/".urlencode($file)."'>$file</option>";
|
$name = ucwords(str_replace("_", " ",substr($file,0,-4)));
|
||||||
|
$stampsSelect .= "<option value='../stamps/".urlencode($file)."'>$name</option>";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
$bgdImgList = scandir("../synthesis");
|
$bgdImgList = scandir("../synthesis");
|
||||||
$randomKeys = array_rand( $bgdImgList , 13 );
|
$randomKeys = array_rand( $bgdImgList , 13 );
|
||||||
$bgdSelect="<option>the beauty is in your eyes</option>";
|
$bgdSelect="<option value=''>the beauty is in your eyes</option>";
|
||||||
foreach( $randomKeys as $key ){
|
foreach( $randomKeys as $key ){
|
||||||
$file = $bgdImgList[ $key ];
|
$file = $bgdImgList[ $key ];
|
||||||
if( strpos( "$file", ".") != 0 ){
|
if( strpos( "$file", ".") != 0 ){
|
||||||
$key = substr( $file, 11, -4 );
|
$key = substr( $file, 11, -4 );
|
||||||
// $bgdArr[$key] ="<option value='../synthesis/".urlencode($file)."'>$key</li>";
|
|
||||||
$bgdArr[$key] ="../synthesis/".urlencode($file);
|
$bgdArr[$key] ="../synthesis/".urlencode($file);
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -48,20 +48,33 @@ body {
|
|||||||
}
|
}
|
||||||
* {
|
* {
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
#container{
|
||||||
|
display:grid;
|
||||||
|
position: relative;
|
||||||
|
grid-template-areas:
|
||||||
|
"title"
|
||||||
|
"drawingArea" "menu" ;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu{
|
||||||
|
grid-area: menu;
|
||||||
|
}
|
||||||
|
#canvas{
|
||||||
|
grid-area: drawingArea;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
font-size: 1.6em;
|
||||||
|
grid-area: title;
|
||||||
|
color:red;
|
||||||
}
|
}
|
||||||
dd{margin:32px;}
|
dd{margin:32px;}
|
||||||
#canvas{
|
#canvas{
|
||||||
position: absolute;
|
user-select: none;
|
||||||
right: 10px;
|
cursor: default;
|
||||||
top: 0px;
|
}
|
||||||
user-select: none;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
div#menu {
|
|
||||||
position: absolute;
|
|
||||||
left: 10px;
|
|
||||||
top: 0px;
|
|
||||||
}
|
|
||||||
.btn{
|
.btn{
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border: 1px solid #eee;
|
border: 1px solid #eee;
|
||||||
@ -69,10 +82,31 @@ dd{margin:32px;}
|
|||||||
border-radius: 24px;
|
border-radius: 24px;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
background: #ddd;
|
background: #ddd;
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
#container{
|
||||||
|
grid-template-areas:
|
||||||
|
"title"
|
||||||
|
"drawingArea"
|
||||||
|
"menu"
|
||||||
|
;
|
||||||
|
}
|
||||||
|
#canvas{
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
#menu {
|
||||||
|
position: absolute;
|
||||||
|
left: 10px;
|
||||||
|
top: 48px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div id="container">
|
||||||
|
<h1 id="title">Your #HSF2020 flyer </h1>
|
||||||
<!-- Create the container of the tool -->
|
<!-- Create the container of the tool -->
|
||||||
<div id="canvas">
|
<div id="canvas">
|
||||||
|
|
||||||
@ -101,8 +135,9 @@ dd{margin:32px;}
|
|||||||
<?= $stampsSelect ?>
|
<?= $stampsSelect ?>
|
||||||
</select>
|
</select>
|
||||||
</dd>
|
</dd>
|
||||||
|
<!--
|
||||||
<dt>
|
<dt>
|
||||||
<label>one of your own is it?</label>
|
<label>a stamp of your own?</label>
|
||||||
</dt>
|
</dt>
|
||||||
<dd>
|
<dd>
|
||||||
<input class=btn type="file" id="custompicture" />
|
<input class=btn type="file" id="custompicture" />
|
||||||
@ -112,9 +147,45 @@ dd{margin:32px;}
|
|||||||
</dt>
|
</dt>
|
||||||
<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>
|
||||||
|
<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>
|
</dl>
|
||||||
|
<script src="./jquery.js"></script>
|
||||||
|
<script src="./jq-ajax-progress.js"></script>
|
||||||
|
|
||||||
<!-- Include Fabric.js in the page -->
|
<!-- Include Fabric.js in the page -->
|
||||||
<script src="./fabric.js"></script>
|
<script src="./fabric.js"></script>
|
||||||
@ -139,11 +210,11 @@ function updateCanvasBg( imageURL){
|
|||||||
canvas.setHeight(img.getScaledHeight())
|
canvas.setHeight(img.getScaledHeight())
|
||||||
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
|
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
|
||||||
// Optionally add an opacity lvl to the image
|
// Optionally add an opacity lvl to the image
|
||||||
backgroundImageOpacity: 0.5,
|
// backgroundImageOpacity: 0.5,
|
||||||
// should the image be resized to fit the container?
|
// should the image be resized to fit the container?
|
||||||
backgroundImageStretch: false
|
backgroundImageStretch: false
|
||||||
});
|
});
|
||||||
bgImage=imageURL.split(/(\\|\/)/g).pop()
|
bgImage=imageURL.split(/(\\|\/)/g).pop()
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -154,6 +225,7 @@ updateCanvasBg( '<?= current( $first ) ?>');
|
|||||||
|
|
||||||
// Update the background according to the select
|
// Update the background according to the select
|
||||||
document.getElementById("background-image").addEventListener("change", function(){
|
document.getElementById("background-image").addEventListener("change", function(){
|
||||||
|
if( "" === this.value ) return
|
||||||
updateCanvasBg( this.value)
|
updateCanvasBg( this.value)
|
||||||
}, false);
|
}, false);
|
||||||
|
|
||||||
@ -213,6 +285,40 @@ function saveImage(e) {
|
|||||||
var imageSaver = document.getElementById('lnkDownload');
|
var imageSaver = document.getElementById('lnkDownload');
|
||||||
imageSaver.addEventListener('click', saveImage, false);
|
imageSaver.addEventListener('click', saveImage, false);
|
||||||
|
|
||||||
|
$( "#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",
|
||||||
|
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...");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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>
|
</script>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
75
public/jq-ajax-progress.js
Normal file
75
public/jq-ajax-progress.js
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
/*
|
||||||
|
* jQuery Ajax Progress - Lightweight jQuery plugin that adds support of `progress` and `uploadProgress` events to $.ajax()
|
||||||
|
* Copyright (c) 2018 Alexey Lizurchik <al.lizurchik@gmail.com> (@likerR_r)
|
||||||
|
* Licensed under the MIT license
|
||||||
|
* http://likerrr.mit-license.org/
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function(factory) {
|
||||||
|
if (typeof define === 'function' && define.amd) {
|
||||||
|
// AMD. Register as an anonymous module.
|
||||||
|
define(['jquery'], factory);
|
||||||
|
} else if (typeof exports === 'object') {
|
||||||
|
// Node/CommonJS
|
||||||
|
module.exports = factory(require('jquery'));
|
||||||
|
} else {
|
||||||
|
// Browser globals
|
||||||
|
factory(jQuery);
|
||||||
|
}
|
||||||
|
}(function($) {
|
||||||
|
var $originalAjax = $.ajax.bind($);
|
||||||
|
|
||||||
|
$.ajax = function (url, options) {
|
||||||
|
if (typeof url === 'object') {
|
||||||
|
options = url;
|
||||||
|
url = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
options = options || {
|
||||||
|
chunking: false
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get current xhr object
|
||||||
|
var xmlHttpReq = options.xhr ? options.xhr() : $.ajaxSettings.xhr();
|
||||||
|
var chunking = options.chunking || $.ajaxSettings.chunking;
|
||||||
|
|
||||||
|
// Make it use our own.
|
||||||
|
options.xhr = function () {
|
||||||
|
if (typeof options.uploadProgress === 'function') {
|
||||||
|
if (!xmlHttpReq.upload) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// this line looks strange, but without it chrome doesn't catch `progress` event on uploading. Seems like chromium bug
|
||||||
|
xmlHttpReq.upload.onprogress = null;
|
||||||
|
|
||||||
|
// Upload progress listener
|
||||||
|
xmlHttpReq.upload.addEventListener('progress', function (e) {
|
||||||
|
options.uploadProgress.call(this, e);
|
||||||
|
}, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof options.progress === 'function') {
|
||||||
|
var lastChunkLen = 0;
|
||||||
|
|
||||||
|
// Download progress listener
|
||||||
|
xmlHttpReq.addEventListener('progress', function (e) {
|
||||||
|
var params = [e],
|
||||||
|
chunk = '';
|
||||||
|
|
||||||
|
if (this.readyState === XMLHttpRequest.LOADING && chunking) {
|
||||||
|
chunk = this.responseText.substr(lastChunkLen);
|
||||||
|
lastChunkLen = this.responseText.length;
|
||||||
|
params.push(chunk);
|
||||||
|
}
|
||||||
|
|
||||||
|
options.progress.apply(this, params);
|
||||||
|
}, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
return xmlHttpReq;
|
||||||
|
};
|
||||||
|
|
||||||
|
return $originalAjax(url, options);
|
||||||
|
};
|
||||||
|
}));
|
||||||
2
public/jquery.js
vendored
Normal file
2
public/jquery.js
vendored
Normal file
File diff suppressed because one or more lines are too long
33
public/montage.php
Normal file
33
public/montage.php
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
<?php
|
||||||
|
$img = $_POST['img'];
|
||||||
|
$horizontal = intval( $_POST['horizontal'] );
|
||||||
|
$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 );
|
||||||
|
}
|
||||||
|
|
||||||
|
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");
|
||||||
|
}
|
||||||
|
|
||||||
|
}else{
|
||||||
|
panic("Not a valid image");
|
||||||
|
}
|
||||||
|
$output = $return_code = NULL;
|
||||||
|
exec( __DIR__."/../page_generator.sh $file $horizontal $vertical $landscape" , $output, $return_code);
|
||||||
|
if( 0 === $return_code ){
|
||||||
|
$pdf = basename(implode("", $output));
|
||||||
|
echo( "https://2020.hackersfest.org//ImageGenerator/a4/".urlencode($pdf) );
|
||||||
|
}else{
|
||||||
|
panic( implode(" / ", $output ) );
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user