JavaScript使用API​​ v2将base64图像数据写入Dropbox

Question

我目前正在使用Dropbox处理网络应用的功能，而且我有点新手。该功能涉及使用HTML 5 Canvas进行一些图像编辑并将画布图像保存到Dropbox。

我想要做的是将画布图像转换为base64图像数据，并仅在客户端使用JavaScript直接写入Dropbox。

由于Dropbox API v1现已弃用，我试图在v2中实现此功能。

我已经完成了一些挖掘，但我发现的大部分示例都是在版本1 API中使用writeFile方法，如下所示： Save image to dropbox with data from canvas

所以我想知道如何使用v2 API？

先谢谢。

Answer 1

希望这有助于将来。

你需要这样的东西

var canvas = document.getElementById("paint");

然后

  function uploadFile() {
  var ACCESS_TOKEN = "xxx";
  var dbx = new Dropbox({
    accessToken: ACCESS_TOKEN
  });
  var fileInput = document.getElementById('file-upload');
  var file = fileInput.files[0];


  //Get data from canvas
  var imageSringData = canvas.toDataURL('image/png');
  //Convert it to an arraybuffer
  var imageData = _base64ToArrayBuffer(imageSringData);


  dbx.filesUpload({
      path: '/' + "test.png",
      contents: imageData
    })
    .then(function(response) {
      var results = document.getElementById('results');
      results.appendChild(document.createTextNode('File uploaded!'));
      console.log(response);
    })
    .catch(function(error) {
      console.error(error);
    });
  return false;
}



function _base64ToArrayBuffer(base64) {
  base64 = base64.split('data:image/png;base64,').join('');
  var binary_string = window.atob(base64),
    len = binary_string.length,
    bytes = new Uint8Array(len),
    i;

  for (i = 0; i < len; i++) {
    bytes[i] = binary_string.charCodeAt(i);
  }
  return bytes.buffer;
}