I’m trying to drag items into a droppable div/canvas and save it to database as an image. I got as far as saving it as an image file but Image file is empty. why ???. It saves but without any images. There are no errors. Is this even possible ?
`<div id=”pic1″ class=”ui-widget-content”></div>
<div id=”pic2″ class=”ui-widget-content”></div>
<div id=”droppable” class=”ui-widget-header”>
<div width=”500″ height=”300″></canvas>
</div>`
$(“#pic1”).draggable({ helper: “clone” });
$(“#pic2”).draggable({ helper: “clone” });
$(“#droppable”).droppable({
drop: function (event, ui) {
var $canvas = $(this);
if (!ui.draggable.hasClass(‘canvas-element’)) {
var $canvasElement = ui.draggable.clone();
$canvasElement.addClass(‘canvas-element’);
$canvasElement.draggable({
containment: ‘#droppable’
});
//Add image to droppable div
$canvas.append($canvasElement);
$canvasElement.draggable({ disabled: true });
$(“#formImage”).submit(function (e) {
e.preventDefault();
var image = $canvas.toDataURL(“image/png”).replace(“image/png”, “image/octet-stream”);
$.ajax({
type: “POST”,
url: ‘/saveImage’,
contentType: ‘application/octet-stream’,
data: image,
success: function (data) {
alert(data);
console.log();
}
});
});
}
}
});
});`
public String saveImage(@RequestBody String image) throws IOException {
String partSeparator = “,”;
if (image.contains(partSeparator)) {
String encodedImg = image.split(partSeparator)[1];
byte[] decodedImg = Base64.getDecoder().decode(encodedImg.getBytes(StandardCharsets.UTF_8));
Path destinationFile = Paths.get(“C:******\Saved Pictures”, “myImage.png”);
Files.write(destinationFile, decodedImg);
}
return “stuDrawImage”;
} `