11540 sujets

JavaScript, DOM et API Web HTML5

Dessiner sur une image dans une balise canvas

Pages :
(reprise du message précédent)

Bien je viens d'avoir une illumination tardive en faite dans xhr.send(file) il fallait faire xhr.send(data) maintenant j'ai bien image 64 dans le headers

J'ai toujours les même erreur mais sa au moins sa marche
Bien je viens de trouvé une autre erreur: J'avais oublié var xhr = new XMLHttpRequest(); si que a levé un problème

Il me reste quand me 400 Bat Request
Bien j'ai bien avancé:


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:

<?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&eacute;ros de l'&eacute;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&eacute;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);
Pages :
Sujet clos
Aller à