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 = "", pic_challenger = "") {
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: "",
x: 42,
y: 332,
width: 334,
height: 334,
fromCenter: false
}).addLayer({ // photo adversaire
name: 'photo_challenger',
type: 'image',
source: "",
x: 625,
y: 332,
width: 334,
height: 334,
fromCenter: false
}).addLayer({ // fond
name: 'fond_canvas',
type: 'image',
source: '',
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.
