xiuno论坛上传图片时压缩图片的尺寸

今天 2018-12-23 1306

xiuno论坛的图片压缩是交给客户端JS执行的

官网目前4.04版本其实JS本身已具备压缩图片的功能,但是没有指定参数

我们只需要在 foot.int.htm 的 50行

xn.options.water_image_url = '<?php echo $conf['logo_water_url'];?>';	
// 水印图片 / watermark image

这行底下可以加上这些:(不加就是不启用)

xn.options.width=400; //最大宽度,超出会被裁剪
xn.options.height=800; //最大高度,超出会被裁剪
xn.options.qulity=0.5; //图片质量50%

更新缓存后,客户端就会先按这样的设置处理好图片再上传到服务器

从而达到了缩小图片的目地


可以用插件的形式加入此设置,我们通过对比文件发现

插入到 post.htm 页面里的 <!--{hook post_js.htm}-->,这个地方比较好,只在发帖页面引用,其它页面不需要,节约页面体积


看六楼,总结的修改方法在6楼
最新回复 (9)
  • 今天 2018-12-23
    引用 2

    好像还有一个问题,插入的代码并没有语法CSS

    和官网对比一下,官网的有一条这样的JS

    <script>// 语法高亮if
    ($('div.message pre').length > 0) {	
    $.require_css('plugin/xn_syntax_hightlighter/syntax_hightlighter/syntax.css');	
    $.require('plugin/xn_syntax_hightlighter/syntax_hightlighter/syntax.js', 
    function() {		
    SyntaxHighlighter.all();	
    });}
    </script>

    而我们的并没有,不知道是什么原因,难道是下载的编辑器插件少了文件?先不管了,看看图片效果


    原图片 2560*1600,大小800KB


    上传后的图片

    失败。。。

  • 今天 2018-12-23
    引用 3
    再测试一次
  • 今天 2018-12-23
    引用 4
    汗,弄了这么久都没弄好,不知道怎么回事,理论上是可 以的啊

    懒得弄了,解决办法是,修改xiuno.js 的第1195行
    var thumb_width = options.width || 256;

    不由让 thumb_width 获取 options.width的数值 了,直接指定
    var thumb_width = 600;
  • 今天 2018-12-23
    引用 5


    哇靠,上个帖子提醒了自己,获取不到 options.width 的数值?

    var thumb_width = options.width || 256;
    var thumb_height = options.height || 496;
    var action = options.action || 'thumb';
    var filetype = options.filetype || xn.image_file_type(file_base64_data);//xn.base64_data_image_type(file_base64_data);
    var qulity = options.qulity || 0.9; // 图片质量, 1 为无损


    正确的应该是

    var thumb_width = xn.options.width || 256;
    var thumb_height = xn.options.height || 496;
    var action = xn.options.action || 'thumb';
    var filetype = xn.options.filetype || xn.image_file_type(file_base64_data);//xn.base64_data_image_type(file_base64_data);
    var qulity = xn.options.qulity || 0.9; // 图片质量, 1 为无损

    要这样才能正确接收,这个问题折腾了我几个小时

    不过也终于知道它的前因后果了,完美解决

  • 今天 2018-12-26
    引用 6

    总结一下,一共要修改两处

    1。

    在 foot.inc.htm 的 50行

    1
    2
    xn.options.water_image_url = '<?php echo $conf['logo_water_url'];?>';
    // 水印图片 / watermark image

    这行底下可以加上这些:(不加就是不启用)

    1
    2
    3
    xn.options.width=400; //最大宽度,超出会被裁剪
    xn.options.height=800; //最大高度,超出会被裁剪
    xn.options.qulity=0.5; //图片质量50%


    2。

    xiuno.js 第 1195行开始

    原来的

    1
    2
    3
    var thumb_width = options.width || 2560;
    var thumb_height = options.height || 4960;
    var action = options.action || 'thumb';


    改成这样

    1
    2
    3
    var thumb_width = xn.options.width || 2560;
    var thumb_height = xn.options.height || 4960;
    var action = xn.options.action || 'thumb';


  • 游客 2019-1-18
    引用 7
    游客
  • sssss 2019-8-4
    引用 8
    能不能实现这样的?
    上传图片以后       显示为压缩大小(图片质量,比如100k,或者转为webp)后的图片。
    点击图片以后       能查看原始大小图片(1m,原始图片后缀jpgpng)。
  • 今天 2019-8-5
    引用 9
    sssss 能不能实现这样的? 上传图片以后 显示为压缩大小(图片质量,比如100k,或者转为webp)后的图片。 点击图片以后 能查看原始大小图片(1m,原始图片后缀jpgpng)。
    可以实现,要从长计议,哈哈
  • 游客 3月前
    引用 10
    非常感谢
  • 游客
    11
返回
发新帖