Ragazzi ho un piccolo problema, seleziono i file, lo script ne ridimenziona alcuni e altri mi da errore e non disegna l'immagine, poi l'upload ajax l'ho fatto e funziona.
l'errore che mi da firebug e':
codice:
-Image corrupt or truncated: blob:http://127.0.0.1/c399e3e3-c7e0-4bff-8385-6ebcaa75918a
NS_ERROR_NOT_AVAILABLE:
|
-bigctx.drawImage(Bigimg, 0, 0, Bwidth, Bheight); |
| - |
SmallCtx.drawImage(SmallImg, 0, 0, width, height); |
e lo fa per alcune foto, per altre no, e sempre su foto diverse.
vi metto il codice, togliendo le cose che non vi servono e lo commento il piu possibile.
per favore aiutatemi.
credo che non riesca a caricare la foto prima di disegnarla anche se lo metto dentro img.onload();
questa e' la pagina php
Codice PHP:
<script type="text/javascript" src="libreria3.js"></script>
<h3>Clicca per inserire le foto.</h3>
<div id="upload_file"></div> <-- dove vado a creare il form e le anteprime
<div style="float: left; width: 500px" id="status" > <-- mi e' servito per il debug ma non serve a nulla
<h2>Stato</h2>
</div>
<br>
<div id="tempfoto" hidden></div> <-- qua creo i canvas temporanei dove metto le foto ridimensionate e le salvo in DataURL
il codice javascript e' questo:
libreria3.js
codice:
//funzione per disegnare la barra di avanzamento
//funzione che ridimenziona la foto e successivamente la andra ad inviare via ajax
function SendFoto(foto,seq){
//ridimenziono immagine in formato grande.
var Bigimg=document.createElement("img");
//creo il canvas temporaneo per la foto
$("#tempfoto").append("<canvas id=\"TmpBigCan"+seq+"\">Caricamento non supportato</canvas>");
var bigcanvas = document.getElementById('TmpBigCan'+seq);
var bigctx = bigcanvas.getContext("2d");
if (bigcanvas.getContext){
Bigimg.src = window.URL.createObjectURL(foto);
Bigimg.onload = function(){
//ridimenziono la foto
var BMAX_WIDTH = 1300;
var BMAX_HEIGHT= 1300;
var Bwidth = Bigimg.width;
var Bheight = Bigimg.height;
if (Bwidth > Bheight) {
if (Bwidth > BMAX_WIDTH) {
Bheight = Math.round(Bheight*(BMAX_WIDTH / Bwidth));
Bwidth = BMAX_WIDTH;
}
}
else {
if (Bheight > BMAX_HEIGHT) {
Bwidth = Math.round(Bwidth*(BMAX_HEIGHT/Bheight));
Bheight =BMAX_HEIGHT;
}
}
//mi riscrivo larghezza e altezza ricavata, mi serve solo per il debug
$("#tempfoto").append("<hr><p>width: "+Bwidth+" height: "+Bheight+"</p>");
//ridimensiono il canvas e disegno la foto
bigcanvas.width = Bwidth;
bigcanvas.height = Bheight;
bigctx.drawImage(Bigimg, 0, 0, Bwidth, Bheight);
var bigdataurl= bigcanvas.toDataURL("image/jpeg",1);
}
}
//ridimenziono immagine da usare come anteprima. faccio la stessa cosa ma con la foto piu piccola
var SmallImg=document.createElement("img");
$("#tempfoto").append("<canvas id=\"TmpSmallCan"+seq+"\">Caricamento non supportato</canvas>");
var SmallCanvas = document.getElementById('TmpSmallCan'+seq);
var SmallCtx = SmallCanvas.getContext("2d");
if (SmallCanvas.getContext){
SmallImg.src = window.URL.createObjectURL(foto);
SmallImg.onload = function(){
var MAX_WIDTH = 350;
var MAX_HEIGHT= 350;
var width = SmallImg.width;
var height = SmallImg.height;
if (width > height) {
if (width > MAX_WIDTH) {
height = Math.round(height*(MAX_WIDTH / width));
width = MAX_WIDTH;
}
}
else {
if (height > MAX_HEIGHT) {
width = Math.round(width*(MAX_HEIGHT/height));
height = MAX_HEIGHT;
}
}
SmallCanvas.width = width;
SmallCanvas.height = height;
SmallCtx.drawImage(SmallImg, 0, 0, width, height);
var SmallDataUrl= SmallCanvas.toDataURL("image/jpeg",1);
//adesso ho il DataURL della foto grande e di quella piccola e la invio con ajax ( l'invio funziona e non da errori)
}
}
};
//il documento e' caricato
$(document).ready(function () {
//creo il form
$("#upload_file").append("<input type=\"file\" class=\"S_carica\" multiple><button class=\"B_carica\">Carica</button>");
//se clicco su carica
$('.B_carica').bind('click', function() {
var FileEnd=0; //numero di file completati
var NotImage=0; //file non accettati ( non immagini )
var input = document.querySelector("input[type='file']");
var NumFile = input.files.length;
//nascondo il form e metto un button per annullare l'upload
$(".B_carica").hide();
$(".F_carica").show("slow");
$("#upload_file").append("<button class=\"F_carica\">Blocca Caricamento</button>");
//se clicco sul button, annullo l'upload ricaricando la pagina.
$('.F_carica').bind('click', function() {
var annulla = window.confirm("Premi su Ok per annullare il caricamento delle foto");
if (annulla) {
window.location.reload();
}
});
$("#upload_file").append("<h3>foto caricate:<h2 id=\"ContatoreFile\">"+FileEnd+"/"+NumFile+"</h2></h3>");
if (NumFile==0) {
window.alert("Devi prima selezionare delle foto");
window.location.reload();
return;
}
//scorro le immagini
for (var i = 0; i < NumFile; i++) {
if (!file.type.match(/image.*/)) {
// Questo file non e' un immagine, incremento il numero di file completati e non faccio nulla.
NotImage++;
FileEnd++;
$("#ContatoreFile").replaceWith("<h2 id=\"ContatoreFile\">"+FileEnd+"/"+NumFile+"</h2>");
}
else{
//se i file sono immagini
SendFoto(file,i);
}//else
}//for
});
});// chiusura pagina caricata
Rispondi quotando
