Question

Я использую jCanvas для создания редактора флаеров с 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>

В моем javascript сначала я вызываю свою функцию initCanvas (), чтобы добавить слои на холст, и она хорошо работает при загрузке страницы.

Как вы можете видеть в моей демонстрации, вы можете изменить текст, дату и время, но когда вы хотите изменить изображения с помощью функции setLayer (), фон и все остальное убегает ...

Я пытался много часов, но все равно не работает.

Спасибо за вашу помощь.

Swati · Answer 1 · 12 июля 2020

В вашем текущем коде вы отправляли только одно значение в updateCanvasIMG, поэтому другое значение возвращало null и не загружало изображение. Вместо этого в приведенном ниже коде я объявил 2 переменные для сохранения значений pic_broadcaster и pic_challenger и проверьте, не является ли значение пустым. Если значение пусто для другого файла, отправьте URL-адрес изображения по умолчанию в вашу функцию updateCanvasIMG.

Код демонстрации :

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

Обновление изображений в файле типа ввода холста jCanvas

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Обновление изображений в файле типа ввода холста jCanvas

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Нет похожих вопросов