Question

我正在尝试创建一个应用程序，用户可以裁剪图像然后保存然后可以下载它，但在裁剪后，当我点击保存按钮时，创建的png图像是0kb ... 可能是什么错误？

这是我的js文件

function getIndex(e) {
    var t = c.getObjects();
    for (var n in t) {
        if (t[n] == e) {
            return n
        }
    }
}

function loadingShow(e) {
    $("#overlay_loading").show();
    $("#overlay_loading #load_message").html(e);
    $("body").css("overflow", "hidden")
}

function loadingHide() {
    $("#overlay_loading").hide();
    $("body").css("overflow", "inherit")
}

function getData() {
    var e = $("body").data("dats")
}

function reloadThumbs(e) {
    if (!cropping) {
        var t = $($("#object_layers li").get().reverse());
        if (e) {
            var n = [];
            var r = getIndex(e);
            n[r] = e
        } else {
            var n = c.getObjects();
            var i = "";
            if (n.length !== t.length) {
                $("#object_layers").empty();
                for (var s = 0; s < n.length; s++) {
                    var o = $('<image width="120" height="75" />').attr("src", i);
                    $("<li/>").prependTo("#object_layers").append(o)
                }
                t = $($("#object_layers li").get().reverse())
            }
        }
        for (s in n) {
            if (n[s] !== undefined) {
                var u = fabric.document.createElement("canvas");
                if (!u.getContext && typeof G_vmlCanvasManager != "undefined") {
                    G_vmlCanvasManager.initElement(u)
                }
                u.width = $("#cc").width();
                u.height = $("#cc").height();
                fabric.util.wrapElement(u, "div");
                var a = new fabric.Canvas(u);
                a.backgroundColor = "transparent";
                var f = n[s].isActive();
                a.add(n[s]);
                a.renderAll();
                var i = a.toDataURLWithMultiplier("png", .35101058);
                if (f) {}
                $(t.get(s)).find("img").attr("src", i);
                $("#object_layers li").click(function () {
                    $("#object_layers li").removeClass("layer_selected");
                    $(this).addClass("layer_selected")
                })
            }
        }
        reloadData()
    }
}

function reloadLayers() {
    $($("#object_layers li").get().reverse()).each(function () {
        if ($(this).data("object") !== undefined) c.bringToFront($(this).data("object"))
    });
    reloadData()
}

function reloadData() {
    var e = c.getObjects();
    var t = $($("#object_layers li").get().reverse());
    for (var n in e) {
        if (e[n] !== undefined) {
            $(t.get(n)).data("object", e[n])
        }
    }
    c.selection = false
}

function cropStart() {
    cropping = true;
    c.forEachObject(function (e) {
        e.selectable = false
    });
    var e = actObj;
    var t = {
        left: 450,
        top: 150,
        width: 300,
        height: 200
    };
    console.log(t);
    cropObject = new Crop({
        left: t.left,
        top: t.top,
        fill: "rgba(255,255,255,0)",
        width: t.width,
        height: t.height
    });
    c.add(cropObject);
    c.deactivateAll();
    cropObject.selectable = true;
    c.setActiveObject(cropObject);
    c.bringToFront(cropObject);
    c.renderAll();
    $("#crop_control").show()
}

function crop() {
    var e = cropObject.width * cropObject.scaleX;
    var t = cropObject.height * cropObject.scaleY;
    var n = cropObject.left - e / 2;
    var r = cropObject.top - t / 2;
    var i = actObj;
    i.clone(function (s) {
        var o = fabric.document.createElement("canvas");
        if (!o.getContext && typeof G_vmlCanvasManager != "undefined") {
            G_vmlCanvasManager.initElement(o)
        }
        o.width = e;
        o.height = t;
        fabric.util.wrapElement(o, "div");
        var u = new fabric.Canvas(o);
        u.backgroundColor = "transparent";
        s.setOpacity(1);
        u.add(s);
        s.left -= n;
        s.top -= r;
        u.renderAll();
        var a = u.toDataURL();
        var f = $("<img src=" + a + " />").get(0);
        i.scaleX = 1;
        i.scaleY = 1;
        i.setElement(f);
        i.width = e;
        i.height = t;
        i.setAngle(0);
        c.setActiveObject(i);
        c.renderAll();
        setTimeout(function () {
            c.renderAll();
            reloadThumbs(i)
        }, 100);
        reloadThumbs()
    });
    cropFinish()
}

