Question

我正在尝试在将图像上传到服务器之前裁剪图像。但是在服务器端，我得到的是图像的实际尺寸而不是裁剪后的图像。这是我的代码。

我正在使用此plugin

<input type="button" id="btnCroped" value="Crop and Upload" />

JS

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/ImgaeCropper/cropper.css" rel="stylesheet" />
<link href="~/Content/ImgaeCropper/main.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>

<script src="~/Content/ImgaeCropper/cropper.js"></script>

<script src="~/Content/ImgaeCropper/main.js"></script>
<script>
    $(document).ready(function () {

        $('#FileUpload1').change(function () {
            $('#Image1').hide();
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#Image1').show();
                $('#Image1').attr("src", e.target.result);
                $('.container > img').cropper({
                    aspectRatio: 16 / 9,
                    autoCropArea: 0.65,
                    strict: false,
                    guides: false,
                    highlight: false,
                    dragCrop: false,
                    cropBoxMovable: true,
                    cropBoxResizable: false
                });
            }
            reader.readAsDataURL($(this)[0].files[0]);
        });

        $('#btnCroped').on('click', function () {
            debugger;
            $('.container > img').cropper('crop');
            $('.container > img').cropper('getCroppedCanvas').toBlob(function (blob) {
                var formData = new FormData();

                formData.append('croppedImage', blob);
                debugger;
                $.ajax({
                    url: '/Home/Upl',
                    method: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function () {
                        console.log('Upload success');
                    },
                    error: function () {
                        console.log('Upload error');
                    }
                });
            });
        });
    });
</script>

[HttpPost]
        public ActionResult Upl()
        {

            HttpPostedFileBase newImage = Request.Files["croppedImage"];
            var folder =System.Web.HttpContext.Current.Server.MapPath("~/Uploads/");

            if (!Directory.Exists(folder))
            {
                Directory.CreateDirectory(folder);
            }
            var getExt = Path.GetExtension(newImage.FileName).ToLower();
            var picName = Guid.NewGuid() + newImage.FileName;
            newImage.SaveAs(folder + picName);

            return View();
        }

我遵循了code

在mvc和jquery中获取服务器端的裁剪图像

0 个答案: