JavaScript는 API v2를 사용하여 Dropbox에 base64 이미지 데이터를 입력합니다.

Question

현재 Dropbox를 사용하는 웹 앱용 기능을 개발 중이며 조금 익숙합니다. 이 기능에는 HTML 5 캔버스를 사용하고 캔버스 이미지를 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; 
}