需要裁剪画布而不是使用 jquery 调整它的大小

Question

我实际上正在开发一个覆盖两张图片的项目，一张是用户上传的，第二张是默认的。

我唯一的问题是当上传的图像是矩形而不是正方形时，画布正在调整它的大小。我需要画布裁剪我的图像，并且是一个正方形。然后我可以应用过滤器。

这是我的代码：

$('.file1, .file2').on('change', function() {
  var reader = new FileReader(),
    imageSelector = $(this).data('image-selector');

  if (this.files && this.files[0]) {
    reader.onload = function(e) {
      imageIsLoaded(e, imageSelector)
    };
    reader.readAsDataURL(this.files[0]);
  }
});

$('.btn-merge').on('click', merge);

function imageIsLoaded(e, imageSelector) {
  $(imageSelector).attr('src', e.target.result);
  $(imageSelector).removeClass('hidden');
};

function merge() {
  var canvas = document.getElementById('canvas'),
  
    ctx = canvas.getContext('2d'),
    imageObj1 = new Image(),
    imageObj2 = new Image();
    canvas.width  = 300;
    canvas.height = 300;
  imageObj1.src = $('.image1').attr('src');
  imageObj1.onload = function() {
    ctx.globalAlpha = 1;
    ctx.drawImage(imageObj1, 0, 0, 300, 300);
    imageObj2.src = $('.image2').attr('src');
    imageObj2.onload = function() {
      ctx.globalAlpha = 1;
      ctx.drawImage(imageObj2, 0, 0, 300, 300);
      var img = canvas.toDataURL('img/png');
     $('.merged-image').attr('src', img);
     var mergedimage = document.getElementById('mergedimage');
      $('.merged-image').removeClass('hidden');
      $("#downloadfinal").attr("href", mergedimage.src);
    }

  };
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="container-fluid shadow">
        
      <div class="container d-flex flex-column justify-content-center">
          <div class="row mb-1 ">
              <h2>Votre photo ici :  </h2>
              <label class="custom ml-3 hover-underline-animation"> <input class="ml-2 file1" type="file" data-image-selector=".image1" />Selectionner un fichier</label>
      
            </div> 
            <img class="image1 hidden mb-4" alt="abs" width="200px" height="auto"/>
           <div class="row">
            
            <h2 class="mr-2 ">Filtre par défaut : </h2>
           
            
            <img alt="abs image3"  width="200px" height="auto" src ="img/filtre.png"/>
          </div>
          <div class="otherfilter">
     
           <div class="row mt-5 mb-5">
           <h2 class="">Mettez un autre filtre ici : </h2>
           <label class="custom ml-3 hover-underline-animation"> <input class="ml-2 file2" type="file" data-image-selector=".image2" />Selectionner un fichier</label>
            </div>
        
          <img class="hidden image2" alt="ab"  width="200px" height="auto" src ="img/filtre.png">
           </div>
         
      </div>
    

  
    <br />
    <div class="text-center mb-5">
    <input class="btn-merge mb-3" type="button" value="Appliquer le filtre" />
    <br />
    <img class="merged-image hidden mb-3" id="mergedimage" alt="merged image" />
    <canvas id="canvas" class="hidden"></canvas>
   <br> 
    <a class="btn-dl" id="downloadfinal" role="button" href="#"
   download="photo_profil_modifie">
   <i class="mr-2 bi bi-download"></i>Télécharger
</a>

</div>

感谢您阅读本文，希望我的英语很好，如果您不明白，请告诉我。

Answer 1

为此，您需要在水平或垂直方向缩放输入图像以适应画布，同时保持其纵横比。

这并不难，因为画布是方形的，所以事情会更容易一些。假设我们有一个 300 x 300 像素的画布，我们想在上面绘制一个 400 x 300 的非正方形图像。首先，我们取画布的宽度或高度 - 这并不重要，因为它是相同的 - 并将其除以图像的较大边 - 在本例中为 400。

300 / 400 == 0.75

这是我们在将图像绘制到画布上之前需要乘以图像的宽度和高度的比例。

这是一个例子：

let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
let imageObj1 = new Image();
imageObj1.crossOrigin = 'anonymous';

imageObj1.crossOrigin = 'anonymous';
imageObj1.onload = () => {
  let scale = imageObj1.width > imageObj1.height ? canvas.width / imageObj1.width : canvas.height / imageObj1.height;
  context.drawImage(imageObj1, canvas.width / 2 - imageObj1.width * scale / 2, canvas.height / 2 - imageObj1.height * scale / 2, imageObj1.width * scale, imageObj1.height * scale);
}
imageObj1.src = 'https://api.codetabs.com/v1/proxy?quest=https://picsum.photos/id/237/300/400';

#canvas {
  background: blue;
}

<canvas id="canvas" width="300" height="300"></canvas>

如果您不希望画布上没有未使用的区域并将图像拉伸到整个画布并裁剪超出部分，您只需将图像的较小边除以画布宽度/高度即可。

例如：

//ctx.drawImage(imageObj1, 0, 0, 300, 300);let image = new Image();

let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
let imageObj1 = new Image();
imageObj1.crossOrigin = 'anonymous';

imageObj1.crossOrigin = 'anonymous';
imageObj1.onload = () => {
  let scale = imageObj1.width < imageObj1.height ? canvas.width / imageObj1.width : canvas.height / imageObj1.height;
  context.drawImage(imageObj1, canvas.width / 2 - imageObj1.width * scale / 2, canvas.height / 2 - imageObj1.height * scale / 2, imageObj1.width * scale, imageObj1.height * scale);

}
imageObj1.src = 'https://api.codetabs.com/v1/proxy?quest=https://picsum.photos/id/237/300/400';

<canvas id="canvas" width="300" height="300"></canvas>