请选择 进入手机版 | 继续访问电脑版
查看: 25|回复: 0

Discuz手机端图片显示模糊解决方法

[复制链接]

634

主题

636

帖子

3228

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
3228
发表于 5 天前 | 显示全部楼层 |阅读模式
Discuz手机端图片显示模糊解决方法
本帖子主要内容:discuz如何解决手机端图片显示模糊问题,主要内容为discuz实现多图上传、图片大图显示、图片高质量显示discuz等功能。

最终实现的效果图
01.png
实现多图上传
修改文件upload/template/default/touch/forum/post.htm 83行代码
修改内容:添加multiple属性
  1. <li style="padding:0px;">
  2.    <a href="javascript:;" class="y" style="background:url(static/image/mobile/images/icon_photo.png) no-repeat;overflow:hidden;">
  3.       <input type="file" name="Filedata" multiple="multiple" id="filedata" style="width:30px;height:30px;font-size:30px;opacity:0;">
  4.    </a>
  5. </li>
复制代码
修改js文件upload/template/default/touch/forum/post.htm 206行
修改内容:直接复制过去即可
  1. for (var i=0;i<this.files.length;i++ ) {
  2.     var file_data = [];
  3.     file_data.push(this.files[i]);
  4.     $.buildfileupload({
  5.         uploadurl:'misc.php?mod=swfupload&operation=upload&type=image&inajax=yes&infloat=yes&simple=2',
  6.         files:file_data,
  7.         uploadformdata:{uid:"$_G[uid]", hash:"<!--{eval echo md5(substr(md5($_G[config][security][authkey]), 8).$_G[uid])}-->"},
  8.         uploadinputname:'Filedata',
  9.         maxfilesize:"2000",
  10.         success:uploadsuccess,
  11.         error:function() {
  12.             popup.open('上传失败,请稍后再试', 'alert');
  13.         }
  14.     });
  15. }
复制代码
测试多图上传:这个时候就已经实现了多图上传了
02.png
图片大图显示
修改文件upload/template/default/touch/forum/discuzcode.htm 90行
修改内容:把83改为330
  1. $fix = count($post[imagelist]) == 1 ? 140 : 330;
复制代码
修改完效果:对于上面的这个330应该就是显示图片的宽度的。但是这是在一个机器里边测试的,其他机型肯定有问题。而且图片已经模糊的不能看了。
03.png
图片高质量显示
我们打开pc端,发现pc端的图片竟然用的是原图
04.png
在看看移动端的图片发现图片的显示规则使用他自己的规则,这个规则后边咔咔会在写到
05.png
移动端的图片显示质量真是让人堪忧啊!
修改文件upload/template/default/touch/forum/viewthread.htm 174行-183行修改为
  1. <!--{if $_G['forum_thread']['subjectImage']}-->
  2. <!--{loop $_G['forum_thread']['subjectImage'] $imageData}-->
  3. <img src="data/attachment/forum/$imageData[attachment]" alt="">
  4. <!--{/loop}-->
  5. <!--{/if}-->
复制代码
修改PHP文件upload/source/module/forum/forum_viewthread.php:在20行后加上即可
  1. # 主题图片
  2. $subjectImage = DB::fetch_all("select * from pre_forum_attachment where tid= '$tid' limit 1");
  3. $subject_tableId = $subjectImage[0]['tableid'];
  4. $subjectData = DB::fetch_all("select attachment from pre_forum_attachment_$subject_tableId where tid= '$tid'");
  5. $thread['subjectImage'] = $subjectData;
复制代码
然后实现最终效果
06.png
对在PHP文件里边添加的代码做一个简答的解释
对于上传的图片都会进入一个索引表
07.png
然后这个索引表会根据一定的规则把图片存进对应的表中
08.png
  1. # 主题图片
  2. $subjectImage = DB::fetch_all("select * from pre_forum_attachment where tid= '$tid' limit 1");
  3. $subject_tableId = $subjectImage[0]['tableid'];
  4. $subjectData = DB::fetch_all("select attachment from pre_forum_attachment_$subject_tableId where tid= '$tid'");
  5. $thread['subjectImage'] = $subjectData;
复制代码

这段代码其实就是根据主题id查询这个主题的图片是在哪个索引表存着。
或者到主题图片的附件表后根据主题id获取主题图片
然后存进一个全局变量即可
然后前端拿着这个变量进行循环显示即可

总结
这几个功能是咔咔呕心沥血的折腾了半天才弄出来,网上的文章对于discuz大多数只是停留在后台的功能上,对于模板的二开文章很好。所以蓄财网会在这方面给大家奉上一些解决方案,希望可以帮助到大家。
以上就是Discuz手机端图片显示模糊解决方法的详细内容。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|蓄财网 ( 豫ICP备2021002293号 )

GMT+8, 2021-10-19 19:11 , Processed in 0.114608 second(s), 43 queries .

蓄财网 ©版权所有

© 2021 蓄财网(www.aixc.cn)

快速回复 返回顶部 返回列表