【LANSA Tips】Webページからアップロードする画像ファイルのリサイズ処理

World WideのLANSA技術フォーラムに投稿されたトピックと、日本のお客様からのお問い合わせへの回答の中から、皆様にお役に立つLANSAの開発テクニックやトラブルシュートに関する情報をご紹介します。

質問

Webページからサーバーモジュールに、アップロードする画像ファイルを、リサイズ(拡大・縮小)する方法を教えてください。

回答

LANSA自体には、画像ファイルをリサイズする処理はありませんが、ウィジェットを使用して、JavaScriptでリサイズが可能です。

以下は、ウィジェット、Webページ、サーバーモジュールのサンプルコードです。

 

■ウィジェットの定義

ウィジェットタイプ: コントロール

メソッド: ImgConv

パラメータ:

名前: strblob          タイプ: 文字列

名前: strWidth      タイプ: 文字列

イベント: AfterConv

パラメータ:

名前: ImgUrl         タイプ: 文字列

名前: type               タイプ: 文字列

ウィジェットの[定義]は下図のようになります。

■ウィジェットのソースコード

//—————————–

// WIDGET-METHOD IMPLEMENTATION

//—————————–

PROTOTYPE.ImgConv = function(strblob, strWidth )

{

var img = document.createElement(“img");

 

const imgReader = new Image();

const imgWidth = strWidth;

 

imgReader.onload = () => {

const imgType = imgReader.src.substring(5, imgReader.src.indexOf(';’));

const imgHeight = imgReader.height * (imgWidth / imgReader.width);

const canvas = document.createElement('canvas’);

canvas.width = imgWidth;

canvas.height = imgHeight;

const ctx = canvas.getContext('2d’);

ctx.drawImage(imgReader,0,0,imgWidth,imgHeight);

 

this.fireAfterConv(canvas.toDataURL(imgType), imgType);

}

imgReader.src = strblob;

return “";

}

 

■Webページのサンプルコード

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) Layoutmanager(#LayoutMain)

Define_Com Class(#PRIM_VS.Style) Name(#Style1) Borderbottom(3) Borderleft(3) Borderright(3) Bordertop(3)

Define_Com Class(#PRIM_TBLO) Name(#LayoutMain)

Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutMainColumn1) Displayposition(1) Parent(#LayoutMain)

Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow1) Displayposition(1) Parent(#LayoutMain) Height(50) Units(Pixels)

Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow2) Displayposition(2) Parent(#LayoutMain)

Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem1) Alignment(CenterLeft) Column(#LayoutMainColumn1) Manage(#FilePicker) Parent(#LayoutMain) Row(#LayoutMainRow1) Sizing(None) Flow(Right) Marginleft(20)

Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem3) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel1) Parent(#LayoutMain) Row(#LayoutMainRow2)

Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem2) Alignment(CenterLeft) Column(#LayoutMainColumn1) Manage(#UploadButton) Parent(#LayoutMain) Row(#LayoutMainRow1) Sizing(None) Flow(Right) Marginleft(20)

Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem4) Alignment(CenterLeft) Column(#LayoutMainColumn1) Manage(#STD_NUM) Parent(#LayoutMain) Row(#LayoutMainRow1) Sizing(None) Flow(Right) Marginleft(20)

Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem5) Alignment(CenterLeft) Column(#LayoutMainColumn1) Manage(#ウィジェット名) Parent(#LayoutMain) Row(#LayoutMainRow1) Sizing(None) Flow(Right) Marginleft(20)

Define_Com Class(#PRIM_TBLO) Name(#Layout)

Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn1) Displayposition(1) Parent(#Layout)

Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn2) Displayposition(3) Parent(#Layout)

Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem2) Alignment(TopCenter) Column(#LayoutColumn1) Manage(#Panel2) Parent(#Layout) Row(#LayoutRow1)

Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem1) Alignment(TopCenter) Column(#LayoutColumn2) Manage(#Panel3) Parent(#Layout) Row(#LayoutRow1)

 

Define_Com Class(#PRIM_TBLO) Name(#Layout1)

Define_Com Class(#PRIM_TBLO.Row) Name(#Layout1Row1) Displayposition(1) Parent(#Layout1)

Define_Com Class(#PRIM_TBLO.Column) Name(#Layout1Column1) Displayposition(1) Parent(#Layout1)

Define_Com Class(#PRIM_TBLO.Item) Name(#Layout1Item1) Alignment(TopLeft) Column(#Layout1Column1) Manage(#Image) Parent(#Layout1) Row(#Layout1Row1) Sizing(ContentWidthAndHeight) Flow(Down) Margintop(10) Marginleft(10)

 

Define_Com Class(#PRIM_TBLO) Name(#Layout2)

Define_Com Class(#PRIM_TBLO.Row) Name(#Layout2Row1) Displayposition(1) Parent(#Layout2)

Define_Com Class(#PRIM_TBLO.Column) Name(#Layout2Column1) Displayposition(1) Parent(#Layout2)

Define_Com Class(#PRIM_TBLO.Item) Name(#Layout2Item1) Alignment(TopLeft) Column(#Layout2Column1) Manage(#Image) Parent(#Layout2) Row(#Layout2Row1) Sizing(ContentWidthAndHeight) Flow(Down) Margintop(10) Marginleft(10)

Define_Com Class(#PRIM_TBLO.Item) Name(#Layout2Item2) Alignment(TopLeft) Column(#Layout2Column1) Manage(#ThumImage) Parent(#Layout2) Row(#Layout2Row1) Sizing(ContentWidthAndHeight) Flow(Down) Margintop(10) Marginleft(10)

Define_Com Class(#PRIM_TBLO.ColumnDivider) Name(#LayoutColumnDivider1) Displayposition(2) Parent(#Layout) Width(4)

Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow1) Displayposition(1) Parent(#Layout)

 

Define_Com Class(#PRIM_MD.FilePicker) Name(#FilePicker) Caption('ファイル選択’) Displayposition(2) Left(277) Parent(#COM_OWNER) Tabposition(1) Themedrawstyle('MediumTitle’) Top(7)

Define_Com Class(#PRIM_PANL) Name(#Panel1) Displayposition(3) Left(0) Parent(#COM_OWNER) Tabposition(2) Tabstop(False) Top(50) Height(750) Width(1200) Layoutmanager(#Layout)

Define_Com Class(#PRIM_PANL) Name(#Panel2) Displayposition(1) Left(0) Parent(#Panel1) Tabposition(1) Tabstop(False) Top(0) Height(750) Width(598) Horizontalscroll(True) Verticalscroll(True) Layoutmanager(#Layout1)

Define_Com Class(#PRIM_PANL) Name(#Panel3) Displayposition(2) Left(602) Parent(#Panel1) Tabposition(2) Tabstop(False) Top(0) Height(750) Width(598) Layoutmanager(#Layout2) Horizontalscroll(True) Verticalscroll(True)

 

Define_Com Class(#PRIM_IMAG) Name(#Image) Displayposition(1) Parent(#Panel2) Tabposition(1) Tabstop(False) Style(#Style1) Height(10) Width(10)

Define_Com Class(#PRIM_IMAG) Name(#ThumImage) Displayposition(1) Parent(#Panel3) Tabposition(1) Tabstop(False) Height(10) Width(10) Style(#Style1)

Define_Com Class(#ウィジェット名) Name(#ウィジェット名) Displayposition(5) Height(30) Left(517) Parent(#COM_OWNER) Tabposition(3) Tabstop(False) Width(23) Visible(False)

Define_Com Class(#PRIM_MD.RaisedButton) Name(#UploadButton) Caption('アップロード’) Displayposition(4) Left(397) Parent(#COM_OWNER) Tabposition(4) Themedrawstyle('MediumAccent’) Top(7)

Define_Com Class(#STD_NUM.Visual) Name(#STD_NUM) Componentversion(1) Displayposition(1) Height(30) Parent(#COM_OWNER) Tabposition(5) Top(10) Usepicklist(False) Width(237) Left(20) Caption('リサイズ横幅(ピクセル)’) Displayalignment(Right) Editalignment(Right) Labeltype(Caption)

 

* 元画像ファイル

Define Field(#UploadFile1) Reffld(#STD_BLOB)

* リサイズ画像ファイル

Define Field(#UploadFile2) Reffld(#STD_BLOB)

 

Evtroutine Handling(#COM_OWNER.Initialize)

#STD_NUM := 150

Endroutine

 

Evtroutine Handling(#FilePicker.FileSelected) File(#File)

 

#Image.FileName #ThumImage.FileName := *BLANKS

#UploadFile1 #UploadFile2 := *SQLNULL

 

* 画像以外の拡張子だった場合のエラーチェック

If Cond((#File.MimeType = 'image/jpg’) *Or (#File.MimeType = 'image/jpeg’) *Or (#File.MimeType = 'image/bmp’) *Or (#File.MimeType = 'image/gif’) *Or (#File.MimeType = 'image/png’) *Or (#File.MimeType = *BLANKS))

 

#Image.FileName := #File.Blob

#UploadFile1 := #File.Blob

 

* サムネ画像ファイルリサイズ

#ウィジェット名.ImgConv( #File.Blob #STD_NUM.AsString )

 

Else

#SYS_WEB.Alert Caption('画像ファイルではありません。’)

Endif

 

Endroutine

 

 

* 画像リサイズ後

Evtroutine Handling(#ウィジェット名.AfterConv) Imgurl(#ImgUrl) Type(#type)

Define_Com Class(#STD_NUM) Name(#SplitPosition)

 

#SplitPosition := #ImgUrl.PositionOf( ',’ )

 

#UploadFile2 := #SYS_WEB.CreateBlob( #ImgUrl.Substring( (#SplitPosition + 1) ) #type )

 

#ThumImage.Image <= #sys_appln.Createbitmap( #UploadFile2 )

 

Endroutine

 

Evtroutine Handling(#UploadButton.Click)

#COM_OWNER.ImageUpload

Endroutine

 

Mthroutine Name(ImageUpload)

Define_Com Class(#サーバーモジュール.ImageUpload) Name(#Upload)

#Upload.ExecuteAsync Uploadimage(#UploadFile1) Thumimage(#UploadFile2)

Evtroutine Handling(#Upload.Completed)

 

Endroutine

Evtroutine Handling(#Upload.Failed)

 

Endroutine

Endroutine

 

End_Com

 

■Webページの実行イメージ

■サーバーモジュールのサンプルコード

Srvroutine Name(ImageUpload)

Field_Map For(*INPUT) Field(#Uploadimage)

Field_Map For(*INPUT) Field(#Thumimage)

 

Define Field(#Uploadimage) Reffld(#STD_BLOB)

Define Field(#Thumimage) Reffld(#STD_BLOB)

 

Define_Com Class(#PRIM_ALPH) Name(#FilePath)

Define_Com Class(#PRIM_ALPH) Name(#ThumFilePath)

 

Define_Com Class(#PRIM_ALPH) Name(#FileName)

Define_Com Class(#PRIM_ALPH) Name(#ThumFileName)

 

Define_Com Class(#PRIM_ALPH) Name(#returnCode)

 

#FilePath := *PART_DIR + '\web\vl\Test.jpg’

#FileName := #Uploadimage

 

#ThumFilePath := *PART_DIR + '\web\vl\ThumTest.jpg’

#ThumFileName := #Thumimage

 

* アップロード処理

Use Builtin(OV_FILE_SERVICE) With_Args(COPY_FILE #FileName #FilePath) To_Get(#returnCode)

Use Builtin(OV_FILE_SERVICE) With_Args(COPY_FILE #ThumFileName #ThumFilePath) To_Get(#returnCode)

 

Endroutine

有償の「LANSAテクニカル・ホットライン・サービス」をご契約いただければ、過去データベースの検索から今回ご紹介した以外の技術情報を探すことも出来ます。 「LANSAテクニカル・ホットライン・サービス」のご契約についてはお問い合わせフォーム（https://www.lansa.jp/inquiryform/）よりお問い合わせください。

LANSAコミュニティに登録する

IBMｉ(AS/400)をご利用の企業様必読！
LANSAを利用したIBM iの活用方法・成功事例をお届け致します。

LANSA Tips