Javascript：在更大的背景上上传图像，然后裁剪

在我的应用程序中，我需要我的图像是500x360。我想提供一个上传表单，允许用户选择图片，将其调整为所需的格式，然后将其发送到服务器

对于宽屏图像来说非常简单。我对其他尺寸有问题——高度大于宽度。使用我尝试过的每一种裁剪工具，都无法在画布中挤压完整的图像，因为它受到宽度的限制

你可以在这里试试。我不知道如何把瓶子放在帆布里

加载此图像：

我尝试了许多库，但都没有成功：croppie、cropper、angular image cropper、ngImgCrop

我想设置一个画布900x900，把我的图片上传到中间，然后把它摆弄成我喜欢的样子，但我不知道该怎么继续下去。 如有可能，请提供通用说明/库（jquery/angular）

---

谢谢大家!

所以，你试图将整个图像放在矩形区域内，对吗？在没有图像的区域添加背景？是的，这正是我想要做的。我尝试的每个裁剪库都不会离开容器的边界，因此我丢失了图像的某些部分。我想适合在矩形区域的图像，然后在“缺失”部分填充白色

$uploadCrop = $('#upload-demo').croppie({
      viewport: {
          width: 500,
          height: 360,
          type: 'square'
      },
      boundary: {
          width: 600,
          height: 400
      },
      enforceBoundary: false
  });