Menu
Im using jCanvas to make flyer editor with jQuery : https://projects.calebevans.me/jcanvas/
$(function () {
initCanvas();
$.datepicker.regional['fr'] = {
closeText: 'Fermer',
prevText: '<Préc',
nextText: 'Suiv>',
currentText: 'Aujourd\'hui',
monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
monthNamesShort: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Jun', 'Jul', 'Aou', 'Sep', 'Oct', 'Nov', 'Dec'],
dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
weekHeader: 'Sm',
dateFormat: 'dd-mm-yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: '',
minDate: 0,
maxDate: '+12M +0D',
numberOfMonths: 2,
showButtonPanel: true
};
$.datepicker.setDefaults($.datepicker.regional['fr']);
$("#date_input").on("change", function () {
$(this).css("color", "rgba(0,0,0,0)").siblings(".datepicker_label").css({
"text-align": "center",
position: "absolute",
left: "140px",
top: "40px",
width: $(this).width()
}).text($(this).val().length == 0 ? "" : ($.datepicker.formatDate($(this).attr("dateformat"), new Date($(this).val()))));
});
$('form').on('keyup change paste', 'input, select, textarea', function () {
console.log("hola datevid");
updateCanvasTEXT();
});
$('#pic_broadcaster').on("change", function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
console.log(e.target.result);
updateCanvasIMG(e.target.result, '');
}
reader.readAsDataURL(this.files[0]);
}
});
$('#pic_challenger').on("change", function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
console.log(e.target.result);
updateCanvasIMG('', e.target.result);
}
reader.readAsDataURL(this.files[0]);
}
});
});
function updateCanvasIMG(pic_broadcaster = "https://i.ibb.co/qNP921b/IMG-0146.jpg", pic_challenger = "https://i.ibb.co/hHDj50p/S-3629060.jpg") {
if (pic_broadcaster.indexOf('data:') !== -1) {
console.log('pic_broadcaster contains data:');
} else {
console.log('pic_broadcaster not contains data:');
}
$('#canvas').setLayer('photo_bc', {
type: 'image',
source: pic_broadcaster,
x: 42,
y: 332,
width: 334,
height: 334,
fromCenter: false
}).setLayer('photo_challenger', {
type: 'image',
source: pic_challenger,
x: 625,
y: 332,
width: 334,
height: 334,
fromCenter: false
}).setLayer('fond_canvas', {
type: 'image',
source: 'https://i.ibb.co/FwkgQ2n/fond.png',
x: 0,
y: 0,
width: 1000,
height: 1000,
fromCenter: false
}).drawLayers();
}
function updateCanvasTEXT() {
$('#canvas').setLayer('pseudo_bc', {
type: 'text',
fillStyle: '#fff',
x: 150,
y: 715,
fontSize: 35,
fontFamily: 'Verdana, sans-serif',
maxWidth: 300,
align: 'left',
respectAlign: true,
text: $('#bc_agency').val()
}).setLayer('pseudo_challenger', { // pseudo challenger
type: 'text',
fillStyle: '#fff',
x: 710,
y: 715,
fontSize: 35,
fontFamily: 'Verdana, sans-serif',
maxWidth: 300,
align: 'left',
respectAlign: true,
text: $('#bc_challenger').val()
}).setLayer('date_time', { // date et heure
type: 'text',
fillStyle: '#fff',
fontStyle: 'bold',
x: 500,
y: 820,
fontSize: 45,
fontFamily: 'Verdana, sans-serif',
text: $('.datepicker_label').text() + " à " + $('.event_heure').val().replace(":", "h")
}).drawLayers();
}
function initCanvas() {
$('#canvas').addLayer({ // photo bc
name: 'photo_bc',
type: 'image',
source: "https://i.ibb.co/qNP921b/IMG-0146.jpg",
x: 42,
y: 332,
width: 334,
height: 334,
fromCenter: false
}).addLayer({ // photo adversaire
name: 'photo_challenger',
type: 'image',
source: "https://i.ibb.co/hHDj50p/S-3629060.jpg",
x: 625,
y: 332,
width: 334,
height: 334,
fromCenter: false
}).addLayer({ // fond
name: 'fond_canvas',
type: 'image',
source: 'https://i.ibb.co/FwkgQ2n/fond.png',
x: 0,
y: 0,
width: 1000,
height: 1000,
fromCenter: false
}).addLayer({ // pseudo bc
name: 'pseudo_bc',
type: 'text',
fillStyle: '#fff',
x: 150,
y: 715,
fontSize: 35,
fontFamily: 'Verdana, sans-serif',
maxWidth: 300,
align: 'left',
respectAlign: true,
text: $('#bc_agency').val()
}).addLayer({ // pseudo challenger
name: 'pseudo_challenger',
type: 'text',
fillStyle: '#fff',
x: 710,
y: 715,
fontSize: 35,
fontFamily: 'Verdana, sans-serif',
maxWidth: 300,
align: 'left',
respectAlign: true,
text: $('#bc_challenger').val()
}).addLayer({ // date et heure
name: 'date_time',
type: 'text',
fillStyle: '#fff',
fontStyle: 'bold',
x: 500,
y: 820,
fontSize: 45,
fontFamily: 'Verdana, sans-serif',
text: $('.datepicker_label').text() + " à " + $('.event_heure').val().replace(":", "h")
}).drawLayers();
}.canvas{width: 97vw;height: 60vh;max-width: 1000px;max-height: 1000px;}
#date_input{text-indent: -500px;height:25px; width:200px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/jcanvas.15.12.12.min.js"></script>
<form>
<label class="bc_agency" for="input">Pseudo broadcaster: </label>
<input type="text" name="bc_agency" id="bc_agency" placeholder="Entrer votre pseudo" value="Pseudo">
<label class="bc_challenger" for="input">Pseudo advsersaire: </label>
<input type="text" name="bc_challenger" id="bc_challenger" placeholder="Entrer le pseudo de l'adversaire" value="Pseudo"><br>
Date de l'évévement <input type="date" name="pk_date" dateformat="DD d MM" id="date_input"><span class="datepicker_label" style="pointer-events: none;"></span> Heure <input type="time" name="event_heure" class="event_heure"><br>
Photo broadcaster: <input type="file" name="pic_broadcaster" id="pic_broadcaster"><br>
Photo adversaire: <input type="file" name="pic_challenger" id="pic_challenger"><br>
</form>
<br>
<canvas id="canvas" width="1000" height="1000">
<p>This is fallback content for users of assistive technologies or of browsers that don't have full support for the Canvas API.</p>
</canvas>In my javascript, first i call my function initCanvas() to add layers to the canvas and it work well when the page load.
As you can see in my demo, you can change text, date and time but when you want to change images with setLayer() function, the background and everything run away...
I tryed for many hours but it still dont work.
Thank you for your help.
552
In you current code you where sending only one value in updateCanvasIMG so the other value was returning null and was not loading image.Instead in below code i have declare 2 variable to save value of pic_broadcaster and pic_challenger and have check if the value is not empty .If the value are empty for another file send default image url to your function updateCanvasIMG.
Demo Code :
$(function() {
initCanvas();
$.datepicker.regional['fr'] = {
closeText: 'Fermer',
prevText: '<Préc',
nextText: 'Suiv>',
currentText: 'Aujourd\'hui',
monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
monthNamesShort: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Jun', 'Jul', 'Aou', 'Sep', 'Oct', 'Nov', 'Dec'],
dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
weekHeader: 'Sm',
dateFormat: 'dd-mm-yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: '',
minDate: 0,
maxDate: '+12M +0D',
numberOfMonths: 2,
showButtonPanel: true
};
$.datepicker.setDefaults($.datepicker.regional['fr']);
$("#date_input").on("change", function() {
$(this).css("color", "rgba(0,0,0,0)").siblings(".datepicker_label").css({
"text-align": "center",
position: "absolute",
left: "140px",
top: "40px",
width: $(this).width()
}).text($(this).val().length == 0 ? "" : ($.datepicker.formatDate($(this).attr("dateformat"), new Date($(this).val()))));
});
$('form').on('keyup change paste', 'input, select, textarea', function() {
console.log("hola datevid");
updateCanvasTEXT();
});
var file1 = "";
var file2 = "";
$('#pic_broadcaster').on("change", function() {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
console.log(e.target.result);
file1 = e.target.result;
//checking if file2 is not null
if (file2 != "") {
//send same
updateCanvasIMG(file1, file2);
} else {
//send default image
updateCanvasIMG(file1, "https://i.ibb.co/hHDj50p/S-3629060.jpg");
}
}
reader.readAsDataURL(this.files[0]);
}
});
$('#pic_challenger').on("change", function() {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
console.log(e.target.result);
file2 = e.target.result;
//check if file1 is not null
if (file1 != "") {
//send same to function
updateCanvasIMG(file1, file2);
} else {
//send default image
updateCanvasIMG("https://i.ibb.co/qNP921b/IMG-0146.jpg", file2);
}
}
reader.readAsDataURL(this.files[0]);
}
});
});
function updateCanvasIMG(pic_broadcaster, pic_challenger) {
$('#canvas').setLayer('photo_bc', {
type: 'image',
source: pic_broadcaster,
x: 42,
y: 332,
width: 334,
height: 334,
fromCenter: false
}).setLayer('photo_challenger', {
type: 'image',
source: pic_challenger,
x: 625,
y: 332,
width: 334,
height: 334,
fromCenter: false
}).setLayer('fond_canvas', {
type: 'image',
source: 'https://i.ibb.co/FwkgQ2n/fond.png',
x: 0,
y: 0,
width: 1000,
height: 1000,
fromCenter: false
}).drawLayers();
}
function updateCanvasTEXT() {
$('#canvas').setLayer('pseudo_bc', {
type: 'text',
fillStyle: '#fff',
x: 150,
y: 715,
fontSize: 35,
fontFamily: 'Verdana, sans-serif',
maxWidth: 300,
align: 'left',
respectAlign: true,
text: $('#bc_agency').val()
}).setLayer('pseudo_challenger', { // pseudo challenger
type: 'text',
fillStyle: '#fff',
x: 710,
y: 715,
fontSize: 35,
fontFamily: 'Verdana, sans-serif',
maxWidth: 300,
align: 'left',
respectAlign: true,
text: $('#bc_challenger').val()
}).setLayer('date_time', { // date et heure
type: 'text',
fillStyle: '#fff',
fontStyle: 'bold',
x: 500,
y: 820,
fontSize: 45,
fontFamily: 'Verdana, sans-serif',
text: $('.datepicker_label').text() + " à " + $('.event_heure').val().replace(":", "h")
}).drawLayers();
}
function initCanvas() {
$('#canvas').addLayer({ // photo bc
name: 'photo_bc',
type: 'image',
source: "https://i.ibb.co/qNP921b/IMG-0146.jpg",
x: 42,
y: 332,
width: 334,
height: 334,
fromCenter: false
}).addLayer({ // photo adversaire
name: 'photo_challenger',
type: 'image',
source: "https://i.ibb.co/hHDj50p/S-3629060.jpg",
x: 625,
y: 332,
width: 334,
height: 334,
fromCenter: false
}).addLayer({ // fond
name: 'fond_canvas',
type: 'image',
source: 'https://i.ibb.co/FwkgQ2n/fond.png',
x: 0,
y: 0,
width: 1000,
height: 1000,
fromCenter: false
}).addLayer({ // pseudo bc
name: 'pseudo_bc',
type: 'text',
fillStyle: '#fff',
x: 150,
y: 715,
fontSize: 35,
fontFamily: 'Verdana, sans-serif',
maxWidth: 300,
align: 'left',
respectAlign: true,
text: $('#bc_agency').val()
}).addLayer({ // pseudo challenger
name: 'pseudo_challenger',
type: 'text',
fillStyle: '#fff',
x: 710,
y: 715,
fontSize: 35,
fontFamily: 'Verdana, sans-serif',
maxWidth: 300,
align: 'left',
respectAlign: true,
text: $('#bc_challenger').val()
}).addLayer({ // date et heure
name: 'date_time',
type: 'text',
fillStyle: '#fff',
fontStyle: 'bold',
x: 500,
y: 820,
fontSize: 45,
fontFamily: 'Verdana, sans-serif',
text: $('.datepicker_label').text() + " à " + $('.event_heure').val().replace(":", "h")
}).drawLayers();
}.canvas {
width: 97vw;
height: 60vh;
max-width: 1000px;
max-height: 1000px;
}
#date_input {
text-indent: -500px;
height: 25px;
width: 200px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/jcanvas.15.12.12.min.js"></script>
<form>
<label class="bc_agency" for="input">Pseudo broadcaster: </label>
<input type="text" name="bc_agency" id="bc_agency" placeholder="Entrer votre pseudo" value="Pseudo">
<label class="bc_challenger" for="input">Pseudo advsersaire: </label>
<input type="text" name="bc_challenger" id="bc_challenger" placeholder="Entrer le pseudo de l'adversaire" value="Pseudo"><br> Date de l'évévement <input type="date" name="pk_date" dateformat="DD d MM" id="date_input"><span class="datepicker_label" style="pointer-events: none;"></span> Heure <input type="time" name="event_heure" class="event_heure"><br> Photo broadcaster: <input type="file" name="pic_broadcaster" id="pic_broadcaster"><br> Photo adversaire: <input type="file" name="pic_challenger" id="pic_challenger"><br>
</form>
<br>
<canvas id="canvas" width="1000" height="1000">
<p>This is fallback content for users of assistive technologies or of browsers that don't have full support for the Canvas API.</p>
</canvas>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
