проблема с новым шрифтом

Question

У меня очень странная проблема с Кроппи: Я использую его на этой странице - извините, страница на иврите ... www.mzungu.co.il/add_article.php the (область croppie открывается при нажатии первого файла выбора)

Я использую другой шрифт на обрезанном изображении. шрифт на иврите и его "Trashim". Вопрос заключается в следующем: Новый шрифт не работает, если я добавляю картинку, а затем нажимаю кадрирование. Если я снова нажму на коп, это сработает Если я переключаю масштаб перед первым нажатием на «кадрирование», это работает. Если я вставлю ввод вместо его ввода, он будет работать.

Как я уже сказал, очень странно: (

мой код:

<style>
   @font-face {
   font-family: 'Trashim';
   src: url('Fonts/Trashim CLM Bold.ttf');
   }
</style>
<script>
   $(document).ready(function(){
          var basic = {};
          var width=500;
          var height=250;
          $(".crop-image").change(function () {
              $('#demo-basic').croppie('destroy');
              $(".crop_div").css({'display':'block'});
              var reader = new FileReader();
              var result = '';
   console.log($('#demo-basic'));
              basic = $('#demo-basic').croppie({
                  viewport: {
                      width: width,
                      height: height
                  },
   //                    showZoomer: false
              });
              reader.onload = function (e) {
                  basic.croppie('bind', {
                      url: e.target.result,
                      // points: [77, 469, 280, 739]
                  });
              }
                  ;
              reader.readAsDataURL(this.files[0]);

          });

          $('.crop').click(function () {
              basic.croppie('result', {
                  type: 'base64',
                  size: 'viewport',
                  format: 'png',
                  circle: false
              }).then(function (result) {
                  // console.log(result);

                  var canvas = $("body").find("canvas")[0];
                  var ctx = canvas.getContext("2d");
                  var img = new Image;
                  img.onload = function () {

                      // ctx.clearRect(0, 0, canvas.width, canvas.height);


                      ctx.drawImage(img, 0, 0);

                      ctx.drawImage(img, 0, 0);


                      // ctx.fillStyle = "white";
                      ctx.fillStyle = "rgba(255, 255, 255, 0.7)";

                      ctx.fillRect(0, 180, canvas.width, canvas.height);

                      ctx.fillStyle = "black";
                      ctx.font = "25px Trashim";

                      ctx.textAlign = "center";

                      ctx.fillText($("[name='article_authors_name']").val(), (width/2), 230);
                      ctx.font = "30px Trashim";
                      ctx.fillText($("[name='article_name']").val(), (width/2), 210);


                      // var c = document.getElementById("alpha");
                      var d = canvas.toDataURL("image/png");
                      console.log(d);
                      $("[name='article_banner']").val(d)
                  };
                  img.src = result;
              });
          });
      });
</script>
<div class="form-group crop_div" align="right" dir="rtl">
   <input type="hidden" name="article_banner" required/>
   <div id="page">
      <div id="demo-basic">
      </div>
   </div>
   <div>
      <button type="button" class="crop">חיתוך התמונה</button>
   </div>
   <div align="center">
      <canvas id='testCanvas'width=500 height=250 class="final_image_canvas"></canvas>
   </div>
</div>