Comment ajoute valeur du formualire sur image
Fermé
miloud1990
Messages postés
22
Date d'inscription
lundi 9 janvier 2012
Statut
Membre
Dernière intervention
16 mai 2017
-
16 mai 2017 à 15:55
miloud1990 Messages postés 22 Date d'inscription lundi 9 janvier 2012 Statut Membre Dernière intervention 16 mai 2017 - 16 mai 2017 à 15:57
miloud1990 Messages postés 22 Date d'inscription lundi 9 janvier 2012 Statut Membre Dernière intervention 16 mai 2017 - 16 mai 2017 à 15:57
A voir également:
- Comment ajoute valeur du formualire sur image
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Comment agrandir une image - Guide
- Nouveau tag ajouté - Forum Téléphones & tablettes Android
- Frédéric cherche à faire le buzz sur les réseaux sociaux. il a ajouté une image d’ours polaire sur une image de plage. retrouvez l'image originale de la plage. que cache l'ours polaire ? - Forum Loisirs / Divertissements
1 réponse
miloud1990
Messages postés
22
Date d'inscription
lundi 9 janvier 2012
Statut
Membre
Dernière intervention
16 mai 2017
16 mai 2017 à 15:57
16 mai 2017 à 15:57
<script type="text/javascript">
var canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
canvas.width = $('img.img').width();
canvas.crossOrigin = "Anonymous";
canvas.height = $('img.img').height();
ctx.drawImage($('img.img').get(0), 0, 0);
ctx.font = "italic 26px Times";
$(document).ready(function(){
var x =$ ("#a1").val(),
y = $("#a2").val(),
i = $("#z1").val(),
j = $("#z2").val(),
r = $("#z3").val(),
a = $("#fin1").val(),
b = $("#fin2").val(),
c = $("#fin3").val();
$(document).on('input','#inp',function(){
//redraw image
//ctx.clearRect(0,0,canvas.width,canvas.height);
// ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText($(this).val(),400,80);
});
$(document).on('input','#nomf',function(){
//redraw image
ctx.clearRect(320,320,canvas.width,canvas.height);
//ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText($(this).val(),100,80);
});
$("#a1, #a2,#z1,#z2,#z3,#fin1,#fin2,#fin3").change(function () {
if ($("#a1").is(":checked")) {
//redraw image
ctx.clearRect(320,320,canvas.width,canvas.height);
// ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
//ctx.fillText("",460,50);
ctx.fillText(x,460,50);
}
else if($("#a2").is(":checked")) {
ctx.clearRect(320,320,canvas.width,canvas.height);
// ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText(y,460,50);
}
else if($("#z1").is(":checked")) {
ctx.clearRect(320,320,canvas.width,canvas.height);
//ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText(i,400,130);
}
else if($("#z2").is(":checked")) {
ctx.clearRect(320,320,canvas.width,canvas.height);
//ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText(j,400,130);
}
else if($("#z3").is(":checked")) {
ctx.clearRect(320,320,canvas.width,canvas.height);
//ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText(r,400,130);
}
else if($("#fin1").is(":checked")) {
// ctx.clearRect(320,320,canvas.width,canvas.height);
//ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText(a,400,300);
}
else if($("#fin2").is(":checked")) {
// ctx.clearRect(320,320,canvas.width,canvas.height);
//ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText(b,350,300);
}
else if($("#fin3").is(":checked")) {
// ctx.clearRect(320,320,canvas.width,canvas.height);
// ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText(c,250,300);
}
});
});
$(document).on('input','#enfant1',function(){
//redraw image
ctx.clearRect(320,320,canvas.width,canvas.height);
//ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText($(this).val(),400,200);
});
$(document).on('input','#enfant2',function(){
//redraw image
ctx.clearRect(320,320,canvas.width,canvas.height);
//ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText($(this).val(),90,200);
});
$(document).on('input','#place',function(){
//redraw image
ctx.clearRect(320,320,canvas.width,canvas.height);
//ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText($(this).val(),250,250);
});
</script>
var canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
canvas.width = $('img.img').width();
canvas.crossOrigin = "Anonymous";
canvas.height = $('img.img').height();
ctx.drawImage($('img.img').get(0), 0, 0);
ctx.font = "italic 26px Times";
$(document).ready(function(){
var x =$ ("#a1").val(),
y = $("#a2").val(),
i = $("#z1").val(),
j = $("#z2").val(),
r = $("#z3").val(),
a = $("#fin1").val(),
b = $("#fin2").val(),
c = $("#fin3").val();
$(document).on('input','#inp',function(){
//redraw image
//ctx.clearRect(0,0,canvas.width,canvas.height);
// ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText($(this).val(),400,80);
});
$(document).on('input','#nomf',function(){
//redraw image
ctx.clearRect(320,320,canvas.width,canvas.height);
//ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText($(this).val(),100,80);
});
$("#a1, #a2,#z1,#z2,#z3,#fin1,#fin2,#fin3").change(function () {
if ($("#a1").is(":checked")) {
//redraw image
ctx.clearRect(320,320,canvas.width,canvas.height);
// ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
//ctx.fillText("",460,50);
ctx.fillText(x,460,50);
}
else if($("#a2").is(":checked")) {
ctx.clearRect(320,320,canvas.width,canvas.height);
// ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText(y,460,50);
}
else if($("#z1").is(":checked")) {
ctx.clearRect(320,320,canvas.width,canvas.height);
//ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText(i,400,130);
}
else if($("#z2").is(":checked")) {
ctx.clearRect(320,320,canvas.width,canvas.height);
//ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText(j,400,130);
}
else if($("#z3").is(":checked")) {
ctx.clearRect(320,320,canvas.width,canvas.height);
//ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText(r,400,130);
}
else if($("#fin1").is(":checked")) {
// ctx.clearRect(320,320,canvas.width,canvas.height);
//ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText(a,400,300);
}
else if($("#fin2").is(":checked")) {
// ctx.clearRect(320,320,canvas.width,canvas.height);
//ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText(b,350,300);
}
else if($("#fin3").is(":checked")) {
// ctx.clearRect(320,320,canvas.width,canvas.height);
// ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText(c,250,300);
}
});
});
$(document).on('input','#enfant1',function(){
//redraw image
ctx.clearRect(320,320,canvas.width,canvas.height);
//ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText($(this).val(),400,200);
});
$(document).on('input','#enfant2',function(){
//redraw image
ctx.clearRect(320,320,canvas.width,canvas.height);
//ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText($(this).val(),90,200);
});
$(document).on('input','#place',function(){
//redraw image
ctx.clearRect(320,320,canvas.width,canvas.height);
//ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText($(this).val(),250,250);
});
</script>
