ajax image download + upload
Ik zal even de situatie uitleggen:
ik heb een pagina, waar de javascript code op draait,
die javascript code moet een plaatje downloaden, mag wat mij betreft via ajax of via een image object, of wat ook maar uitkomt, (het serverside verhaal achter dit plaatje daar kan ik niks aan aanpassen)
Vervolgens moet dat plaatje geupload worden,
op de aankomst locatie moet er weer een 'echt' plaatje van gemaakt worden
(het is prima als de javascript het plaatje eerst encodeert en de php weer decodeert, dat maakt mij niet uit, zolang het resultaat plaatje maar klopt)
de code die ik tot nu toe heb is: (met behulp van jquery)
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
<!--
var imgurl="./img/1.png" ;
$.ajax({
url: imgurl
}).done(function ( data ) {
var url="./saveimg.php";
var xhr=new XMLHttpRequest();
xhr.open("POST", url, true);
var boundary = '---------------------------';
boundary += Math.floor(Math.random()*32768);
boundary += Math.floor(Math.random()*32768);
boundary += Math.floor(Math.random()*32768);
xhr.setRequestHeader("Content-Type", 'multipart/form-data; boundary=' + boundary);
var body = '';
body += '--' + boundary + '\r\n' + 'Content-Disposition: form-data; name="';
body += "data";
body += '"; filename="data.png"\r\n\r\n';
body += data;
body += '\r\n'
body += '--' + boundary + '--';
xhr.setRequestHeader('Content-length', body.length);
xhr.send(body);
});
-->
</script>
Deze code lijkt best aardig te werken, maar ergens verandert er blijkbaar iets aan de data.
Dat heeft tot gevolg dat het opgeslagen plaatje 1,5 keer zo groot is als het origineel en vervolgens ook nog eens niet werkt.
De echte vraag is dus of iemand een idee heeft hoe dit probleem op te lossen is, zodat het echte plaatje wel werkt.
Het plaatje moet via de javascript code gaan, want die plaatjes worden per IP en per request uniek gegenereerd.
Het uiteindelijke doel is om dit script via greasemonkey te draaien, dus dan is er geen probleem met wel of niet naar een externe server connecten (maar dat maakt voor het probleem geen verschil).
Met vriendelijke groet, en alvast erg bedankt voor alle hulp!
Rik
Testjes ivm asynchroon uploaden heb ik gedaan via dit soort code:
http://www.sitepoint.com/html5-file-drag-and-drop/
http://webihawk.blogspot.be/2011/10/html5-file-upload-with-drag-drop.html
Gewijzigd op 10/07/2012 12:13:34 door Kris Peeters