新規投稿
フォローする

画像を添付ファイルとして保存する際のリサイズ(縮小)方法について

いつもお世話になっております。

JavaScript初心者です。

新規登録画面('app.record.create.show')において、まだ、recordとして保存する前の状態で、画像を添付ファイルとして参照し、recordとして保存する際(前後)に(画像サイズが大きいため)リサイズ(縮小)して保存する方法があれば、教えていただきたく、よろしくお願いします。

0

6件のコメント

Avatar
akatak

失礼しました。以下の方法で自己解決しました。

フォームのスペースにcanvasを描画し、そのスケールを調整しておく。 'app.record.create.submit.success'のevent時にcanvasから作成したファイルをPUTする。

以下を参考にさせていただきました。

https://developer.cybozu.io/hc/ja/community/posts/360022107131

https://developer.cybozu.io/hc/ja/community/posts/360017979846-Cropper%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%83%88%E3%83%AA%E3%83%9F%E3%83%B3%E3%82%B0%E3%82%92%E3%81%97%E3%81%AA%E3%81%8C%E3%82%89%E7%94%BB%E5%83%8F%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89

https://stackoverflow.com/questions/38004917/how-to-render-a-blob-on-a-canvas-element/38005270

 

1
Avatar
juridon

'app.record.create.show'
では新規登録画面表示のタイミングなので、添付したファイルのリサイズは難しいかなと思います。

保存前('app.record.create.submit')のタイミングでは
添付ファイルフィールドの情報を取得できないようなので添付したファイルをいじるのは難しいかなと思います。
https://developer.cybozu.io/hc/ja/articles/201941984#step2


自動でリサイズしてファイルを保存したいなら、
保存後(app.record.create.submit.success)とかに
REST APIでアップロード後のファイルをダウンロードしてリサイズしてアップロードし直すのがいいかなぁ。。。
と思いますが、アプリ自体履歴を残さない設定にしていないとリサイズ前の大きなファイルもkintone上に残ってしまいます。
また、カスタマイズの難易度も高いですし、初心者の方がカスタマイズするとなると工数が膨大になりそうな気もします。

そこでお聞きしたいのですが、カスタマイズではないといけない理由はありますでしょうか?
前もってファイルサイズを一括で縮小できるようなソフトなどを導入してみるのが一番ラクなのではと思いますがいかがでしょうか??
他にもカスタマイズせずに、知恵でなんとかする・・・みたいな方法もあるかも知れません。
そういった相談事の場合は、もしかすると
キンコミ」というコミュニティでディスカッションされてみるのもいいかも知れません。

参考になればと思います👀💦

1
Avatar
juridon

akatak

コメントを書いている間に自己解決されたみたいで、良かったです✨✨

0
Avatar
akatak

すみません。juridonさん、コメントありがとうございます。実はGCPのOCR機能を使って、その結果を画像とともに保存することをやろうとしていて、OCRを利用する時は画像の解像度が大きいものを使って、保存する際には画像の容量を小さくして保存することをしたいと思っていました。

ただし、canvas.getContext("2d").scale()を使っており、保存はされるんですが、画像全体が縮小されるのではなく、一部が切り取られて保存するようになってしまい、現在格闘中です(汗)

akatakにより編集されました
0
Avatar
juridon

OCR、、それは大きいファイルですね!

>canvas.getContext("2d").scale()を使っており、保存はされるんですが

うまくいきそうな方向に行っているように思います!
もしかしたらもう試されたかも知れませんが、
↓この記事参考になるかも知れません。
https://qiita.com/geekduck/items/2db28daa9e27df9b861d

うまくいくよう祈っております。

1
Avatar
akatak

juridonさん、参考記事情報ありがとうございます。無事に対応できました!

ご協力ありがとうございました。

1
サインインしてコメントを残してください。