質問: storageRef.child(postDataRefId + '.jpg').put(blob) uploadTask.on('state_changed', (snapshot) => { switch (snapshot.state) { case 'paised': console.log('Upload is paused') break case 'running': console.log('Upload is running') break } }, (error) => { console.log(error) }, _ => { // 省略 }) } ```
回答: いくつか方法があると思いますが、2つ紹介します ======================= 1. Canvasに変換する前にリサイズする 2. Canvasに変換後一度画像にしてリサイズする ざっくり実装してみたのですが、どちらも手間はほとんど変わらないと思いますので、 お好きな方法を選ぶと良いと思います。 ※実際に製品としてつかうには、どちらも画面解像度(Retina対応とか)で工夫が必要になると思います。 ### 1. Canvasに変換する前にリサイズする デモ https://codepen.io/mattari-panda/pen/GwMEVP 手順としては、 1. 画像化したい要素をクローンしてappendする(appendしないとhtml2canvasで変換できない) 2. クローンした要素をCSSでリサイズ 3. html2canvasのオプションを設定して、リサイズしたCanvasに変換 4. CanvasをBlobで画像に変換 html2canvasのオプションはこちらを参照してください ### 2. Canvasに変換後一度画像にしてリサイズする デモ https://codepen.io/mattari-panda/pen/dQVmZz こちらの手順は 1. 画像化したい要素をhtml2canvasでCanvasに変換 2. 一度CanvasをBlobで画像に変換 3. リサイズ用のCanvasを新規で生成 4. `drawImage`でリサイズしつつCanvasに先程の画像をDrawする 5. リサイズされたCanvasをBlobで画像に変換 両方共、Vueで実装する場合はそのまま使えないかもしれませんが、頑張ってみてください。