Create Png by sending json to php using ajax [closed] - php

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
I am trying to make an app where users can crop the image then save then can download it, but after cropping when i click on save button the png image created is of 0kb...
what could be the error?
this is my js file
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
})
this is the save code in js using ajax
$("#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!")
})
})
});
this my php file
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

Your posted data has a key d but you are trying to read from e which doesn't have a value.
Even if that wasn't the case, then I'm pretty sure that no valid JSON data will decode to be a PNG binary anyway.