前提
Webアプリ
Vuejsで開発
Firebaseをバックエンドとして使用
実現したいこと
Canvas or Blob のリサイズ方法について伺いたいです。
現状は以下のような処理の流れを実装しています。
アップロード前にリサイズ処理を行いたいのですが、実現方法が分からずにいるので解決したいです。
リサイズ後は、twitterカードの画像として使用したいので、
比率=1.91:1
最小サイズ=600×314
を満たすサイズとしたいです。
また、元画像の縦横比は維持し、はみ出しも無くしたい(全てが収まるようにしたい)です。
上記のようなリサイズを canvas か blob にかけたいです。
実装方法やよく使われるライブラリなどがございましたら、ご教授いただけると幸いです。
(参考)jsの実装
画像化対象をcanvas化し、blobにしてアップロード処理に渡す
// 画像化処理 // https://html2canvas.hertzen.com/getting-started html2canvas(document.getElementById('imageTarget')).then(canvas => { canvas.toBlob((blob) => { this.uploadImageToFirebaseStorage(ref.id, blob) }) }).catch(error => { console.log(error) this.applyErrorUI() })
blobをアップロード
// 画像アップロード処理 uploadImageToFirebaseStorage (postDataRefId, blob) { // https://firebase.google.com/docs/storage/web/upload-files?hl=ja const storageRef = firebase.storage().ref().child('hogeImages') const uploadTask = 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) }, _ => { // 省略 }) }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。