2

画像を Dropbox に保存しようとしていますが、正しく変換できません。img (このサンプルを使用してキャプチャ) があり、それを ArrayBuffer を受け入れるドロップボックスに保存したい (サンプルはこちら)

これは、最初に base64 に、次に ArrayBuffer に 2 つの変換を行う必要があることがわかったコードです。

    function getBase64Image(img) {
    // Create an empty canvas element
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // Get the data-URL formatted image
    // Firefox supports PNG and JPEG. You could check img.src to
    // guess the original format, but be aware the using "image/jpg"
    // will re-encode the image.
    var dataURL = canvas.toDataURL("image/png");

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

function base64ToArrayBuffer(string_base64) {
    var binary_string = window.atob(string_base64);
    var len = binary_string.length;
    var bytes = new Uint8Array(len);
    for (var i = 0; i < len; i++) {
        var ascii = binary_string.charCodeAt(i);
        bytes[i] = ascii;
    }
    return bytes.buffer;
}

こんな感じで保存開始

     var img = $('#show-picture')[0];
    var data = base64ToArrayBuffer( getBase64Image(img));
    dropbox.client.writeFile(moment().format('YYYYMMDD-HH-mm-ss')+'.png', data, function (error, stat) {
        if (error) {
            return dropbax.handleError(error);
        }
        // The image has been succesfully written.
    });

問題は、破損したファイルが保存され、何が問題なのか少し混乱していることです。

*編集*

元のファイル https://www.dropbox.com/s/ekyhvu2t6d8ldh3/original.PNGへのリンクと、破損したファイルへのリンクを次に示します。https://www.dropbox.com/s/f0oevj1z33brpur/20131219-22-23-14.png

このバージョンの dropbox.js を使用しています: //cdnjs.cloudflare.com/ajax/libs/dropbox.js/0.10.2/dropbox.min.js

ご覧のとおり、破損したファイルは 23.3KB と 32.6KB でわずかに大きくなっています

ラルシ

4

1 に答える 1

0

これは最新の Datastore JS SDK では機能するようですが、おそらく dropbox.js 0.10.2 では機能しないようです。

Dropbox ライブラリのブラウザとバージョンは？保存された画像の何が問題になっていますか? （「破損」とは、使用しているどのツールでも開かないことを意味すると思います...これ以上のヒントはありますか？ファイルサイズは妥当ですか？）非常によく似たテスト（toDataURL、atob、およびUint8Array）を実行しました) OS X および dropbox.com/static/api/dropbox-datastores-1.0-latest.js 上の Chrome で動作するようです。

于 2013-12-20T17:04:37.233 に答える