Oracle APEX 23.2より新しい
アイテム・タイプとして
イメージ・アップロードが追加されました。今までは画像をアップロードするには、
アイテム・タイプとして
ファイル参照...（APEX 23.2よりタイプ名が
ファイルのアップロードに変わっています）を選んでいました。
アイテム・タイプとしてイメージ・アップロードを選ぶと、画像に特化した機能として、アップロードする画像のプレビュー、アップロード前のサイズ変更およびトリミングを行うことができます。また、モバイル・デバイスを対象としてセルフィ・カメラまたはメイン・カメラの起動も可能です。
トリミングを有効にしたイメージのアップロードの操作例です。
アップロードする画像を選択するページ・アイテムのタイプをイメージ・アップロードにすると、プロパティとしてサイズ変更とトリミングを指定できるようになります。
サイズ変更の効果を確認してみます。最大ファイル・サイズに200を指定します。トリミングの許可はオフにします。
以下のJPEGファイルリス.jpgをアップロードします。
ファイル・サイズは833KB、画像サイズは3024x4032です。
% file リス.jpg
リス.jpg: JPEG image data, JFIF standard 1.01, aspect ratio, density 72x72, segment length 16, Exif Standard: [TIFF image data, big-endian, direntries=13, manufacturer=Apple, model=iPhone 13 Pro Max, orientation=upper-left, xresolution=194, yresolution=202, resolutionunit=2, software=16.5, datetime=2023:06:24 13:39:32, hostcomputer=iPhone 13 Pro Max], baseline, precision 8, 3024x4032, components 3
アップロードするファイルとしてリス.jpgを選択すると、192.26KBと表示されます。最大ファイル・サイズの指定に従って、ファイルが縮小されます。
アップロードしたファイルを再度ダウンロードして、fileコマンドで画像を確認します。画像サイズは715x954に変わっています。
% file リス.jpg
リス.jpg: JPEG image data, JFIF standard 1.01, aspect ratio, density 1x1, segment length 16, baseline, precision 8, 715x954, components 3
サイズ変更の最大幅に400px、最大高に400pxを指定します。
同様にリス.jpgをアップロードします。今度は52.47KBとなります。
アップロードしたファイルを再度ダウンロードして、fileコマンドで画像を確認します。画像のサイズが300x400になっていることが確認できます。
% file リス.jpg
リス.jpg: JPEG image data, JFIF standard 1.01, aspect ratio, density 1x1, segment length 16, baseline, precision 8, 300x400, components 3
サイズ変更については、画像フォーマットがJPEGとPNGの両方で機能します。
APEX 23.2では、
トリミングを有効にすると、アップロードされる画像の形式がPNGに変わります。元画像がJPEGの場合、ファイル・サイズが極端に大きくなる場合があります。トリミングに使用している
Cropper.jsのKnown Issuesとなっており、現行のAPEX 23.2で不具合として認識されています。
を
オンにし、
アスペクト比として
1:1(正方形)を指定します。
サイズ変更は
すべて空白にします。
今までと同様に、リス.jpgをアップロードします。画像のファイル・サイズが833KBから8.99MBに膨れ上がります。
トリミングを実施してアップロードすると、画像フォーマットはPNGになります。しかし、ファイル名とMIMEタイプはアップロード時の情報が設定されます。そのため、ファイルの実情とは合わなくなります。
トリミングの許可をオンにする場合は、ストレージのMIMETYPE列およびファイル名列の扱いに注意が必要です。
アップロードしたファイルを再度ダウンロードして、
fileコマンドで画像を確認します。画像フォーマットがPNGに変わっていることが確認できます。
% file リス.jpg
リス.jpg: PNG image data, 2443 x 2443, 8-bit/color RGBA, non-interlaced
サイズ変更の指定は、トリミングを有効にしても適用されます。最大ファイル・サイズを200、最大幅を400px、最大高を400pxとし、リス.jpgをアップロードします。
最大ファイル・サイズが適用され、ファイル・サイズが
190.94KBに縮小されます。
fileコマンドで確認すると、画像フォーマットはPNGのまま縮小されていることが確認できます。画像のサイズは299 x 299になっています。
% file リス.jpg
リス.jpg: PNG image data, 299 x 299, 8-bit/color RGBA, non-interlaced
トリミングを行う場合は、意図しないファイル・サイズの膨張を防ぐためにサイズ変更の設定が推奨されます。また、アップロードする画像の用途に依存しますが、極端に画像が小さくならないよう、最大ファイル・サイズよりは最大幅、最大高が有効と考えられます。
以上が、APEX 23.2の新しいアイテム・タイプ - イメージ・アップロードの注意点になります。
動作の確認に使用したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/new-image-upload-item-232.zip
対話モード・レポートの列のタイプとしてイメージの表示を選択したときに、表示する画像のサイズを指定する方法を見つけられませんでした。
そのため、列CONTENTの静的IDとしてiu-imageを設定し、CSSを定義しています。
CSSはページ・プロパティのCSSのインラインに以下を記述しています。
td[headers="iu-image"] img {
width: 100px
}
以上になります。
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
