Slim Image Cropper 不将裁剪后的图像发送到服务器答案

【问题标题】：Slim Image Cropper Not Sending the cropped image to the serverSlim Image Cropper 不将裁剪后的图像发送到服务器
【发布时间】：2022-01-27 10:51:33
【问题描述】：

我正在使用 Slim Image Cropper jQuery 库来允许用户上传个人资料图片并对其进行裁剪。整个事情都很好，只是保存的图像是原始图像而不是裁剪后的图像。我做错了什么？

这是我的代码：

<div class="col-md-12 col-sm-12 mb-3">
    <div class="slim"
         data-ratio="1:1"
         data-size="270,270"
         data-edit="false"
         data-instant-edit="true"                                     
         data-max-file-size="2">
        @if (!string.IsNullOrEmpty(Model.ProfilePicture))
        {
             <input type="hidden" id="profilePicture" name="ProfilePicture" value="@Model.ProfilePicture" />
             <input type="file" id="profilePictureFile" name="ProfilePictureFile[]" />
             <img src="@Model.ProfilePicture">                                        
        }
        else
        {
             <input type="file" id="profilePictureFile" name="ProfilePictureFile[]" />                                        
        }
    </div>
</div>

<script>
    var formdata = new FormData();

    var file = document.getElementById('profilePictureFile');
    var imgfile = file.files;

    if (imgfile && imgfile != null && imgfile.length > 0) {
         formdata.append(imgfile[0].name, imgfile[0]);
         formdata.append('ProfilePictureFile', imgfile[0]);
    }
    
    // I then submit the formdata variable using AJAX post request.
</script>

【问题讨论】：

您将原始文件内容附加到 FormData 对象，而不是 Slim 库的结果。查看他们的文档，了解如何调用裁剪功能并访问结果。
@RoryMcCrossan 我通读了文档 - pqina.nl/slim 它应该会自动执行此操作，但事实并非如此。
没关系，它不会自动说出来。但我在他们的文档中没有看到调用功能。
您是否为授权副本付费？
@RoryMcCrossan 是的。我给作者发了消息，但我的支持已过期，不确定他们会回复。

标签： javascript jquery razor-pages

【解决方案1】：

这是我的解决方案。 Slim Image Cropper 没有使用输入 type="file"，而是使用编辑后的图像详细信息创建隐藏输入，并将值存储为 base64 字符串。我将值发布到服务器，然后将其转换为图像。

                if (!string.IsNullOrEmpty(model.ProfilePicture))
                {
                    var result = JsonConvert.DeserializeObject<ProfileImageCropper>(model.ProfilePicture);

                    byte[] imageBytes = System.Convert.FromBase64String(result.output.image.Replace("data:image/jpeg;base64,","").Replace("data:image/png;base64,", ""));
                    
                    using (var ms = new MemoryStream(imageBytes, 0, imageBytes.Length))
                    {
                        Image profileImage = Image.FromStream(ms, true);

                        if (profileImage != null)
                        {                            
                            string _FileExtension = Path.GetExtension(result.output.name);
                            string _FileName = model.UserUniqueID.ToLower() + _FileExtension;
                            string _path = Path.Combine(Server.MapPath("~/assets/images/profile/"), _FileName);

                            string currentFile = UserProfileRepository.GetProfilePictureName(model.ProfileID);
                                                        
                            if (!string.IsNullOrEmpty(currentFile))
                                if (System.IO.File.Exists(Server.MapPath(currentFile)))                         
                                    System.IO.File.Delete(Server.MapPath(currentFile));                                                                
                                                        
                            profileImage.Save(_path);
                            model.ProfilePicture = "/assets/images/profile/" + _FileName;                            
                        }
                    }
                }

【讨论】：