搜索
首页CMS教程Discuzdiscuz如何解决手机端图片显示模糊

discuz如何解决手机端图片显示模糊

May 03, 2020 am 12:07 AM
discuz图片

本文主要内容:discuz如何解决手机端图片显示模糊问题,主要内容为discuz实现多图上传、图片大图显示、图片高质量显示discuz等功能,php中文网原创首发,转载请注明!更多文章请关注php中文网discuz专栏

最终实现的效果图

图片.png

实现多图上传

修改文件upload/template/default/touch/forum/post.htm  83行代码

修改内容:添加multiple属性

<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;);
        }
    });
}

测试多图上传:这个时候就已经实现了多图上传了

图片.png

图片大图显示

修改文件upload/template/default/touch/forum/discuzcode.htm   90行

修改内容:把83改为330

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

修改完效果:对于上面的这个330应该就是显示图片的宽度的。但是这是在一个机器里边测试的,其他机型肯定有问题。而且图片已经模糊的不能看了。

图片.png

图片高质量显示

我们打开pc端,发现pc端的图片竟然用的是原图

图片.png

在看看移动端的图片发现图片的显示规则使用他自己的规则,这个规则后边咔咔会在写到

图片.png

移动端的图片显示质量真是让人堪忧啊!

修改文件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="data/attachment/forum/$imageData[attachment]" alt="">
<!--{/loop}-->
<!--{/if}-->

修改PHP文件upload/source/module/forum/forum_viewthread.php:在20行后加上即可

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

然后实现最终效果

图片.png

对在PHP文件里边添加的代码做一个简答的解释

对于上传的图片都会进入一个索引表

图片.png

然后这个索引表会根据一定的规则把图片存进对应的表中

图片.png

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

这段代码其实就是根据主题id查询这个主题的图片是在哪个索引表存着。

或者到主题图片的附件表后根据主题id获取主题图片

然后存进一个全局变量即可

然后前端拿着这个变量进行循环显示即可

总结

这几个功能是咔咔呕心沥血的折腾了半天才弄出来,网上的文章对于discuz大多数只是停留在后台的功能上,对于模板的二开文章很好。所以咔咔会在这方面给大家奉上一些解决方案,希望可以帮助到大家。

以上是discuz如何解决手机端图片显示模糊的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
4 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
1 个月前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具