function cropFinish() {
    $("#crop_control").hide();
    $(".ct").removeAttr("disabled");
    $("#object_layers").sortable("enable");
    cropping = false;
    c.remove(cropObject);
    cropObject = null
}
var cropping = false;
var c = new fabric.Canvas("cc");
var start, set = "personal";
c.setOverlayImage("img/foreground-personal.png", c.renderAll.bind(c));
c.backgroundColor = "rgba(59,89,152,1)";
$(function () {
    if (window.File && window.FileReader && window.FileList && window.Blob) {} else {}
    $("#fileupload").fileupload({
        add: function (e, t) {
            if (typeof FileReader !== "undefined") {
                $(t.files).each(function (e) {
                    var t = this;
                    var n = new FileReader;
                    n.onload = function (e) {
                        var t = e.target.result;
                        fabric.Image.fromURL(t, function (e) {
                            if (e.getWidth() > 800) {
                                e.scaleToWidth(800)
                            }
                            if (e.getHeight() > 400) {
                                e.scaleToHeight(400)
                            }
                            c.add(e);
                            e.setActive(true);
                            c.centerObjectH(e).centerObjectV(e);
                            e.setCoords();
                            c.renderAll();
                            var n = $('<image width="120" height="55" />').attr("src", t);
                            $("<li/>").prependTo("#object_layers").append(n);
                            reloadThumbs()
                        })
                    };
                    n.readAsDataURL(t)
                })
            } else {
                t.submit()
            }
        },
        dataType: "json",
        done: function (e, t) {
            $.each(t.result, function (e, t) {
                $("<p/>").text(t.name).appendTo(document.body);
                fabric.Image.fromURL(t.url, function (e) {
                    var t = e.set({
                        left: 110,
                        top: 75
                    }).scale(.7);
                    c.add(t).renderAll()
                })
            })
        }
    });
    $(document).keydown(function (e) {
        if (e.which == 46 && !cropping) {
            var t = c.getActiveObject();
            if (t) {
                c.remove(t);
                reloadThumbs()
            }
        }
    });
    $("#save").click(function () {
        var e = JSON.stringify(c);
        loadingShow("Saving... Please Wait...");
        $.ajax({
            type: "POST",
            url: "ajax.php",
            data: {
                d: e
            }
        }).done(function (e) {
            loadingHide();
            alert("Data Saved!")
        })
    })
});
c.observe("object:modified", function (e) {
    reloadThumbs(e.target)
});
c.observe("object:selected", function (e) {
    var t = e.target;
    var n = getIndex(t);
    if (t.type == "image") {
        $(".ot").attr("disabled", "disabled").val("");
        $(".oi").removeAttr("disabled")
    } else if (t.type == "text") {
        $(".oi").attr("disabled", "disabled");
        $(".ot").removeAttr("disabled");
        var r = t.toObject();
        var i = t.getFill();
        if (start && r.text == "Click here to start") {
            c.clear();
            reloadThumbs();
            start = false
        }
        $("#text_text").val(r.text);
        $("#text_color").val(i.toUpperCase());
        $("#text_font").val(r.fontFamily)
    }
});
c.observe("selection:cleared", function (e) {
    $(".ot").val("").attr("disabled", "disabled");
    $(".oi").val("").attr("disabled", "disabled")
});
var cropObject = null;
var actObj;
$("#image_crop").click(function () {
    $(this).attr("disabled", "disabled");
    $(".ct").attr("disabled", "disabled");
    $("#object_layers").sortable("disable");
    actObj = c.getActiveObject();
    cropStart();
    return false
});
$("#crop_ok").click(function () {
    crop();
    c.forEachObject(function (e) {
        e.selectable = true
    })
});
$("#crop_cancel").click(function () {
    cropping = false;
    cropFinish();
    c.setActiveObject(actObj);
    c.forEachObject(function (e) {
        e.selectable = true
    });
    return false
})

这是使用ajax

的js中的保存代码

$("#save").click(function () {
            var e = JSON.stringify(c);
            loadingShow("Saving... Please Wait...");
            $.ajax({
                type: "POST",
                url: "ajax.php",
                data: {
                    d: e
                }
            }).done(function (e) {
                loadingHide();
                alert("Data Saved!")
            })
        })
    });

这是我的php文件

echo $_POST['e'];
echo json_decode($_POST['e']);
echo var_dump(json_decode($_POST['e']));
$name=time();
file_put_contents("uploads/" . $name . ".png", $data);

Answer 1

您发布的数据有一个键d，但您试图从没有值的e读取。

即使不是这种情况，我也非常确定无论如何都不会将有效的JSON数据解码为PNG二进制文件。

通过使用ajax将json发送到php来创建Png

1 个答案: