이미지 저장은 내 보관함에 이미지 (PNG)로 캔버스에 데이터를 기록하기 위해 노력하고있어 캔버스

Question

의 데이터로 보관합니다. 나는 캔버스에서 데이터를 얻을 수 및 보관에 파일을 저장 관리 할 수 ​​있지만 파일은 솔기 이미지 파일이 아닙니다. 화상 데이터가 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!'); 
    } 
}); 

다음은 일부 보관 용 계정입니다.

Answer 1

https://github.com/dropbox/dropbox-js/blob/stable/guides/snippets.md은 결국 일을있어! 문자열에서; ', 64 기수를 이미지/PNG 데이터'그리고 일을 내가 bufferArray과를 제거하는 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!'); 
    } 
});