WeChatアプレットで画像の幅と高さを取得する方法

起源

最近、私は要件 A に取り組んでいます。そこには、次のように記述される小さな機能ポイントがあります。構成側から画像を返し、幅は変更されず (750)、高さが画像に合わせて調整されることを期待します。

私は思った

// 説明を簡単にするために、css をスタイル属性としてバインドします [非推奨] && src の値をハードコードします [後でインターフェイスによって返される値に変更できます]
<view style="width:100%;">
 <画像 src="{{src}}"></画像>
</ビュー>

最初に考えたのは、コンテンツ領域の幅を 100% に設定すると画面の幅が自動的に埋められ、高さは適応されるというものでした。

実際の効果: 画像が占めるスペースは、画面幅 x 0

解決

コア: 画像の高さを取得する方法を解く

基本計画

ポイント: 画像が読み込まれた後、対応する画像情報を取得します。

アプレット開発ドキュメントを確認したところ、次のように、読み込みが成功した場合のコールバックがあることがわかりました。

デモは次のとおりです。

// wxml
<view style="width:100%;">
 <image src="https://sf3-ttcdn-tos.pstatp.com/img/mosaic-legacy/3796/2975850990~300x300.image" bindload="loadSuccess" style="width:{{imageWidth}}px; height:{{imageHeight}}px"></image>
</ビュー>

//js
ページ（{
 データ： {
 画像の高さ: 0,
 画像幅: 0
 },
 ロード成功(e){
 const { 詳細: { 幅, 高さ } = e
 this.setData({
  画像幅: 幅、
  画像の高さ:高さ
 })
 }
})

まずは効果を見てみましょう:

考えてみてください。適応させる必要がある画像が 100 枚ある場合、面倒な setData() 呼び出しが多数発生し、パフォーマンスの問題も発生するのではないでしょうか。

高度なソリューション

友人に思い出させられて、ミニプログラムの画像には、画像の切り取りと拡大縮小を設定するために使用できるモードと呼ばれるプロパティがあることを知りました。

mode属性に指定できる値は次のとおりです。

では、早速実際の効果を見てみましょう。

// 750x110 画像 <view style="width:100%;" >
 <画像 src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba1f75f0d29c40759b43ef910dacb4e7~tplv-k3u1fbpfcp-watermark.image" mode="widthFix"></画像>
</ビュー>

// 750x480 画像 <view style="width:100%;" >
 <画像 src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba1f75f0d29c40759b43ef910dacb4e7~tplv-k3u1fbpfcp-watermark.image" mode="widthFix"></画像>
</ビュー>

750x110 のレンダリングをご覧ください:

750x480 のエフェクト画像を見てみましょう。

この時点では、src の値をインターフェースによって返される値に変更するだけで、固定幅と適応高さの要件が満たされます。

やっと

このプロパティは主に画像の適応性を実現するためのものです。言い換えれば、主に画像が歪まないようにするためのものです。

WeChatミニプログラムで画像の幅と高さを取得する方法についての記事はこれで終わりです。WeChatミニプログラムで画像の幅と高さを取得する方法の詳細については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません: