質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1339閲覧

【Webアプリ】canvas, blob のリサイズ方法について

bbdd

総合スコア43

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

2クリップ

投稿2018/11/18 07:11

前提

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) }, _ => { // 省略 }) }
s8_chu👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

#いくつか方法があると思いますが、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のオプションはこちらを参照してください
https://html2canvas.hertzen.com/configuration

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で実装する場合はそのまま使えないかもしれませんが、頑張ってみてください。

投稿2018/11/19 10:17

編集2018/11/20 00:58
mattari_panda

総合スコア429

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問