2012-02-12 2 views
6

Я пытаюсь использовать Javascript для загрузки png в imgur. Я использовал код непосредственно из Imgur API example, но я не думаю, что я передаю файл png должным образом, так как получаю сообщение об ошибке file.type is undefined. Я думаю, что файл в порядке, поскольку я пробовал это с помощью нескольких разных png. Мой код выглядит следующим образом:Загрузка png в imgur с помощью 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> 

png файл test.png хранится в том же каталоге, что и мой HTML-файл.

ответ

2

Пример, который вы используете, предполагает, что вы используете элемент ввода (type = file) для загрузки некоторого изображения. Попробуйте this example. Вы можете получить доступ к данным изображения, используя Canvas like this.

Итак, вам нужно сделать следующее:

  1. Создать новую картинку с файлом (должен быть на локальном домене)
  2. Нарисуйте изображение на холсте в OnLoad
  3. Extract данные изображения с использованием this method
  4. Pass, что данные Imgur like here
+0

Спасибо за предложения. Чтобы добавить изображение в холст, это изображение 'id'? Я предполагаю, что не могу ссылаться на него, используя имя файла, на основе комментария @ skimberk1. – djq

+0

Невозможно ссылаться на изображение, используя имя файла. Вам нужно будет загрузить его в элемент img, а затем загрузить его содержимое в холст с помощью drawImage. Важно сделать эту последнюю часть в обработчике нагрузки img. Иначе это не сработает. –

+0

Спасибо bebraw, что помогает мне понять поток. Я экспериментирую с http://html2canvas.hertzen.com/ на данный момент; похоже, что он сделает часть этих шагов. – djq

3

Файл должен быть File объектом, созданным с помощью файла HTML5 файла HTML5, вы не можете просто указать ему имя файла и ожидать его работы.

Javascript не имеет доступа к файловой системе, он может обращаться к файлам, которые предоставляются ему с помощью перетаскивания или ввода файла.

Смежные вопросы