情况如下：

我正在我的网站上创建一个“我的 Profiles ”页面 . 在该页面中，人们可以在“输入类型=文件”中上传图片以设置 Profiles 图片：

（我使用Django作为后端顺便说一句，所以这可能看起来令人困惑，但所有这些代码正在做的是为用户布置表单，以便他们能够更改其名称或添加 Profiles 图片） .

<form enctype="multipart/form-data" method="POST">
    {% csrf_token %}
    <div class="form-group">
      <label for="{{ name_form.first_name.id_for_label }}">First Name</label>
      {{ name_form.first_name }}
    </div>
    <div class="form-group">
      <label for="{{ name_form.last_name.id_for_label }}">Last Name</label>
      {{ name_form.last_name }}
    </div>
    <div class="form-group">
      <label for="ID">Your ID</label>
      <div class="form-inline">
        <input type="text" class="form-control" id="ID" value="{{ user.profile.id }}" disabled>
        <button id="copy" type="button" name="button" data-toggle="tooltip" data-placement="top" title="Copy your ID">
          <i class="far fa-clipboard"></i>
        </button>
      </div>
      <small id="IDHelp" class="form-text text-muted">You can not modify your ID as it is computer-generated</small>
    </div>
    <div class="form-group">
      <label for="profilePicture">Profile Picture</label>
      {{ profile_form.profile_pic }}
    </div>
    <button id="profileSave" type="submit" class="btn btn-primary">Save Changes</button>
  </form>

但是，我不想按原样上传他们的照片 . 我正在使用croppie.js并打开一个带有图像的模态，因此他们必须能够选择他们想要的图像部分 . 当用户选择他们想要的裁剪并按下裁剪按钮时，模态关闭，并且img html标签的src被设置为数据URI：

$('#crop').on('click', function (ev) {
   $uploadCrop.croppie('result', {
            type: 'base64',
            format: 'jpeg',
            size: 'viewport',
      circle: true
        }).then(function (resp) {
                $('#profilePicture').attr('src', resp);
                $('#pictureModal').modal('hide');

        /*Insert code to upload the argument resp, which contains the 
        data URI for the image, then somehow upload that image into the input
        field for files */
            });
 });

但是，仅将img标记设置为裁剪图像是不够的 . 我需要将裁剪后的图像文件存储到我的数据库中 . 这就是问题所在，因为input type = file标签仍然包含未剪切的图像 . 如何使用此插件拍摄此图像并将其替换为当前上载的文件 .

注意：我不仅在寻找解决此问题的具体方法 . 我愿意听取替代方案，但这是我最初想到的解决方案 . 我google了很多，但我发现只是通过PHP提交表单，或操纵文件输入 Headers 或不相关的东西 .

croppie.js还允许返回不同类型的东西：

  • 'base64'返回以base64编码的裁剪图像

  • 'html'返回位于隐藏溢出div中的图像的html

  • 'blob'返回裁剪图像的斑点

  • 'rawcanvas'返回canvas元素，允许您在获取结果图像之前进行操作

我目前正在返回base64但是如果你们能想到其他类型的解决方案，我很乐意听到它们 .

很抱歉，如果我没有提供足够的详细信息或提供足够的代码，请告诉我是否需要发送更多内容 .

html database image input