GCPのstorageに保存した画像を取得し、そのまま再アップロードする方法

Question

実現したいこと

javascriptでWEBからGCPのstorageに保存した画像を取得し、そのまま画像を再アップロードしたいです。

抱えている課題

GCPのstorageに保存した画像のURLは取得できている状態ですが、そのURLの情報から画像としてStorageへ再アップロードする方法が分かりません。

試したことと結果

まず、元々のアップロードは、以下のようにオーソドックスなfile形式で画像をローカルのPCのディスクから選択し、
FileListへ入れてアップロードしています。

・htmlファイル

<input type="file" name="datafile" id="logo-img-input"">

・JSファイル

let files = document.getElementById('logo-img-input').files;
let image = files[0];
let file_path = "xxx.jpg";
///画像アップロード
let ref = firebase.storage().ref().child(file_path);
ref.put(image, metadata).then(function(snapshot) {
    alert('アップロードしました');
});

ではこのアップロードした画像を次に取得する方に関して、
まず上記コードでは省略していますが、httpから始まるURLを事前に取得してDBに保存してあり、
現状はDBから直接読んでいるので、画像までのURLは持っている状態です。
こちらのURLより、再度画像を取得し、そのまま特に画像には手を加えずアップロードができる状態にしたいです。

試したこととしては、今はファイル形式のinputのパターンをそのまま再現すればコードもそのまま使用できるため都合が良いと考え、仮に今このURLを
https://storage.cloud.google.com/xxx.jpg
とすると、

JSファイル

/// fileを作成
let file = new File([], 'https://storage.cloud.google.com/xxx.jpg',
{
    lastModified: new Date(2017, 1, 1),
    type: "image/jpeg",
});

///FileListの形式にする
const dt = new DataTransfer();
dt.items.add(file);
const fileList = dt.files;
console.log("fileList : ", fileList);

let image = fileList[0];
let file_path = "xxx.jpg";
///画像アップロード
let ref = firebase.storage().ref().child(file_path);
ref.put(image, metadata).then(function(snapshot) {
    alert('アップロードしました');
});

としても、FileListの出力が以下のようにsizeが0になってしまって、うまく取り込めていないようです。
（inputから画像を入れた時は、これとの差分はsizeにファイルサイズ（バイト数）が入っていることくらいしかなさそうでした。）

File {name: "https://storage.cloud.google.com/xxx.jpg", lastModified: 1485874800000, lastModifiedDate: Wed Feb 01 2017 00:00:00 GMT+0900 (日本標準時), webkitRelativePath: "", size: 0, …}

lastModified: 1485874800000
lastModifiedDate: Wed Feb 01 2017 00:00:00 GMT+0900 (日本標準時) {}
name: "https://storage.cloud.google.com/xxx.jpg"
size: 0
type: "image/jpeg"
webkitRelativePath: ""
proto: File

また、念のためアップロードされたファイルを見てみても、一応jpgファイルとして扱われているようですが、ファイルサイズが0KBで保存されており、DLしてもからの異常なファイル扱いで表示されませんでした。

Blob形式を使えば何とかできるのかもしれないとは思ったのですが、
Blobの取り扱いをしたことがなく、GCP Storageの画像情報をどう扱えば良いのかよく分かりませんでした。

一方で、imgタグのimg.srcに上記のパスを入れると正しく画像が表示されることは確認できました。
例えばこのimgタグから、inputしてFileListへ追加するようなことができても解決となりますが、その方法もよく分かりませんでした。

背景

一応上記のようなことを行いたい背景としては、現在アカウント登録/管理のシステムを作っていて、
初めに一度画像を登録したあとに、登録した情報を編集する際、画像自体も編集する場合は新しいもので登録するだけなので良いのですが、画像以外の情報を更新して、画像には変更がない場合は前回のものをそのままアップロードして最新のデータとする。といった仕組みにしたいと考えております。

こちらずっと解決できず、どなたか解決策がお分かりになる方がいらっしゃいましたら、
大変お手数ですが、ご教授いただけると大変助かります。

Answer 1

まったく何も試しておりませんが、

var img = document.getElementById('myimg');

で参照できるようにして、btoa などでバイト列に変換し、
https://firebase.google.com/docs/storage/web/upload-files?hl=ja
の バイト配列からアップロードする、とかはどうでしょうか。

Comments

[KU112]

68userさん
ありがとうございます！大変助かります！
btoaの使い方はまだ良く分かっていませんが、色々と触ってみようと思います！

[68user]

あと、img を base64 化するサンプルはネット上にいろいろあるようなので (Canvas を用いたもの)、
https://firebase.google.com/docs/storage/web/upload-files?hl=ja
の Base64 formatted string や Data URL string は容易に作れるのではないかと思いました。

[KU112]

なるほどです。こちらの文字列の方でも画像が扱えるのですね。
（ここは画像は関係ないと勘違いしておりました。。）
チャレンジしてみます。本当にありがとうございますm(_ _)m

[KU112]

うーん、この方の記事などを見ているのですが、canvas -> base64の変換はあるのですがimgをBase64にする方法が分からず。。。
https://qiita.com/0829/items/a8c98c8f53b2e821ac94

[68user]

こちらは使えませんでしょうか。

https://shanabrian.com/web/javascript/image-to-base64-string.php

[KU112]

ありがとうございます！試してみます！