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

[fix] bugs

Browse source
This commit is contained in:
Alban 2019-11-22 23:02:46 +01:00
parent b40452b0fb
commit 46ba08519b
6 changed files with 241 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

144
public/index.php
View file

@ -3,19 +3,19 @@
$stampsImgList=scandir("../stamps");
foreach( $stampsImgList as $file ){
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");
$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 ){
$file = $bgdImgList[ $key ];
if( strpos( "$file", ".") != 0 ){
$key = substr( $file, 11, -4 );
// $bgdArr[$key] ="<option value='../synthesis/".urlencode($file)."'>$key</li>";
$bgdArr[$key] ="../synthesis/".urlencode($file);
}
@ -48,20 +48,33 @@ body {
}
* {
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;}
#canvas{
position: absolute;
right: 10px;
top: 0px;
user-select: none;
cursor: default;
}
div#menu {
position: absolute;
left: 10px;
top: 0px;
}
#canvas{
user-select: none;
cursor: default;
}
.btn{
text-decoration: none;
border: 1px solid #eee;
@ -69,10 +82,31 @@ dd{margin:32px;}
border-radius: 24px;
color: inherit;
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>
</head>
<body>
<div id="container">
<h1 id="title">Your #HSF2020 flyer </h1>
<!-- Create the container of the tool -->
<div id="canvas">
@ -101,8 +135,9 @@ dd{margin:32px;}
<?= $stampsSelect ?>
</select>
</dd>
<!--
<dt>
<label>one of your own is it?</label>
<label>a stamp of your own?</label>
</dt>
<dd>
<input class=btn type="file" id="custompicture" />
@ -112,9 +147,45 @@ dd{margin:32px;}
</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>
@ -139,11 +210,11 @@ function updateCanvasBg( imageURL){
canvas.setHeight(img.getScaledHeight())
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
// Optionally add an opacity lvl to the image
backgroundImageOpacity: 0.5,
// backgroundImageOpacity: 0.5,
// should the image be resized to fit the container?
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
document.getElementById("background-image").addEventListener("change", function(){
if( "" === this.value ) return
updateCanvasBg( this.value)
}, false);
@ -213,6 +285,40 @@ function saveImage(e) {
var imageSaver = document.getElementById('lnkDownload');
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>
</div>
</body>
</html>