新字体的裁剪问题

Question

我对作物有一个很奇怪的问题： 我正在此页面上使用它-抱歉，该页面是希伯来语... www.mzungu.co.il/add_article.php（在按优先选择文件的位置打开了作物区域）

我正在裁剪的图像上使用其他字体。字体为希伯来语及其“ Trashim”。 问题是： 如果我添加图片然后按裁切，则新字体不起作用。 如果我再按一次cop，它将起作用。 如果我在先按“裁剪”之前切换缩放功能，则可以使用。 如果我粘贴输入内容而不是输入内容，那么它将起作用。

就像我说的那样，很奇怪：（

我的代码：

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