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

举报
原来是咔咔 发表于 2022/03/26 22:39:25 2022/03/26
【摘要】 本文主要内容:discuz如何解决手机端图片显示模糊问题,主要内容为discuz实现多图上传、图片大图显示、图片高质量显示discuz等功能 最终实现的效果图 实现多图上传 修改文件u...

本文主要内容:discuz如何解决手机端图片显示模糊问题,主要内容为discuz实现多图上传、图片大图显示、图片高质量显示discuz等功能

最终实现的效果图

在这里插入图片描述

实现多图上传

修改文件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>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

修改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:'misc.php?mod=swfupload&operation=upload&type=image&inajax=yes&infloat=yes&simple=2',

        files:file_data,

        uploadformdata:{uid:"$_G[uid]", hash:"<!--{eval echo md5(substr(md5($_G[config][security][authkey]), 8).$_G[uid])}-->"},

        uploadinputname:'Filedata',

        maxfilesize:"2000",

        success:uploadsuccess,

        error:function() {

            popup.open('上传失败,请稍后再试', 'alert');

        }

    });

}

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

测试多图上传:这个时候就已经实现了多图上传了
在这里插入图片描述

图片大图显示

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

修改内容:把83改为1500

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

  
 
  • 1

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

在这里插入图片描述

图片高质量显示

我们打开pc端,发现pc端的图片竟然用的是原图
在这里插入图片描述
在看看移动端的图片发现图片的显示规则使用他自己的规则,这个规则后边咔咔会在写到
在这里插入图片描述
移动端的图片显示质量真是让人堪忧啊!

修改文件upload/template/default/touch/forum/viewthread.htm 174行-183行修改为

<!--{if $_G['forum_thread']['subjectImage']}-->

<!--{loop $_G['forum_thread']['subjectImage'] $imageData}-->

<img src="data/attachment/forum/$imageData[attachment]" alt="">

<!--{/loop}-->

<!--{/if}-->

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

修改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;

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

然后实现最终效果
在这里插入图片描述

对在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;

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 这段代码其实就是根据主题id查询这个主题的图片是在哪个索引表存着。

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

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

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

总结

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

文章来源: blog.csdn.net,作者:咔咔-,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/fangkang7/article/details/105968307

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200