/    Sign up×
Community /Pin to ProfileBookmark

how to create an image of droppable div/canvas after dragging items into it?

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>`
`
$(document).ready(function(){

$(“#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();
}
});
});
}
}
});

});`
`
@PostMapping(“/saveImage”)
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”;

} `

to post a comment
JavaScript

0Be the first to comment 😎

×

Success!

Help @zed420 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...