URLから取得した画像を編集して表示したい

LINEやinstagramのDMように、アップロードしたオリジナル画像をリサイズして角丸をつけて表示する、画像送信機能付きのチャット画面のようなものを作りたいことがあります。

手動でもやれると思いますが、URLの画像への変換まで一気通貫でやりたいケースを想定し、ライブラリを使います。いくつかの代表的なものの中から
今回はSDWebImageを使います。

特に角丸の実装方法が、SDWebImageの公式ドキュメントからは見つかりにくかったので書いておきます。

前提条件

画像を表示するための基本的なしつらえ(tableViewのレイアウトやdelegateメソッドの用意、imageViewの用意など)は完了している

tranformerを使って画像のリサイズと角丸実装

例えばこんな感じで書きます。

viewController.swift


func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

let cell = // cellの生成は省略。imageViewが乗っかったcellを想定。

let url = // 省略。固定URLや、データベースなどから取得したURLを変数に代入。

// 画像のリサイズ。任意のサイズを設定。
let sizeTransformer = SDImageResizingTransformer(size: CGSize(width: 200, height: 200),scaleMode: .aspectFill)

// 角丸をつける。任意の数値や色を設定。
let roundCornerTransformer = SDImageRoundCornerTransformer(radius: 18.5, corners: .allCorners, borderWidth: 2.0, borderColor: UIColor.clear)

// 上記2つのtransformerをまとめて1つにする
let pipeLineTransformer = SDImagePipelineTransformer(transformers: [sizeTransformer, roundCornerTransformer])

cell.imageView.sd_setImage(with: url, placeholderImage: nil, context: [.imageTransformer: pipeLineTransformer])

}

公式の読み込みも大変だと思うのでご参考になれば幸いです。

最近の話

この前母親が週に2回だけママをやっているスナックに行きました。スナックって味があっていいですね。母の作るハイボールは濃くて美味しかったです。

今回初投稿でしたが、自分が苦しんだものを中心にまた書きたいと思います。