Flagg

il blog di un diversamente sano di mente

Category: Entropie (Page 1 of 4)

Resize Image on client side (Shrink Photo)

Scenario: your (web) application has to shrink an image before sending it to the server, in order to limit bandwidth and server storage
Many suggestion and js library could be found, the best in my perspective is Image Load (it adds feature like Exif inspection, Jcrop support and scale, rotation).
Everything was working like a charm, on the paper, on my mind… but then
  • Edge was not sending the resized image
  • Safari on iPad and iPhone was sending rotated images
  • Firefox was not sending the image at all

Every point of the above list was caused by something very annoying in the front-end development word. Sort of half-compliance to standard API.

For example:

  1. Edge supports the Javascript API File, but the File object (native method) and the Blob object differ from the standard W3C implementation (problems with the name for example and in some case you have to use msSaveBlob instead of the Blob method that you can find in Chrome/Firefox). So you have to “cast” the Blob to a File, or adding for example the name of the file to the server in another way (form hidden field etc etc)
  2. IE/Edge form object (useful FormData() ) doesn’t support delete method, so you can copy all the elements of an existing form but you cannot remove them
  3. Safari saves camera rotated images (it is an exif property) but you cannot see this until you don’t send the image to the server
  4. Firefox skip preventdefault event in random case (?!?)

So, the File Management Browser implementation is “almost” safe, “almost” sound but needs a bit of customization for each vendor.

 

PS as the original idea was related to uploading selfie like or avatar photo I’m saving on server side all the images in JPG format, as there is no camera mobile or not that save in PNG format… I want to highlight this as all the example I found manage only Canvas -> Png export/save  (even the Load Image Test page saves the output to Png renamed to Jpeg)

Other sources and credits

Negative space e stampa fotografica

Illusioni ottiche, loghi e composizione fotografica sono solo alcuni esempi di spazi negativi  comuni. In particolare in graphic design i creativi sono quelli che ne fanno più uso per realizzare brand unici. Amazon, FedEx, Carrefour per citare qualche esempio.

L’idea di veicolare un messaggio dentro un altro mi ha sempre fatto pensare a concetti come il watermark, la firma d’acqua,  la steganografia, dove appunto messaggio è “nascosto”, o meglio non è percepibile immediatamente, dentro un altro usato come veicolo.

I giapponesi hanno persino un kanji ad hoc per rappresentare questo concetto: ma

una alternativa

Finito il preambolo necessario giungo a descrivere l’idea, o meglio la genialata che mi è venuta in mente mettendo insieme altri due concetti:

  • spazio negativo
  • stampa di immagini
  • risparmio (di denaro e di spazio)

Tutto è nato dalla mia volontà di stampare alcune fotografia in formato 1:1, utilizzando però una stampante che al massimo stampa fotografie a sublimazione (dalla resa per me fenomenale) in un formato ridotto rispetto a quello originale.

Alternative? Un banale collage? Si può fare ma insorgono alcuni problemi:

  • bisogna ritagliare l’immagine originale in sotto immagini dalle dimensioni corrette
  • la proporzione della stampa non è uguale a quella della foto originale, quindi si perderebbe comunque una percentuale di area non stampata
  • un collage deve essere sistemato su una superficie stabile e magari incorniciato

Here comes the negative space: mi sono chiesto, perchè non stampare solo parti dell’immagine che collocate alla giusta distanza creino nell’osservatore l’idea dell’immagine originale? Nel caso di una figura intera o un primo piano americano bastano 3 immagini orizzontali che creano una composizione verticale.

Nel caso di un panorama viceversa, tre crop verticali sono sufficienti a realizzare una idea di insieme.

Update come richiesto giustamente da Dread, aggiungo qualche contributo dei primi esperimenti…

Mancano dei quadretti di sfondo per sopperire all’ORRIBILE tappezzeria

Nikon Picture Controls showcasing

Starting from NikonPC preview (one by one), I made a little script to automate:

  • selection of a single picture control
  • downloading the modified preview image

Target is a gallery with ALL the previews in order to choose the preferred/best one for the photo.

Two methods: one to update the preview, another one to force a file download.

The Script


function updatePreview(index)
{    
    
js('imgPreview').onReady('onLoad', function() {
    curve.init();
    curve.initPreviewImage();
    var elmFileList = js('selFileList').elm;
    if (!elmFileList) {
        console.log("elmFileList " + index);
        return false
    }
    elmFileList.selectedIndex = index;
    var src = this.elm.src;
    this.elm = new Image();
    js(this.elm).addEvent('load', function() {
        npc.load();        
        forceDownload(index);
    }, false);
    this.elm.src = src;
});
    
}

function forceDownload(index)
{   
    var link = document.createElement('a');
    link.href = $("#cLutImage")[0].toDataURL("image/png");      
    link.download = 'Download' + index + '.png';    
    document.body.appendChild(link);
    link.click();
}

function main(index)
{       
    updatePreview(index);
}

