This commit is contained in:
Alban 2019-11-14 09:23:20 +01:00
parent 1b89ba7e38
commit 66e0f08579
11 changed files with 29606 additions and 1 deletions

View File

@ -19,7 +19,7 @@ TMPFILE=$(mktemp)
# Search images
for i in {1..99}; do
RAND=$( echo | awk ' { srand(); print int(rand() * 234937 ) } ')
RAND=$( echo | awk ' { srand(); print int(rand() * 99171 ) } ')
WORD=$(awk "NR==$RAND" /usr/share/dict/words);
[ -n "$TAG" ] && WORD=$TAG
URL="https://api.flickr.com/services/feeds/photos_public.gne?tags=$WORD&tagmode=any";

Binary file not shown.

After

Width:  |  Height:  |  Size: 253 KiB

BIN
public/batman_small.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

29387
public/fabric.js Normal file

File diff suppressed because it is too large Load Diff

218
public/index.php Normal file
View File

@ -0,0 +1,218 @@
<?php
$stampsSelect="<option>soulless feelings</option>";
$stampsImgList=scandir("../stamps");
foreach( $stampsImgList as $file ){
if( strpos( "$file", ".") != 0 ){
$stampsSelect .= "<option value='../stamps/".urlencode($file)."'>$file</option>";
}
}
$bgdImgList = scandir("../synthesis");
$randomKeys = array_rand( $bgdImgList , 13 );
$bgdSelect="<option>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);
}
}
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>";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Make your own flyer</title>
<style>
/* YUI 3.5.0 reset.css (http://developer.yahoo.com/yui/3/cssreset/) - https://cssreset.com/ */
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;
}
dd{margin:32px;}
#canvas{
position: absolute;
right: 10px;
top: 0px;
user-select: none;
cursor: default;
}
div#menu {
position: absolute;
left: 10px;
top: 0px;
}
.btn{
text-decoration: none;
border: 1px solid #eee;
padding: 8px 16px;
border-radius: 24px;
color: inherit;
background: #ddd;
}
</style>
</head>
<body>
<!-- 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>
</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>one of your own is it?</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>
</dl>
<!-- 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();
});
}
bgImage="";
function updateCanvasBg( imageURL){
var img=fabric.Image.fromURL( imageURL, function(img){
canvas.setWidth(img.getScaledWidth())
canvas.setHeight(img.getScaledHeight())
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
// Optionally add an opacity lvl to the image
backgroundImageOpacity: 0.5,
// should the image be resized to fit the container?
backgroundImageStretch: false
});
bgImage=imageURL.split(/(\\|\/)/g).pop()
})
}
updateCanvasBg( '<?= current( $first ) ?>');
// Update the background according to the select
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);
// 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();
};
};
// 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;
if(keyCode == 46){
console.log("Removing selected element on Fabric.js on DELETE key !");
canvas.remove(canvas.getActiveObject());
}
}, false);
// Export the image
function saveImage(e) {
this.href = canvas.toDataURL({
format: 'jpeg',
quality: 0.8
});
this.download = bgImage+'.png'
}
var imageSaver = document.getElementById('lnkDownload');
imageSaver.addEventListener('click', saveImage, false);
</script>
</body>
</html>

BIN
stamps/red_activites.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

BIN
stamps/red_all.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

BIN
stamps/red_dates.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

BIN
stamps/red_details.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

BIN
stamps/red_lieux.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

BIN
stamps/yellow_activites.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB