如何使用 ajax 将 gif 图像保存到 imgur api答案

【问题标题】：How to save gif images to imgur api using ajax如何使用 ajax 将 gif 图像保存到 imgur api
【发布时间】：2019-04-30 16:12:32
【问题描述】：

我正在尝试使用 ajax 在 imgur 服务器上上传 gif 图像。代码适用于 png 和 jpg。但是当我尝试附加 gif 图像时，它会给我 png 文件 URL 作为响应。下面是代码

 image.onload = function() {


                var MAX_WIDTH = 500;
                var MAX_HEIGHT = 500;
                var tempW = image.width;
                var tempH = image.height;
                if (tempW > tempH) {
                    if (tempW > MAX_WIDTH) {
                        tempH *= MAX_WIDTH / tempW;
                        tempW = MAX_WIDTH;
                    }
                } else {
                    if (tempH > MAX_HEIGHT) {
                        tempW *= MAX_HEIGHT / tempH;
                        tempH = MAX_HEIGHT;
                    }
                }
                var canvas = document.createElement("canvas");
                canvas.width = tempW;
                canvas.height = tempH;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(this, 0, 0, tempW, tempH);
                dataURL = canvas.toDataURL();
                dataURL = dataURL.replace(/^data:image\/(png|jpg|gif);base64,/, "");

                $.ajax({
                    url: 'https://api.imgur.com/3/image',
                    type: 'post',
                    headers: {
                        Authorization: 'Client-ID *************'
                    },
                    data: {
                        image: dataURL
                    },
                    dataType: 'json',
                    error: function(response) {

                        console.log(response);

                    },
                    success: function(response) {
                        if (response.success) {
                            console.log(response.data.link);

                            $('#snippet_image').val(response.data.link);
                        }
                    }
                });
            }

我试过了，我已经添加了带有 png|jpg 的 gif，如下所示

dataURL = dataURL.replace(/^data:image\/(png|jpg|gif);base64,/, "");

【问题讨论】：

标签： javascript jquery ajax imgur

【解决方案1】：

您好，您的 ajax 示例中缺少 multipart/form-data、mime 类型：

html:

<form id="imgur">
  <input type="file" class="imgur" accept="image/*" data-max-size="5000"/>
</form>

js:

$("document").ready(function() {

  $('input[type=file]').on("change", function() {

    var $files = $(this).get(0).files;

    if ($files.length) {

      // Reject big files
      if ($files[0].size > $(this).data("max-size") * 1024) {
        console.log("Please select a smaller file");
        return false;
      }

      // Begin file upload
      console.log("Uploading file to Imgur..");

      // Replace ctrlq with your own API key
      var apiUrl = 'https://api.imgur.com/3/image';
      var apiKey = 'ctrlq';

      var settings = {
        async: false,
        crossDomain: true,
        processData: false,
        contentType: false,
        type: 'POST',
        url: apiUrl,
        headers: {
          Authorization: 'Client-ID ' + apiKey,
          Accept: 'application/json'
        },
        mimeType: 'multipart/form-data'
      };

      var formData = new FormData();
      formData.append("image", $files[0]);
      settings.data = formData;

      // Response contains stringified JSON
      // Image URL available at response.data.link
      $.ajax(settings).done(function(response) {
        console.log(response);
      });

    }
  });
});

源代码：link

希望对你有帮助

【讨论】：