obnizのフォーラムは新しいシステムに移行しております。

新しいフォーラムはこちらになります

JpegSerialCamの画像をdropboxにupload



  • 標記の件、チュートリアルに JpegSerialCamの画像を WEBに表示するというのがあったので これをベースに ボタンを押すと 画像を dropboxにuploadさせたいのですが

    var obniz = new Obniz("-");
    var dbx = new Dropbox.Dropbox({ accessToken: '********-*******************************************************' });
    obniz.onconnect = async function () {

    var cam = obniz.wired("JpegSerialCam", {vcc:0, cam_tx:1, cam_rx:2, gnd:3});
    await cam.startWait({baud: 57600});
    await cam.setSizeWait("640x480");

    await cam.takeWait(); // baud is already changed to 57600.

    const jpegData = await cam.takeWait();
    document.getElementById("image").src = "data:image/jpeg;base64," + cam.arrayToBase64(jpegData);
    
    obniz.switch.onchange = function(state) {
    $('#print').text(state);
    obniz.display.clear();
    obniz.display.print(state);
    

    }
    $('#SAVE_PIC').click(function () {

    dbx.filesUpload({path: '/pic.jpg', contents: cam.arrayToBase64(jpegData), mode: 'overwrite' })
    

    obniz.display.clear();
    obniz.display.print("SAVE");
    });
    }

    とすると 当たり前ですが Base64でエンコされるため uploadされたファイルは 画像としては表示できません。

    Base64を外して

        dbx.filesUpload({path: '/pic.jpg', contents: jpegData, mode: 'overwrite' })
    

    とすると
      undefined
    で進みませんでした。

    申し訳ございませんが JpegSerialCamの画像をdropboxにuploadする方法を教えていただけませんでしょうか



  • @a-take

    jpegDataですが、配列変数となっております。
    dropboxのドキュメントにはcontentsとしては"Objectを入れる"となっていて曖昧なのですが、Blobに変換することでアップロードが可能なようです。

    jpegData = new Blob(jpegData);
    

    var myArr = new Uint8Array(jpegData);
    jpegData = new Blob(myArr, {type: "octet/stream"});
    

    などで一度試してみて下さい。

    以下参考にしたサイトです
    https://stackoverflow.com/questions/34399049/dropbox-direct-upload-files-from-browser
    https://stackoverflow.com/questions/36985406/javascript-save-typed-array-as-blob-and-read-back-in-as-binary-data



  • コメントありがとうございます。

    Blob やってみましたが TypeError となります。
    参考のサイト見ながら 色々やっていますが 進展なしといったところです。

    難しいことをやってるつもりはないのですが....如何せん資料が少なすぎてお手上げです。



  • @a-take こちらでも実際に動かしてみたところ、確かにBlobだとだめでした。
    Uint8Arrayのままcontentsに入れた場合uploadに成功しましたので、以下お試し下さい。

    var myArr = new Uint8Array(jpegData);
    dbx.filesUpload({path: '/pic.jpg', contents: myArr, mode: 'overwrite' })
    


  • 度々のご支援ありがとうございます。
    コメント頂いた2行で やっと画像のuploadに成功しました。

    ただ、実は この2行を追加しても
    undefined
    となって uploadできないまま終了していたのですが、
    結局 Drop-boxの accessTokenを再Generateすると
    前回とは違うaccessTokenが発行され、これをプログラムに書き込んだ所 無事 uploadできた次第です。
    (ご回答頂いた後 1wk 散々悩んで まさかの結果)

    PS 接近センサと組み合わせて 自動撮影を計画中です



  • @a-take そうだったのですね!動いてよかったです。
    近接センサ+自動撮影は面白そうですね。ぜひ完成されたら教えて下さい!



SUGGESTED TOPICS