34,9 → 34,9 |
supprimerMiniature(); |
}); |
|
if (window.File && window.FileReader) { |
if (window.File && window.FileReader && isCanvasSupported()) { |
if (DEBUG) { |
console.log("L'API File est supporté."); |
console.log("Support OK pour : API File et Canvas."); |
} |
$('#fichier').bind('change', function(e) { |
afficherMiniatureHtml5(e); |
54,15 → 54,22 |
}); |
} |
}); |
function isCanvasSupported(){ |
var elem = document.createElement('canvas'); |
return !!(elem.getContext && elem.getContext('2d')); |
} |
|
function afficherMiniatureHtml5(evt) { |
supprimerMiniature(); |
var selectedfiles = evt.target.files; // FileList object |
|
var selectedfiles = evt.target.files; |
var f = selectedfiles[0];// Nous récupérons seulement le premier fichier. |
// Only process image files. |
if (f.type.match('image.*') == false) { |
if (f.type != 'image/jpeg') { |
var message = "Seule les images JPEG sont supportées."; |
$("#miniature-msg").append(message); |
} else if (f.size > 5242880) { |
var message = "Votre image à un poids supérieur à 5Mo."; |
$("#miniature-msg").append(message); |
} else { |
var reader = new FileReader(); |
// Lit le fichier image commune url de données |
74,13 → 81,66 |
return function(e) { |
// Rendre la miniature |
var imageBase64 = e.target.result; |
$("#miniature").append('<img id="miniature-img" class="miniature b64" src="'+imageBase64+'" alt="'+imgNom+'"/>'); |
//$("#miniature").append('<img id="miniature-img" class="miniature b64" src="'+imageBase64+'" alt="'+imgNom+'"/>'); |
|
// HTML5 Canvas |
var img = new Image(); |
img.src = imageBase64; |
img.alt = imgNom; |
img.onload = function() { |
transformerImgEnCanvas(this, 100, 100, false, 'white'); |
}; |
}; |
})(f); |
} |
$("#effacer-miniature").show(); |
} |
function transformerImgEnCanvas(img, thumbwidth, thumbheight, crop, background) { |
var canvas = document.createElement('canvas'); |
canvas.width = thumbwidth; |
canvas.height = thumbheight; |
var dimensions = calculerDimenssions(img.width, img.height, thumbwidth, thumbheight); |
if (crop) { |
canvas.width = dimensions.w; |
canvas.height = dimensions.h; |
dimensions.x = 0; |
dimensions.y = 0; |
} |
cx = canvas.getContext('2d'); |
if (background !== 'transparent') { |
cx.fillStyle = background; |
cx.fillRect(0, 0, thumbwidth, thumbheight); |
} |
cx.drawImage(img, dimensions.x, dimensions.y, dimensions.w, dimensions.h); |
afficherMiniatureCanvas(img, canvas); |
} |
|
function calculerDimenssions(imagewidth, imageheight, thumbwidth, thumbheight) { |
var w = 0, h = 0, x = 0, y = 0, |
widthratio = imagewidth / thumbwidth, |
heightratio = imageheight / thumbheight, |
maxratio = Math.max(widthratio, heightratio); |
if (maxratio > 1) { |
w = imagewidth / maxratio; |
h = imageheight / maxratio; |
} else { |
w = imagewidth; |
h = imageheight; |
} |
x = (thumbwidth - w) / 2; |
y = (thumbheight - h) / 2; |
return {w:w, h:h, x:x, y:y}; |
} |
|
function afficherMiniatureCanvas(imgB64, canvas) { |
var url = canvas.toDataURL('image/jpeg' , 0.8); |
var alt = imgB64.alt; |
var title = Math.round(url.length / 1000 * 100) / 100 + ' KB'; |
var miniature = '<img id="miniature-img" class="miniature b64-canvas" src="'+url+'" alt="'+alt+'" title="'+title+'" />'; |
$("#miniature").append(miniature); |
$("#miniature-img").data('b64', imgB64.src); |
} |
|
function afficherMiniature(reponse) { |
supprimerMiniature(); |
if (DEBUG) { |
197,7 → 257,7 |
} else { |
afficherErreurGoogleMap(status); |
} |
}) |
}); |
}, |
// Cette partie est executee a la selection d'une adresse |
select: function(event, ui) { |
329,6 → 389,8 |
//+---------------------------------------------------------------------------------------------------------+ |
// FORMULAIRE |
$(document).ready(function() { |
$("#date").datepicker($.datepicker.regional['fr']); |
|
$("form#saisie-obs").validate({ |
rules: { |
courriel : { |
362,8 → 424,6 |
} |
}); |
|
$("#date").datepicker($.datepicker.regional['fr']); |
|
$("#courriel_confirmation").bind('paste', function(e) { |
$("#dialogue-bloquer-copier-coller").dialog(); |
return false; |
374,7 → 434,7 |
$("a.afficher-coord").toggle(); |
$("#coordonnees-geo").toggle('slow'); |
//valeur false pour que le lien ne soit pas suivi |
return false |
return false; |
}); |
|
var obsNumero = 0; |
419,26 → 479,13 |
'notes' : $("#notes").val(), |
//Ajout des champs images |
'image_nom' : $("#miniature-img").attr('alt'), |
'image_b64' : $("#miniature-img").hasClass('b64') ? $("#miniature-img").attr('src') : '' |
'image_b64' : getB64ImgOriginal() |
}); |
console.log("B64 : "+$("#miniature-img").hasClass('b64') ? $("#miniature-img").attr('src') : ''); |
} |
}); |
|
$(".supprimer-obs").live('click', function() { |
var obsId = $(this).val(); |
// Problème avec IE 6 et 7 |
if (obsId == "Supprimer") { |
obsId = $(this).attr("title"); |
} |
|
$('#obs'+obsId).remove(); |
$("#liste-obs").removeData('obsId'+obsId) |
}); |
$(".supprimer-obs").live('click', supprimerObs); |
|
// TODO : remplacer par du jquery |
//document.getElementById('image_file').addEventListener('change', handleFileSelect, false); |
|
$("#transmettre-obs").click(function(e) { |
var observations = $("#liste-obs").data(); |
|
533,6 → 580,27 |
}); |
}); |
|
function getB64ImgOriginal() { |
var b64 = ''; |
if ($("#miniature-img").hasClass('b64')) { |
b64 = $("#miniature-img").attr('src'); |
} else if ($("#miniature-img").hasClass('b64-canvas')) { |
b64 = $("#miniature-img").data('b64'); |
} |
return b64; |
} |
|
function supprimerObs() { |
var obsId = $(this).val(); |
// Problème avec IE 6 et 7 |
if (obsId == "Supprimer") { |
obsId = $(this).attr("title"); |
} |
|
$('#obs'+obsId).remove(); |
$("#liste-obs").removeData('obsId'+obsId); |
} |
|
function ajouterImgMiniatureAuTransfert() { |
var miniature = ''; |
if ($("#miniature img").length == 1) { |