Update images in canvas input type file jCanvas

Question

Im using jCanvas to make flyer editor with jQuery : https://projects.calebevans.me/jcanvas/ 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

Accepted Answer

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: '', 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;}

Advertisement

Answer