I am trying to get work my code, but I have not been successful. Basically what I want is to apply a resize algorithm to multiple images selected by the user, making them in HTML5 Canvas and then inserting each string (DataURL) in the input array to be sent by via POST method.
My code (CLIENT) index.html:
<html>
<head>
</head>
<body>
<input type="file" id="pictures" multiple><br>
<form id="frm" action="save.php" method="POST">
<input type="hidden" name="sizedpics[]" id="sizedpics">
<button type="button" onclick="resize()">submit!</button>
</form>
<canvas style="display:none;" id="canvas" width="800"></canvas><br>
<script>
var pics=[];
function resize()
{
var numpictures=pictures.files.length;
var compresion=0.5;
var dataurl;
for (i=0;i<numpictures;i++)
{
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
img = new Image();
img.onload = function ()
{
canvas.height = canvas.width * (img.height / img.width);
/// step 1
var oc = document.createElement('canvas'), octx = oc.getContext('2d');
oc.width = img.width * compresion;
oc.height = img.height * compresion;
octx.drawImage(img, 0, 0, oc.width, oc.height);
/// step 2
octx.drawImage(oc, 0, 0, oc.width * compresion, oc.height * compresion);
ctx.drawImage(oc, 0, 0, oc.width * compresion, oc.height * compresion, 0, 0, canvas.width, canvas.height);
// Step 3
dataurl = canvas.toDataURL("image/jpeg");
pics.push(dataurl);
}
img.src = window.URL.createObjectURL(pictures.files[i]);
}
document.getElementById("sizedpics").value=pics;
document.forms["frm"].submit();
}
</script>
</body>
</html>
My code (SERVER) save.php
<?php
print_r(count($_POST['sizedpics']));exit();
?>
I think there is a problem of sync with the javascript, but I don't know how to solve it, I need to send all images (base64 encoded DataURL strings) to my server using a single input "sizedpics".
Some of you know where the error? Thanks for reading, and please excuse my horrible way to write English :-)
Aucun commentaire:
Enregistrer un commentaire