How to launch:

  • Open https://nikonpc.com/
  • Press F12
  • Inside JS Console
    • Paste the above code
    • input main(X), where X is an available Picture Control in the page. i.e. main(4)
    • press Enter
  • DownloadX.png modified file will be downloaded

Hide images from WhatsApp Web interface

  • Press F12 with the https://web.whatsapp.com/ page opened
  • Go to the console command line
  • Copy and paste the below code
  • Press Enter

Code:

var thumbs = document.getElementsByClassName("image-thumb");
var l = thumbs.length;for (var i = 0; i < l; i++) { thumbs[0].parentNode.removeChild(thumbs[0]);}

All the thumbnails will be removed and your privacy will be preserved!

The curious case of updating a value

The issue, described below is very strange when you find it, because it works only in MySql.

In MySql the update keeps track of the order of the parameters updated. So while for any known DBMS when you update a field computed considering another one (i.e. set A = 10, B = A…) the value of A and B are calculated starting from the original value for each update in MySql as soon as you update a field, this new value will be used instead of the original.

Besides this you can use the order clause to specify HOW update the values.

This cose works on MySql and on SQL SERVER:

create table testUpdate (id int primary key not null, 
valA decimal(10),
valB decimal(10),
valC decimal(10)
);

insert into testUpdate values (1,0,0,0);
insert into testUpdate values (2,0,0,0);
insert into testUpdate values (3,0,0,0);
 
-- update session

update testUpdate 
set  valA=100, valB=200, valC=valA+valB
where id = 1;
update testUpdate 
set  valA=100,valC=valA+valB, valB=200
where id = 2;
update testUpdate 
set  valC=valA+valB, valA=100, valB=200
where id = 3;


select * from testUpdate; 
drop table testUpdate;


Tre giovani filippine

Dopo le prime settimane nel nuovo appartamento ho iniziato a cercare quale fosse il percorso migliore per raggiungere l’ufficio. In generale quando alle 8 di mattina ci sono 30 gradi il percorso migliore non corrisponde a quello più breve

Di quando in quando ho incontrato tre ragazze dai lineamenti orientali e dalla statura minuta, potrei azzardare che siano filippine da qualche parola che ho sentito dire da loro.

Dopo il primo mese in cui ho consolidato la mia rotta giornaliera ho iniziato ad incontrarle praticamente ogni giorno. La cosa particolare è che in posso anche ritardare di una decina di minuti il mio tragitto che comunque o all’andata o al ritorno le incontro.

Gone with the wind

Era Aprile. Il periodo post intervento era finito, la muscolatura persa e non pensavo cosa mi sarebbe successo nei mesi a venire.

“A Malta?!?” occhi sgranati, tono sorpreso… questo è la reazione che ho avuto dalla maggior parte delle persone a cui ho detto dove mi trasferivo.

Un po’ perchè si vede Malta come località di vacanza marittima o villeggiatura, un po’ perchè recentemente ero stato in capitali europee molto più note (Berlino per ultima). Avessi detto Panama forse qualcuno memore di una puntata di Report sarebbe stato meno stupito.

After Surgery Rehab

Dopo due mesi rileggo quello che scrissi appena tornato a casa…

Grande delusione per non essermi riuscito a fare le iniezioni da solo… niente ho provato in tutte le maniere…

Dopo due mesi e mezzo riesco a piegare completamente il ginocchio, per il resto sto recuperando ancora tutta ciò che ho perso del muscolo della gamba (per esempio non posso ancora correre). Dovrei iniziare a fare nuoto per potenziare. 

Sulla torsione siamo ancora indietro, però durante la fisioterapia ho imparato molte cose su muscoli agonisti e antagonisti

Mail on the fly (using only web resources and free account)

Abstract: how to send scheduled mail message via web server/services without any payed account.

Using

  • https://www.pythonanywhere.com/ (Python Console, MySql, Django, Scheduling)
  • https://mailgun.com/ (Free SMTP : Log, API and 300 Messages per day)

Help found in:

  • http://gexos.org/send-email-through-mailgun-with-python-and-pythonanywhere/

Python

  • https://courses.cs.washington.edu/courses/cse140/13wi/file-interaction.html
  • http://stackoverflow.com/questions/7420937/run-program-in-python-shell

NOTE: this is the last post with Pivotx… time to upgrade!

Summary of this test:

WIP

Custom Map Manager

Requirements:

  • Gestione mappa in JS (visualizzazione, eventi mouse, callback, caricamento mappe raster e vettoriali)
  • Generazione di mappa dinamica basata su punti
  • Riconoscimento della forma in base ai punti della mappa o della immagine da analizzare
  • Raccolta dei dati in un database locale (i.e immagine X, 4 rettangoli e loro posizioni)
  • Salvataggio dei vari livelli di analisi in una nuova immagine PNG, contenente nei metadati tutte le informazioni raccolte.

Fonti:

  • http://codepen.io/taylorcoffelt/pen/EsCcr
  • https://github.com/auduno/clmtrackr
  • http://www.vincentbroute.fr/mapael/
  • http://kartograph.org/about/kartograph.js/
  • Sodipodi

Page 1 of 4

Powered by WordPress & Theme by Anders Norén