Ciao,
non c'� molto da modificare, ti basta impostare nel src dell'immagine direttamente la stringa in base64.
Inoltre ti consiglio di modificare anche la pagina asp per ricevere pi� file, ma questo esula dalla domanda.
diciamo una cosa del genere:
codice:
<script>
var input = document.getElementById('input');
var output = document.getElementById('file_output');
var multipleCanvas = document.getElementById('multipleCanvas');
input.addEventListener('change', () => {
for (var i = 0; i < input.files.length; i++) {
var fileB64 = URL.createObjectURL(input.files[i]);
resizeImage(fileB64,
(resOutput, canvas) => {
//volendo puoi eliminare il canvas nel caso lo crei nuovo (o lo aggiungi al dom come sotto)
multipleCanvas.appendChild(canvas);
//imposti l'output (come nel tuo script), ma in questo caso essendo multipli divido i file con una nuova linea
output.value += '\n' + resOutput;
var randomNumber6 = Math.floor(100000 + Math.random() * 900000)
var filename = input.value.replace(/C:\\fakepath\\/i, '');
filename = filename.replace(".jpeg", "_" + randomNumber6 + ".jpeg");
filename = filename.replace(".JPEG", "_" + randomNumber6 + ".jpeg");
filename = filename.replace(".jpg", "_" + randomNumber6 + ".jpg");
filename = filename.replace(".JPG", "_" + randomNumber6 + ".jpg");
filename = filename.replace(".png", "_" + randomNumber6 + ".png");
filename = filename.replace(".PNG", "_" + randomNumber6 + ".png");
filename = filename.replace(".gif", "_" + randomNumber6 + ".gif");
filename = filename.replace(".GIF", "_" + randomNumber6 + ".gif");
$.ajax({
type: "POST",
url: "testRESIZE_IMAGE_SAVE.asp",
data: { b64: resOutput, filename: filename },
success: function (rps) {
$('#input').val('')
$('#file_output').val('')
},
dataType: "html"
});
}
, null//opzionale default nuovo canvas, diversamente li passo quello che preferisco
, 100//opzionale default 1000
, 100//opzionale default 1000
);
}
});
function resizeImage(b64, handle, canvas, maxW, maxH) {
maxW = maxW ? maxW : 1000;
maxH = maxH ? maxH : 1000;
canvas = canvas?canvas:document.createElement("canvas");
var ctx = canvas.getContext("2d");
var img = new Image;
var output;
img.onload = function () {
var iw = img.width;
var ih = img.height;
var scale = 0;
var iwScaled = 0;
var ihScaled = 0;
if (iw > maxW || ih > maxH) {
scale = Math.min((maxW / iw), (maxH / ih));
iwScaled = iw * scale;
ihScaled = ih * scale;
canvas.width = iwScaled;
canvas.height = ihScaled;
} else {
//scale=Math.min((maxW/iw),(maxH/ih));
iwScaled = iw//*scale;
ihScaled = ih//*scale;
canvas.width = iwScaled;
canvas.height = ihScaled;
}
ctx.drawImage(img, 0, 0, iwScaled, ihScaled);
output = canvas.toDataURL("image/jpeg", 0.5);
}
img.src = b64;
setTimeout(function () {
if (handle)
handle(output,canvas);
}, 200);
}
</script>
In questo caso resizeImage accetta il file in base64 (recuperato in questo caso da un input, ma passato in base64 alla funzione) e un handler per permetterti di eseguire quello che eseguivi alla fine della funzione (come faceva il tuo script) all'esterno della funzione, in modo che se devi eseguire qualcosa di diverso lo puoi fare li. Lo script sopra avvia il processo tramite la selezione dell'input, ma ovviamente quello che ti interessa � questo:
codice:
resizeImage('file in base 64',
(output, canvas) => {
//'output' � come dice la parola un output in base64 dell'immagine ridimensionata (eventualmente)
//eseguo la chiamata ajax o quello che mi pare,
});
Quindi lo puoi eseguire quando ti va, magari legato al click del button.
Oltre questi parametri in resizeImage ho aggiunto anche la dimensione massima e la possibilit� di passare un canvas specifico (passando null lo crea nuovo), in questo modo una volta eseguito puoi fare del canvas ci� che vuoi, e il file output (base64) insieme al canvas stesso viene restituita nel tuo handler.
P.S.
'multipleCanvas' è solamente una div dove accodo i canvas multipli.
Originariamente inviata da ludlogan
Permessi di invio
Rispondi quotando