Cargando un png a imgur usando javascript

Estoy tratando de usar Javascript para cargar un png en imgur. He usado el código directamente desde Imgur API example, pero no creo que esté pasando correctamente el archivo png, ya que recibo un mensaje de error que dice file.type is undefined. Creo que el archivo está bien, ya que he intentado esto con algunas png diferentes. Mi código es el siguiente:Cargando un png a imgur usando 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>

El archivo test.pngpng se almacena en el mismo directorio que mi archivo html.

Fuente

2012-02-12 djq

El ejemplo que está utilizando espera que use el elemento de entrada (tipo = archivo) para cargar alguna imagen. Pruebe this example. Puede acceder a los datos de imagen utilizando un Canvas like this.

En resumen, usted tiene que hacer esto:

crea una nueva imagen con el archivo (es necesario que haya en el dominio local)
dibujar la imagen a un lienzo en el proceso de carga
Extracto datos de imagen utilizando this method
pasar esos datos a Imgur like here

Fuente

2012-02-12 14:54:06

Gracias por las sugerencias. Para agregar una imagen al lienzo, ¿esa es la imagen 'id'? Supongo que no puedo referirme a él usando el nombre del archivo, basado en el comentario de @ skimberk1. – djq

No hay forma de referirse a la imagen usando el nombre del archivo. Tendrá que cargarlo en un elemento img y luego cargar su contenido en un lienzo utilizando DrawImage. Es importante hacer esta última parte en el controlador de carga de img. De lo contrario, no funcionará. –

Gracias bebraw, eso me ayuda a entender el flujo. Estoy experimentando con http://html2canvas.hertzen.com/ en este momento; parece que hará parte de estos pasos. – djq

El archivo tiene que ser un objeto File creado con el archivo HTML5 APIAP, no puede simplemente asignarle un nombre de archivo y esperar que funcione.

Javascript no tiene acceso al sistema de archivos, solo puede acceder a los archivos que se le asignan usando arrastrar y soltar o una entrada de archivo.

Fuente

2012-02-12 14:49:35 skimberk1

Cargando un png a imgur usando javascript

Respuesta

Cuestiones relacionadas