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

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を応援してください。

以下もご興味があるかもしれません:
  • WeChatアプレットは、詳細な説明とサンプルコードを使用して画像の高さと幅を動的に設定します
  • WeChatアプレット画像の幅と高さの適応の詳細な説明
  • WeChatアプレットは、画像コンポーネント画像を適応的な幅比で表示する方法を実装しています
  • WeChatアプレットはリッチテキスト画像の適応幅を実装
  • WeChatアプレットの画像は歪みなく100%の幅で表示されます
  • WeChatアプレット画像幅の適応の実装

<<:  MySQL 5.7.18のインストール方法とMySQLサービスの起動手順の詳細な説明

>>:  nginx と Tencent Cloud の無料証明書を使用して https を作成する方法

推薦する

Dockerでudpポート番号を指定する問題を解決する

Docker はコンテナを起動するときにアクセス ポートを指定します。複数の -p オプションを使用...

IE6 で幅と高さがおかしいバグ

図に示すように: しかし、IE6で表示すると、right:1px:になります。 IE6 には、幅と高...

MySQL 4.1/5.0/5.1/5.5/5.6の主な違い

バージョン間でのコマンドの違い: innodb ステータスを表示\G mysql-5.1 エンジン ...

Ubuntu で G++ を使用して CPP ファイルをコンパイルする

g++ を使用して初めて cpp ファイルをコンパイルしたとき、未定義の参照エラーが報告されました。...

TypeScript での関数オーバーロード

目次1. 関数シグネチャ2. 関数のオーバーロード2.1 オーバーロードされたシグネチャは呼び出し可...

小規模プログラムへのデータキャッシュ機構の応用と実装

ミニプログラムデータキャッシュ関連知識データ キャッシュ: データをキャッシュして、アプレットを終了...

デザイン理論: なぜ私たちは間違った場所を見ているのでしょうか?

数日前、バスで仕事に行きました。バスのカードリーダーの実際の使用シーンを実際に見て、カードリーダーの...

MySQLでユーザーを作成し、権限を管理する方法

1. ユーザーとパスワードの作成方法1. MySQLデータベースに入る mysql> mysq...

htmlダウンロード機能の詳しい説明

新しいプロジェクトは基本的に終了しました。フロントエンドとバックエンドを分離して統合を完了したのは初...

HTMLで特殊記号を表示する(特殊文字対応表付き)

問題の再現HTML を使用して編集する場合、特殊記号によってエラーが表示されることが多く、極端な場合...

Linux カーネルの探究: Kconfig の秘密

Linux 構成/ビルド システムがどのように機能するかを深く理解します。 Linux カーネル構成...

LinuxデバッガGDBの基本的な使い方の詳細な説明

目次1. 概要2. gdbデバッグ2.1. ブレークポイントを設定する2.1.1. ブレークポイント...

CocosCreatorゲームにおける魚群アルゴリズムの詳細な説明

序文最近CocosCreatorを学びたいと思ったので、エディターをダウンロードして起動しました。誰...

MySQLインデックスが使用されない状況のまとめ

MySQL のインデックスの種類一般的に、次の 4 つのカテゴリに分類できます。通常のインデックス:...

効率化に役立つ 20 の CSS コーディングのヒント (並べ替え)

この記事では、主要な CSS ウェブサイトで推奨されている 20 個の便利なルールとベスト プラクテ...