11499 sujets
JavaScript, DOM et API Web HTML5
Bien j'ai bien avancé:
Je me trouve maintenant avec le contenue du fichier image 64 dans le fichier php. Je dois encore supprimé que qui me sert à rien et sa devrait être bon
Modifié par stephcache (26 Aug 2013 - 11:48)
var a = document.getElementById('canvas_' + a[1]);
var ctx = a.getContext("2d");
var image = new Image();
image.src = 'tempo/'+ id +'/'+ nom_fichier.nom;
image.onload = function() {
ctx.drawImage(this,0,0,242,182);
ctx.beginPath();
ctx.strokeStyle = "#FF0015";
ctx.arc(130,70,50,0,Math.PI*2,false);
ctx.arc(130,70,51,0,Math.PI*2,false);
ctx.arc(130,70,52,0,Math.PI*2,false);
ctx.stroke();
var data = a.toDataURL();
console.log(data);
var xhr = new XMLHttpRequest();
xhr.open('post', 'upload_64.php', true);
var form = new FormData();
form.append('image64', data);
xhr.send(form);
};
Je me trouve maintenant avec le contenue du fichier image 64 dans le fichier php. Je dois encore supprimé que qui me sert à rien et sa devrait être bon
Modifié par stephcache (26 Aug 2013 - 11:48)
Bien pour image en base 64 et le php sait bon.
J'ai un petit problème j'ai ma fonction une fois cliqué sur mon bouton mais je vois pas comment récupéré le premier click de la sourie pour servir de centre et le deuxième click pour le rayon du cercle.
Voilà ou j'en suis:
Pour php:
Pour css:
Pour html:
Pour js:
J'ai un petit problème j'ai ma fonction une fois cliqué sur mon bouton mais je vois pas comment récupéré le premier click de la sourie pour servir de centre et le deuxième click pour le rayon du cercle.
Voilà ou j'en suis:
Pour php:
<?php
$headers = apache_request_headers();
$source = file_get_contents('php://input');
$dossier = $headers['photo'];
$nom_du_fichier = $headers['x-file-name'];
$numeros_machine = $headers['num_machine'];
$numeros_remarque = $headers['num_remarque'];
$nom_photo = str_replace("/", "_", $numeros_machine."_".$numeros_remarque."_".$dossier);
file_put_contents("tempo/$dossier/$nom_du_fichier",$source);
header('content-type: image/jpeg');
list($largeur_source, $hauteur_source) = getimagesize("tempo/$dossier/$nom_du_fichier");
$largeur_nouvelle = 242;
$hauteur_nouvelle = 182;
$image_nouvelle = imagecreatetruecolor($largeur_nouvelle, $hauteur_nouvelle);
$image_origine = imagecreatefromjpeg("tempo/$dossier/$nom_du_fichier");
imagecopyresampled($image_nouvelle, $image_origine, 0, 0, 0, 0, $largeur_nouvelle, $hauteur_nouvelle, $largeur_source, $hauteur_source);
$gris_claire = imagecolorallocate($image_nouvelle, 240, 240, 240);
$noir = imagecolorallocate($image_nouvelle, 0, 0, 0);
imagefilledarc($image_nouvelle, 0, 0, 70, 70, 0, 90, $gris_claire, IMG_ARC_PIE);
$font_file = './Comic Sans MS.ttf';
$n_remarque = substr($numeros_remarque, 1);
imagefttext($image_nouvelle, 15, 0, 4, 20, $noir, $font_file, $n_remarque);
imagejpeg($image_nouvelle, "tempo/$dossier/$nom_photo.jpg", 90);
imagedestroy($image_nouvelle);
unlink("tempo/$dossier/$nom_du_fichier");
$t = array();
$t["nom"] = $nom_photo.".jpg";
header('Content-Type: application/json');
echo json_encode($t);
?>
Pour css:
.dropfile {border: 1px solid #000; width: 242px; height: 30px; margin-bottom: 1px;}
.message {text-align: center; display: block; font-size: 14px; vertical-align: middel; line-height: 30px; height: 30px;}
.dropfile.hover {background-color:#D6D7E5;}
canvas {border: 1px solid #000; width: 242px; height: 182px;}
#remarque {width: 242px; height: 30px;}
#remarque select {width: 74%;}
.progress {width: 0; height: 30px; background-color: #42A539; position: relative; display: block; top: -30px; text-align: center; vertical-align: middle; line-height: 30px;}
#photo_1, #photo_2 {display: inline-block;}
Pour html:
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop</title>
<link rel="stylesheet" type="text/css" href="drag_drop.css" />
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript">
jQuery(function(s){s('.dropfile').dropfile();});
</script>
</head>
<body>
<div>
<label for="N_equipement">Numéros de l'équipement : </label>
<input type="text" name="numeros_machine" size="60" id="N_equipement"/>
</div>
<div id="photo_1">
<div class="dropfile"></div>
<canvas id="canvas_1" width="242" height="182"></canvas>
<div id="remarque">
<select name="remarque_1" class="r_1">
<option value="r1">Remarque 1</option>
<option value="r20">Remarque 20</option>
<option value="r34">Remarque 34</option>
</select>
<input type="button" id="cercle_1" value="Cercle" disabled="disabled" />
</div>
<input id="image64_1" type="hidden" value="" />
</div>
<div id="photo_2">
<div class="dropfile"></div>
<canvas id="canvas_2" width="242" height="182"></canvas>
<div id="remarque">
<select name="remarque_2" class="r_2">
<option value="r11">Remarque 11</option>
<option value="r20">Remarque 20</option>
<option value="r34">Remarque 34</option>
</select>
<input type="button" id="cercle_2" value="Cercle" disabled="disabled" />
</div>
<input id="image64_2" type="hidden" value="" />
</div>
<script type="text/javascript" src="dropfile.js"></script>
</body>
</html>
Pour js:
(function(s){
$.fn.dropfile = function(oo){
this.each(function(){
$('<span>').addClass('message').append('Déposer l\'image ici !').appendTo(this);
$('<span>').addClass('progress').appendTo(this);
$(this).bind({
dragenter : function(e){
e.preventDefault();
console.log('dragenter');
},
dragover : function(e){
e.preventDefault();
$(this).addClass('hover');
console.log('dragover');
},
dragleave : function(e){
e.preventDefault();
$(this).removeClass('hover');
console.log('dragleave');
}
});
this.addEventListener('drop', function(e){
e.preventDefault();
var files = e.dataTransfer.files;
var id = e.target.parentElement.parentElement.id;
upload(files,id,$(this),0);
}, 'false');
});
function upload(files,id,area,index){
var file = files[index];
var xhr = new XMLHttpRequest();
var progress = area.find('.progress');
var numeros = document.getElementById("N_equipement").value;
a = id.split('_');
var remarque = $('.r_' + a[1]).val();
xhr.open('post', 'upload.php', true);
xhr.setRequestHeader('content-type', 'multipart/form-data');
xhr.setRequestHeader('x-file-type', file.type);
xhr.setRequestHeader('x-file-size', file.size);
xhr.setRequestHeader('x-file-name', file.name);
xhr.setRequestHeader('photo', id);
xhr.setRequestHeader('num_machine', numeros);
xhr.setRequestHeader('num_remarque', remarque);
xhr.send(file);
xhr.addEventListener('load',function(e){
area.removeClass('hover');
progress.css({width:242}).html('Image chargé');
var nom_fichier = jQuery.parseJSON(e.target.responseText);
a = id.split('_');
var a = document.getElementById('canvas_' + a[1]);
var ctx = a.getContext("2d");
var image = new Image();
image.src = 'tempo/'+ id +'/'+ nom_fichier.nom;
image.onload = function() {
ctx.drawImage(this,0,0,242,182);
ctx.beginPath();
ctx.strokeStyle = "#FF0015";
ctx.lineWidth = "5";
ctx.arc(130,70,45,0,Math.PI*2,false);
ctx.stroke();
var data = a.toDataURL();
var image_b64 = data.substr(22);
a = id.split('_');
document.getElementById('image64_' + a[1]).value = image_b64;
var xhr = new XMLHttpRequest();
xhr.open('post', 'upload_64.php', true);
var form = new FormData();
form.append('image64', data);
form.append('dossier', id);
form.append('nom_photo', nom_fichier.nom);
xhr.send(form);
a = id.split('_');
var cercle = document.getElementById('cercle_' + a[1]);
cercle.disabled = false;
cercle.onclick = function()
{
};
};
},false);
xhr.upload.addEventListener('progress',function(e){
if(e.lengthComputable){
var perc = (Math.round(e.loaded/e.total) * 100)+ '%';
progress.css({width:perc}).html(perc);
}},false);
}
}
})(jQuery);