会社のビジネス ニーズにより、Vue で作成された Web ページはスマート ホームの Wi-Fi に接続する必要がありますが、この Wi-Fi はインターネットには接続されず、携帯電話を自宅に接続するためにのみ使用されます。このように、この種の Wi-Fi 環境では、Web ページはサーバーに画像を読み込むことができません。
この点に関して、私は Vue シングル ページ システム用の 3 つのソリューションを考え出しました。
1. まず前のページに画像をロードしてキャッシュし、その後、切断された後続のページで画像を取得します。
2. ルーティングコンテナを上部に持つページを作成し、ネットワークが切断された後にページを配置し、表示する必要のあるすべての画像を下部に配置します。このようにして、ページがロードされるとすべての画像が表示され、上記のサブルートは自然に画像を取得できます。
3. 画像をbase64データに変換し、localStorageに保存します。
解決策 1 と 2 は比較的単純で、PC および Android プラットフォームで適切に実行されます。ただし、iosでは表示されません。
(当然、写真は下にありますが、上の写真は表示されません)
このことから、iOS システムのブラウザは画像を 1 つずつロードしていると推測できます。各画像をロードする前に、画像がサーバー上に存在するかどうかを調べ、変更されていない場合は、キャッシュに表示されます。見つからない場合は、直接 404 が返されます。したがって、ネットワークが切断されている場合、ブラウザベースのキャッシュ戦略は理想的ではありません。 、3 番目のオプションを使用する必要があります。最初にコードを貼り付けます。
/* 画像の Base64 コードを取得します* @param {obj}img image dom object* */ function getBase64Image(img) { let Canvas = document.createElement(canvas); img.高さ; ctx = Canvas.getContext(2d); img.width, img.height); //同じ画像を描画 return Canvas.toDataURL(image/png); //base64 データに変換します。Canvas を使用すると、画像を簡単に Base64 形式に変換できます。次に、それを sessionStorage に保存するだけです。後で画像を再表示するときは、img の src 属性を Base64 データに設定するだけです。 vue プロジェクトで行うことは、base64 に変換して保存するためのコンポーネントを作成し、スロット内のすべてのイメージを Base64 に変換し、img タグの name 属性を作成して、それを sessionStorage のキーとして使用して、コンポーネントを作成することです。表示コンポーネント (img タグが 1 つだけ含まれます) の name 属性を対応する画像と同じに設定し、それをキーとして使用して sessionStorage の Base64 データを取得します。
コンポーネントを変換して保存します。
<!--事前にロードする必要がある画像--> <save-img-base64> <img src=../../assets/img/connect/bind_xiaofang.png name=bind_xiaofang/> <img src=.. / ../assets/img/connect/bind_alonePro.png name=bind_alonePro/> <img src=../../assets/img/connect/bind_S20.png name=bind_S20/> <img src=../../assets/img/connect/bind_S30.png name=bind_S30/> <img src= ../../assets/img/connect/connectStart_xiaofang.png name=connectStart_xiaofang/> <img src=../../assets/img/connect/connectStart_alonePro.png name=connectStart_alonePro/> <img src=../../assets/img/connect/connectStart_S20.png name= connectStart_S20/> <img src=../../assets/img/connect/connectStart_S30.png name=connectStart_S30/> <img src=../../assets/img/connect/reset_xiaofang.png name=reset_xiaofang/> <img src= ../../assets/img/connect/reset_allonePro.png name=reset_allonePro/> <img src=../../assets/img/connect/reset_S20.png name=reset_S20/> <img src=../../assets/img/connect/reset_S30.png name=リセット_S30/> <img src=../../assets/img/connect/network_set.png name=network_set/> <img src=../../assets/img/connect/phone_wifi.png name=phone_wifi/> <img src=../../assets/img/connect/tmall.png name= tmall/> </save-img-base64>
表示コンポーネント:
<img-base64 name=network_set></img-base64>
ブラウザセッションのストレージ状況:
「使えますか？」の表からもわかるように、最近のモバイルブラウザは基本的にcanvasに対応しており、どなたでも安心してご利用いただけます。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。