如何添加 Croppie 结果以上传 php 并将结果传递到其他 php 页面答案

【问题标题】：How to add Croppie result to upload php and pass the result to other php page如何添加 Croppie 结果以上传 php 并将结果传递到其他 php 页面
【发布时间】：2016-11-04 12:58:01
【问题描述】：

我正在尝试开发一个应用程序，该应用程序可以从 facebook sdk 或通过 ajax 上传并使用 croppie.js 进行裁剪并上传到我的服务器目录。我是 Ajax、jQuery 和 php 的新手。我在互联网上发现了一个类似的应用程序，它执行我认为的相同功能。这是那个 app.js 的代码

function dataURItoBlob(dataURI) {
        var byteString;
        if (dataURI.split(',')[0].indexOf('base64') >= 0) byteString = atob(dataURI.split(',')[1]);
        else byteString = unescape(dataURI.split(',')[1]);
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
        var ia = new Uint8Array(byteString.length);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        return new Blob([ia], {
            type: mimeString
        });
    }
    window.uploadPicture = function(callback) {
        croppie.result({
            size: "viewport"
        }).then(function(dataURI) {
            var formData = new FormData();
            formData.append("design", $("#fg").data("design"));
            formData.append("image", dataURItoBlob(dataURI));
            $.ajax({
                url: "upload.php",
                data: formData,
                type: "POST",
                contentType: false,
                processData: false,
                success: callback,
                error: function() {
                    document.getElementById("download").innerHTML = "Download Profile Picture";
                },
                xhr: function() {
                    var myXhr = $.ajaxSettings.xhr();
                    if (myXhr.upload) {
                        myXhr.upload.addEventListener('progress', function(e) {
                            if (e.lengthComputable) {
                                var max = e.total;
                                var current = e.loaded;
                                var percentage = Math.round((current * 100) / max);
                                document.getElementById("download").innerHTML = "Uploading... Please Wait... " + percentage + "%";
                            }
                        }, false);
                    }
                    return myXhr;
                },
            });
        });
    }
    window.updatePreview = function(url) {
        document.getElementById("crop-area").innerHTML = "";
        window.croppie = new Croppie(document.getElementById("crop-area"), {
            "url": url,
            boundary: {
                height: 400,
                width: 400
            },
            viewport: {
                width: 400,
                height: 400
            },
        });
        $("#fg").on('mouseover touchstart', function() {
            document.getElementById("fg").style.zIndex = -1;
        });
        $(".cr-boundary").on('mouseleave touchend', function() {
            document.getElementById("fg").style.zIndex = 10;
        });
        document.getElementById("download").onclick = function() {
            this.innerHTML = "Uploading... Please wait...";
            uploadPicture(function(r) {
                document.getElementById("download").innerHTML = "Uploaded";
                window.location = "download.php?i=" + r;
            });
        };
        document.getElementById("download").removeAttribute("disabled");
    };
    window.onFileChange = function(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                image = new Image();
                image.onload = function() {
                    var width = this.width;
                    var height = this.height;
                    if (width >= 400 && height >= 400) updatePreview(e.target.result);
                    else alert("Image should be atleast have 400px width and 400px height");
                };
                image.src = e.target.result;
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $(document).ready(function() {
        $(".design").on("click", function() {
            $("#fg").attr("src", $(this).attr("src")).data("design", $(this).data("design"));
            $(".design.active").removeClass("active");
            $(this).addClass("active");
        });
    });

我用这段代码创建了一个前端。但我不能走得更远。我需要 upload.php 代码上传到我的服务器并将输出发送到 download.php 我可以在其中添加共享按钮以共享裁剪图像。请务必完成并分享适用于此 javascript 的可能的 upload.php 代码和 download.php 代码。非常感谢！

【问题讨论】：

标签： javascript php jquery ajax crop

【解决方案1】：

我无法为您提供 php 方面的帮助，但我对您的代码有一些建议你可以直接从croppie返回一个blob，所以你不需要自己构建它

croppie.result({
  size: 'viewport',
  type: 'blob'
}).then(function(blob) {
   ...
   formData.append('image', blob, 'screenshot.png')
   ...
})

在您的 onFileChange 函数上，您不必使用 FileReader，您只需使用

image.src = URL.createObjectURL(input.files[0])

【讨论】：