Home

Update images in canvas input type file jCanvas

Im using jCanvas to make flyer editor with jQuery : https://projects.calebevans.me/jcanvas/

enter image description here

$(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.

Asked on July 16, 2020 in HTML.
Add Comment
Cancel
1 Answer(s)

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>

Cancel
Answered on July 16, 2020.
Add Comment
Cancel

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.