使用畫布中的數據將圖像保存到保管箱

Question

我正在嘗試將畫布數據作為圖像（png）寫到我的保管箱。 我設法從畫布上獲取數據並將文件保存到保管箱，但該文件不是它接縫的圖像文件。

根據文檔，圖像數據應轉換為arrayBuffer。 我正在使用在Stackoverflow上找到的功能，但似乎無法正常工作。 有人知道我在做什么錯嗎？

function _str2ab(str) {
    var buf = new ArrayBuffer(str.length*2); // 2 bytes for each char
    var bufView = new Uint16Array(buf);
    for (var i=0, strLen=str.length; i<strLen; i++) {
        bufView[i] = str.charCodeAt(i);
    }
    return buf;
}

function _savePicture () {

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

    client.writeFile('/Public/the_image.png', imageData, function(error, stat) {
    if (error) {
        console.log('Error: ' + error);
    } else {
        console.log('File written successfully!');
    }
});

這是一些保管箱文檔。 https://github.com/dropbox/dropbox-js/blob/stable/guides/snippets.md

Answer 1

終於可以工作了！ 我使用了另一個函數將base64轉換為bufferArray並從字符串中刪除了'data：image / png; base64'，並且可以正常工作。 希望這會在將來對其他人有所幫助。

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;
}

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

    client.writeFile('/Public/the_image.png', imageData, function(error, stat) {
    if (error) {
        console.log('Error: ' + error);
    } else {
        console.log('File written successfully!');
    }
});