如何使用croppie js裁剪圖像並在asp.net mvc中上傳

Question

嗨，我想裁剪圖像並將其上傳到服務器上。

我正在使用croppie js插件並使用get()方法通過使用WebImage類在服務器上獲取點來裁剪它。

Asp.net MVC 代碼

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult ImageCrop(FormCollection fc)
    {
                WebImage data = WebImage.GetImageFromRequest();
                if (data != null)
                {
                    int x1, y1, x2, y2;
                    x1 = int.Parse(fc["x1"].ToString());
                    y1 = int.Parse(fc["y1"].ToString());
                    x2 = int.Parse(fc["x2"].ToString());
                    y2 = int.Parse(fc["y2"].ToString());
                    var fileName = Path.GetFileName(data.FileName);
                    fileName = Lawyer_id2 + ".jpeg";
                    var big = Server.MapPath("~/contents/ProfilePictures/big/" + fileName);
                    data.Crop(y1, x1, x2, y2);
                    data.Save(big);

                }

      }

js代碼

$uploadCrop = $('#upload-demo').croppie({
    viewport: {
        width: 200,
        height: 200,
        type: 'square'
    },
    boundary: {
        width: 300,
        height: 300
    },
    showZoomer: false,
    mouseWheelZoom: false
});
readFile(fl);
$(".closeModal").on("click", function () {
    $uploadCrop.croppie('result', {
        type: 'canvas',
        size: 'viewport'
    }).then(function (resp) {
        $('.upload-msg').css('display', '');
        popupResult({
            src: resp
        });

    });
    var arr = $uploadCrop.croppie('get').points;
    $("#x1").val(arr[0]);
    $("#y1").val(arr[1]);
    $("#x2").val(arr[2]);
    $("#y2").val(arr[3]);
});  

我得到隱藏輸入字段中的所有點，然后將這些點傳遞給webimge對象進行裁剪，但問題是裁剪后的圖像沒有保持縱橫比並且裁剪錯誤，瀏覽器端裁剪是完美的，但是當我將該點傳遞給服務器端進行裁剪時它不像瀏覽器端那樣工作，我不知道解決這個問題。

Answer 1

裁剪已經在客戶端進行，您應該只將結果發送到服務器端。 無需將裁剪點發送到服務器。

在 html 上定義Select和Upload按鈕，以及一個id="main-cropper"的 div

        <div>
            <div>
                <div id="main-cropper"></div>
                <a class="button actionSelect">
                    <input type="file" id="select" value="Choose Image" accept="image/*">
                </a>
                <button class="actionUpload">Upload</button>
            </div>
        </div>

在 JS 代碼上，將croppie 對象附加到潛水，將視點定義為邊界，最后將請求發送到服務器以將結果存儲為 blob。 在服務器端，假設會有一個帶有GetImage操作的Create控制器等待請求。 testFileName.png被指定為文件名，您可以根據您的場景修改它。

        var basic = $('#main-cropper').croppie({
            viewport: { width: 200, height: 300 },
            boundary: { width: 300, height: 400 },
            showZoomer: false
        });

        function readFile(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#main-cropper').croppie('bind', {
                        url: e.target.result
                    });
                }

                reader.readAsDataURL(input.files[0]);
            }
        }

        $('.actionSelect input').on('change', function () { readFile(this); });
        $('.actionUpload').on('click', function() {
            basic.croppie('result','blob').then(function(blob) {
                var formData = new FormData();
                formData.append('filename', 'testFileName.png');
                formData.append('blob', blob);
                var MyAppUrlSettings = {
                    MyUsefulUrl: '@Url.Action("GetImage","Create")'
                }

                var request = new XMLHttpRequest();
                request.open('POST', MyAppUrlSettings.MyUsefulUrl);
                request.send(formData);
            });
        });

在服務器上，在Create控制器中：

    [HttpPost]
    public ActionResult GetImage(string filename, HttpPostedFileBase blob)
    {
        var fullPath = "~/Images/" + filename;
        blob.SaveAs(Server.MapPath(fullPath));
        return Json("ok");
    }

生成 uuid 字符串，並將其設置為文件名並存儲在數據庫中也是有意義的。