Bonjour à tous, ça va faire maintenant 3 jours que je galère sur une bêtise.
En gros je redimensionne une image que l'utilisateur met dans un <input> type:file. Une fois l'image redimensionnée, je l'affiche bêtement comme une image vers "resizeImageOk". Puis je transforme l'image en canvas puis en Blob et j'essaie de l'envoyer.
C'est la première fois que je joue avec les blob en php et de les envoyer sur mon controller.
1) Voici mon image sur ma template:
<img class="resize-image-ok" id="resizeImageOk" src="#" style="visibility:hidden">
2)Voici mon image que je transforme en canvas:
var imageOk = document.getElementById('resizeImageOk');
var imageOkSrc = imageOk.getAttribute('src');
var canvas = document.createElement("canvas");
canvas.width = imageOk.width;
canvas.height = imageOk.height;
canvas.getContext("2d").drawImage(imageOk, 0, 0);
3)voici mon canvas que je transforme en Blob:
var dataURL = canvas.toDataURL();
var blob = dataURItoBlob(dataURL);
blob.lastModifiedDate = new Date();
blob.name = "joe.png";
4)Ma fonction: dataURItoBlob
// convert base64/URLEncoded data component to raw binary data held in a string
var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0)
byteString = atob(dataURI.split(',')[1]);
else
byteString = unescape(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to a typed array
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {type:mimeString});
5) Et pour finir le code pour envoyer vers mon controller
var form = document.getElementById('editProfilForm');
form.onsubmit = function() {
var formData = new FormData(form);
formData.append('imageResize', blob);
var xhr = new XMLHttpRequest();
xhr.open('POST', form.getAttribute('action'), true);
xhr.upload(blob);
xhr.send(formData);
}
Bonjour à tous, ça va faire maintenant 3 jours que je galère sur une bêtise.
En gros je redimensionne une image que l'utilisateur met dans un <input> type:file. Une fois l'image redimensionnée, je l'affiche bêtement comme une image vers "resizeImageOk". Puis je transforme l'image en canvas puis en Blob et j'essaie de l'envoyer.
C'est la première fois que je joue avec les blob en php et de les envoyer sur mon controller.
1) Voici mon image sur ma template:
[html]<img class="resize-image-ok" id="resizeImageOk" src="#" style="visibility:hidden">[/html]
2)Voici mon image que je transforme en canvas:
[php]var imageOk = document.getElementById('resizeImageOk');
var imageOkSrc = imageOk.getAttribute('src');
var canvas = document.createElement("canvas");
canvas.width = imageOk.width;
canvas.height = imageOk.height;
canvas.getContext("2d").drawImage(imageOk, 0, 0);[/php]
3)voici mon canvas que je transforme en Blob:
[php]var dataURL = canvas.toDataURL();
var blob = dataURItoBlob(dataURL);
blob.lastModifiedDate = new Date();
blob.name = "joe.png";[/php]
4)Ma fonction: dataURItoBlob
[php]// convert base64/URLEncoded data component to raw binary data held in a string
var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0)
byteString = atob(dataURI.split(',')[1]);
else
byteString = unescape(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to a typed array
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {type:mimeString});[/php]
5) Et pour finir le code pour envoyer vers mon controller
[php]var form = document.getElementById('editProfilForm');
form.onsubmit = function() {
var formData = new FormData(form);
formData.append('imageResize', blob);
var xhr = new XMLHttpRequest();
xhr.open('POST', form.getAttribute('action'), true);
xhr.upload(blob);
xhr.send(formData);
}[/php]