上传前如何在客户端裁剪图像？

Question

我正在使用flask创建网站

我正在从用户那里获取文档等图像，我想让我的用户裁剪这些图像。

我已经用Google搜索，但是找不到任何免费的想法，因为文档的比例可以任意设置。

这是我保存图像的代码

使用JavaScript在用户选择要上传的图片时显示图片 请帮助我，在其中添加哪些内容以便用户裁剪图像

            <div class = "file-field input-field">
                <div class = "btn">
                    <span>  <i class="material-icons">folder</i></span>
                    <input onchange="showPreviewOne(event);" name="qimg" type = "file" />
                </div>
                
                <div class = "file-path-wrapper">
                    <input class = "file-path validate" type = "text"
                        placeholder = "Upload Image" />
                </div>
            </div>

脚本是

<script>    
    function showPreviewOne(event){
      if(event.target.files.length > 0){
        let src = URL.createObjectURL(event.target.files[0]);
        let preview = document.getElementById("display");
        preview.src = src;
        preview.style.display = "block";
      } 
    }
    function myImgRemoveFunctionOne() {
      document.getElementById("display").src = "https://i.ibb.co/ZVFsg37/default.png";
    }

</script>