Come ritagliare qualsiasi area selezionata di un'immagine e salvarla sul server?

Question

Permettetemi di riassumere lo scenario con una foto:

Sto cercando di fare una funzione per l'impostazione immagini del profilo nei miei site.I desidera avere una pagina per visualizzare l'immagine caricata nella sua dimensione originale in un campo immagine ma la dimensione dell'immagine del profilo deve essere 200 * 153, quindi voglio che gli utenti possano ridimensionare l'immagine e anche trascinare un fotogramma (la dimensione del fotogramma è 200 * 153) in qualsiasi area dell'immagine ridimensionata che vogliono per essere la loro immagine del profilo e quando fanno clic sul pulsante Salva, l'area che si trova nella cornice viene ritagliata e salva quell'area sul server.

Immaginate che questi sono i codici HTML:

<div style="height:150px;width:200px;position:absolute;border:5px solid yellow;z-index:1001;" id="test1"></div> 
<img id="test" src="~/Content/01052013626.jpg"/> 

Si noti che il div è trascinabile e l'immagine è ridimensionabile.

Grazie.

Answer 1

Si potrebbe iniziare posizionando l'immagine e il div nello stesso wrapper div. Lo farei perché ti permetterà di usare le funzioni di coordinate di jquery sul div più facilmente piuttosto che sull'immagine.

Una volta che hai quelle coordinate, si può prendere una sezione ritagliata di quell'immagine specificato da dimensioni e le coordinate del div e utilizzare questo tutorial:

http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/

Per salvare quella sezione su un elemento canvas HTML. L'elemento canvas può essere invisibile se vuoi.

Una volta che viene salvato, si segue questa risposta:

How to save a HTML5 Canvas as Image on a server

per salvare al server.

Answer 2

Credo che questo è quasi esattamente quello che stai cercando: jQuery jCrop

Solo, invece di salvare il file, di output sullo schermo con un 'download forzata' intestazione

Answer 3

Ok, prima di tutto è necessario utilizzare la lingua lato server per salvare effettivamente l'immagine dell'immagine ritagliata. Vorrei usare Jcrop per il ritaglio e quindi inviarlo al server per il processo di salvataggio.

Ancora, NON è possibile salvare i file sul server solo con javascript!

Answer 4

È possibile utilizzare questa classe php per mascherare un'immagine con un'immagine masking di dimensioni 200 * 153. Ritaglia esattamente l'area esatta utilizzando la mappatura del canale alpa basata su pixel. Ovunque l'immagine della maschera abbia il canale alfa 0 (Parte trasparente), verrà ritagliata afferrando i pixel di quell'area e rigenererà l'immagine nella nuova dimensione richiesta nel tuo caso. Dovrai mantenere un'immagine della maschera di dimensioni 200 * 153 pixel nel tuo server da utilizzare. Qui puoi anche passare le nuove coordinate ridimensionate da chiamate Ajax al back-end e ritagliare l'immagine di conseguenza.

https://github.com/lukeissac/Image-Masking-in-php/blob/master/class_lib.php

Se avete possibilità di andare con lo script lato server che funzionerà. Il link sopra è una prova di concetto per lo stesso.