携帯電話のぼやけた画像表示の問題を discuz がどのように解決するか

この記事の主な内容 携帯電話の画像表示がぼやける問題を discuz で解決する 複数画像アップロード、大画面表示、高画質化などの機能を実現するのが主な内容ですdiscuz で表示します。元々は PHP 中国語 Web サイトで公開されています。転載してください。注意してください。その他の記事については、php 中国語 Web サイト discuz コラム に注目してください。

ついに実現したレンダリング

複数の画像アップロードを実現

ファイルのアップロード/テンプレート/デフォルト/タッチを変更/forum/post.htm コード 83 行

コンテンツの変更: 複数の属性の追加

<li style="padding:0px;">
   <a href="javascript:;" class="y" style="background:url(static/image/mobile/images/icon_photo.png) no-repeat;overflow:hidden;">
      <input type="file" name="Filedata" multiple="multiple" id="filedata" style="width:30px;height:30px;font-size:30px;opacity:0;">
   </a>
</li>

js ファイルの変更 Upload/template/default/touch/forum/post.htm 206 行

コンテンツを変更します: コピーするだけです

for (var i=0;i<this.files.length;i++ ) {
    var file_data = [];
    file_data.push(this.files[i]);
    $.buildfileupload({
        uploadurl:&#39;misc.php?mod=swfupload&operation=upload&type=image&inajax=yes&infloat=yes&simple=2&#39;,
        files:file_data,
        uploadformdata:{uid:"$_G[uid]", hash:"<!--{eval echo md5(substr(md5($_G[config][security][authkey]), 8).$_G[uid])}-->"},
        uploadinputname:&#39;Filedata&#39;,
        maxfilesize:"2000",
        success:uploadsuccess,
        error:function() {
            popup.open(&#39;上传失败，请稍后再试&#39;, &#39;alert&#39;);
        }
    });
}

複数画像のアップロードをテストします: 現時点では、複数画像のアップロードが実装されています

大きな画像表示

ファイルの変更 Upload/template/default/touch/forum/discuzcode.htm 90 行

内容の変更: 83 を 330 に変更します

$fix = count($post[imagelist]) == 1 ? 140 : 330;

変更された効果: 上記の 330 は画像の幅を表示する必要があります。ただし、これは 1 台のマシンでテストされたものであり、他のモデルでも問題が発生するはずです。そして写真がぼやけて見えません。

高品質な画像表示

PC側を開いてみると、PC側の画像は実際にオリジナルの画像を使用していることがわかりました

モバイル側の画像を見てみると、画像の表示ルールが独自のルールになっていることが分かりました。このルールの後に、Kaka は

と書きます

モバイル 画像の表示品質は非常に心配です。

ファイル Upload/template/default/touch/forum/viewthread.htm を変更します。行 174 ～ 183 は、

<!--{if $_G[&#39;forum_thread&#39;][&#39;subjectImage&#39;]}-->
<!--{loop $_G[&#39;forum_thread&#39;][&#39;subjectImage&#39;] $imageData}-->
<img src="/static/imghw/default1.png"  data-src="data/attachment/forum/$imageData[attachment]"  class="lazy"   alt="">
<!--{/loop}-->
<!--{/if}-->

PHP ファイル Upload/source/ を変更します。 module/ forum/forum_viewthread.php: 20 行目

# 主题图片
$subjectImage = DB::fetch_all("select * from pre_forum_attachment where tid= '$tid' limit 1");
$subject_tableId = $subjectImage[0]['tableid'];
$subjectData = DB::fetch_all("select attachment from pre_forum_attachment_$subject_tableId where tid= '$tid'");
$thread['subjectImage'] = $subjectData;

の後に追加するだけで最終的な効果が得られます

追加したコードのコードを作成しますPHP ファイル内 簡単な説明

アップロードされたすべての画像はインデックス テーブルに入力されます

このインデックス テーブルには、次のように画像が保存されます。特定のルールに従う 対応するテーブル内のコード

#

# 主题图片
$subjectImage = DB::fetch_all("select * from pre_forum_attachment where tid= '$tid' limit 1");
$subject_tableId = $subjectImage[0]['tableid'];
$subjectData = DB::fetch_all("select attachment from pre_forum_attachment_$subject_tableId where tid= '$tid'");
$thread['subjectImage'] = $subjectData;

は、トピック ID に基づいて、このトピックの画像が保存されているインデックス テーブルを実際にクエリします。

または、テーマ イメージの添付ファイル テーブルに移動し、テーマ ID に従ってテーマ イメージを取得します。

次に、それをグローバル変数に保存します。

その後、フロント エンドはこの変数を使用してループで表示します。しかし

概要

Kaka はこれらの関数を考案するのに長い時間を費やしました。インターネット上の記事のほとんどは、 discuz のバックグラウンド機能について説明しており、テンプレートのみに焦点を当てています。2 番目の記事は非常に優れています。そこで、Kaka は、皆さんのお役に立ちたいと考えて、この点に関していくつかの解決策を提供します。

以上が携帯電話のぼやけた画像表示の問題を discuz がどのように解決するかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。