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 を作成する方法

推薦する

Vue3とTypeScriptを組み合わせたプロジェクト開発の実践の概要

目次概要1. コンポジションAPI 1. ref と reactive の違いは何ですか? 2. 周...

カルーセル効果を実現するためのネイティブJavaScript+CSS

この記事では、参考までに、カルーセル効果の具体的なコードをJavaScript+CSSを使用して実装...

Linux ネットワーク システムの紹介

目次ネットワーク情報ホスト名を変更するDNSドメイン名解決ネットワーク関連コマンドファイアウォール暗...

コマンドラインを使用してUbuntuのバージョンを検出する方法

方法1: lsb_releaseユーティリティを使用するlsb_release ユーティリティは、L...

ウェブサイトの再設計はどの家族にとっても難しい作業です

<br />どの家庭にもそれぞれの問題があり、改訂はどの IT 企業にとっても問題の 1...

MySQLプロセス関数の一般的な使用例の分析

この記事では、例を使用して MySQL プロセス関数の一般的な使用方法を説明します。ご参考までに、詳...

MySQL データベースの最適化: インデックスの実装原則と使用状況の分析

この記事では、例を使用して、MySQL データベースの最適化のためのインデックス実装の原則と使用方法...

フォーム入力ボックスに関するWebデザインのヒント

1. キャンセル ボタンが押されたときの破線ボックス<br /> 入力に属性値 hide...

MySQL Installer Community 5.7.16 インストール詳細チュートリアル

この記事では、MySQL インストールの詳細なチュートリアルを記録し、全員と共有します。 1. バー...

Typescriptの基本構文13個を共有する

目次1. Tsとは何か2. 基本的な文法1. プリミティブデータ型を宣言する2. オブジェクト型を宣...

Dockerコンテナのログ分析

コンテナログを表示するまず、 docker run -it --rm -d -p 80:80 ngi...

nginx をシャットダウン/再起動/起動する方法

閉鎖サービス nginx 停止systemctl 停止 nginx起動するサービス nginx 開始...

Docker を使用した MySQL のデプロイの詳細説明 (データ永続化)

この記事では、Docker を使用して MySQL をデプロイし、データを保持する方法について簡単に...

React の国際化 react-intl の使用

React で国際化を実現するにはどうすればよいでしょうか? react-intlプラグインは、Re...

SQL 文における複合主キーと結合主キーに関する予備的研究

1. 複合主キーいわゆる複合主キーとは、テーブルの主キーが複数のフィールドで構成され、ビジネス上の意...