Firefox插件将画布内容上传到imgur

时间:2015-04-27 20:41:51

标签: javascript firefox-addon firefox-addon-sdk imgur

我在firefox中编写一个插件,自动将画布的内容发送到imgur。我已经在chrome中构建了一个类似的扩展,它按预期工作,所以我知道imgurs API的使用是正确的。当我在Firefox插件中使用相同的方法时,我总是得到这个回复:

{
"data": {
    "error": "Image format not supported, or image is corrupt.",
    "request": "/3/upload",
    "method": "POST"
},
"success": false,
"status": 400
}

我用它来提取图像数据并将其发送到imgur API:

Request({
   url: 'https://api.imgur.com/3/upload',
   contentType : 'json',
   headers: {
       'Authorization': 'Client-ID ' + imgurClientID
   },
   content: {
   type: 'base64',
   key: imgurClientSecret,
   name: 'neon.jpg',
   title: 'test title',
   caption: 'test caption',
   image: getImageSelection('image/jpeg').split(",")[1]
},
onComplete: function (response) {
    if (callback) {
       callback(response);
    } else {
         var win = window.open(response['data']['link'], '_blank');
         win.focus();
         closeWindow();
    }
}


}).post();

这用于从画布中获取选择并获取该选择的数据:

function getImageSelection(type) {
    //Create copy of cropped image
    var mainImageContext = mainImage.getContext('2d');
    var imageData = mainImageContext.getImageData(selection.x, selection.y, selection.w, selection.h);

    var newCanvas = tabDocument.createElement("canvas");
    newCanvas.width = selection.w;
    newCanvas.height = selection.h;

    newCanvas.getContext("2d").putImageData(imageData, 0, 0);

    return mainImage.toDataURL(type)
}

我已经尝试了一切:使用原始画布中的dataurl(mainImage),获取没有任何类型的dataUrl,这个:.replace(/^data:image\/(png|jpg);base64,/, "");

但imgur一直抱怨格式不好。

1 个答案:

答案 0 :(得分:1)

最后,事实证明Firefox插件SDK的Request模块的使用是错误的。

您必须使用contentType,而不是使用dataType来提供内容类型(例如jquery / ajax)。见下文:

Request({
        url: 'https://api.imgur.com/3/upload',
        dataType : 'json',
        headers: {
            'Authorization': 'Client-ID ' + imgurClientID
        },
        content: {
            type: 'base64',
            key: imgurClientSecret,
            name: 'neon.jpg',
            title: 'test title',
            caption: 'test caption',
            image: getImageSelection('image/jpeg', true)
        },
        onComplete: function (response) {
            response = JSON.parse(response.text);
            if (callback) {
                callback(response);
            } else {
                var win = window.open(response['data']['link'], '_blank');
                win.focus();
                closeWindow();
            }
        }
    }).post();