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する方法を教えていただけませんでしょうか


  • administrators

    @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 となります。
    参考のサイト見ながら 色々やっていますが 進展なしといったところです。

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


  • administrators

    @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 接近センサと組み合わせて 自動撮影を計画中です


  • administrators

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


 

Recent Projects

  • @nak435 かしこまりました。よろしくお願いします。

    read more
  • @Yuki-Sato さん、

    外部の3.3vを使うとはいえ普通にvccやgndを供給して問題なくうごくのであれば、弊社での動作確認後Flick Hatのライブラリとして公開できればと思っているのですがいかがでしょう。

    今週末に確認しますので、お待ちください。

    read more
  • @nak435 時間がかかってすいません、

    なんとか3.3vをgndにつないでFlick Largeを動かしたかったのですが、うまく動かすことができなかったです。
    3.3vをgndを繋がずに接続するというのはライブラリで推奨して伝えることは難しいと思ってます。

    Flick LargeでなくFlick Hatの方で、外部の3.3vを使うとはいえ普通にvccやgndを供給して問題なくうごくのであれば、弊社での動作確認後Flick Hatのライブラリとして公開できればと思っているのですがいかがでしょう。

    よろしくお願い致します。

    read more
  • @nak435 ありがとうございます。
    接続は3.3vのgnd以外同じでした。
    エラーはそのせいかもしれませんが、しかし電気的にはgndを繋がない場合3.3vとしてうまく供給できないはずなのでそこが不思議です。

    教えていただいたプログラムの部分を修正して試してみたいと思います。
    また少し時間がかかりそうなのですが、早めに試したいと思います。

    引き続きよろしくお願い致します。

    read more