Sto tentando di utilizzare Javascript
per caricare un png
su imgur. Ho usato il codice direttamente dall'API Imgur example, ma non penso di passare il file PNG correttamente, ricevo un messaggio di errore che dice file.type is undefined
. Penso che il file sia ok visto che ho provato questo con alcuni png diversi. Il mio codice è il seguente:Caricamento di un file con imgur utilizzando javascript
<html>
<head>
<script type="text/javascript">
function upload(file) {
// file is from a <input> tag or from Drag'n Drop
// Is the file an image?
if (!file || !file.type.match(/image.*/)) return;
// It is!
// Let's build a FormData object
var fd = new FormData();
fd.append("image", file); // Append the file
fd.append("key", "mykey"); // Get your own key: http://api.imgur.com/
// Create the XHR (Cross-Domain XHR FTW!!!)
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://api.imgur.com/2/upload.json"); // Boooom!
xhr.onload = function() {
// Big win!
// The URL of the image is:
JSON.parse(xhr.responseText).upload.links.imgur_page;
}
// Ok, I don't handle the errors. An exercice for the reader.
// And now, we send the formdata
xhr.send(fd);
}
</script>
</head>
<body>
<button type="button" onclick="upload('test.png')">upload to imgur</button>
</body>
</html>
Il png
file di test.png
è memorizzato nella stessa directory come il mio file html.
Grazie per i suggerimenti. Per aggiungere un'immagine alla tela, è l'immagine 'id'? Immagino di non poterlo riferire usando il nome del file, basato sul commento di @ skimberk1. – djq
Non c'è modo di fare riferimento all'immagine usando il nome del file. Dovrai caricarlo su un elemento img e quindi caricarne il contenuto su una tela usando drawImage. È importante eseguire quest'ultima parte sul gestore di caricamento del file img. Altrimenti non funzionerà. –
Grazie bebraw, questo mi aiuta a capire il flusso. Sto facendo esperimenti con http://html2canvas.hertzen.com/ al momento; sembra che farà parte di questi passaggi. – djq