• 妈蛋:kinMaxShow轮播图异常,WebUploader图片上传坑爹,图片被压缩了


    今天晚上在改造轮播图。

        原来的代码是这样的

        
    <div>
    <img src="${static}/image/index/banner/`.jpg" />
    </div>
    <div>
    <img src="${static}/image/index/banner/2.jpg" />
    </div>
    <div>
    <img src="${static}/image/index/banner/3.jpg" />
    </div> 

       为了方便管理,轮播图后台可以管理,所以前台的轮播图图片,应该从数据库中获得。
      这个功能,就是两三分钟的事,立即就搞定了。

       改造后的代码:
      
    <!--轮播图 -->
    <div id="kinMaxShow" >
    <#if bannerPhotoList?? && bannerPhotoList?size gt 0 > 
                                  <#list
    bannerPhotoList as item>
    <div>
    <img height="350px" src="${base}/image/${item.url}" />
    </div>
    </#list> <#else>
    <div>
    <img src="${static}/image/index/banner/4.jpg" />
    </div>
    <div>
    <img src="${static}/image/index/banner/2.jpg" />
    </div>
    <div>
    <img src="${static}/image/index/banner/3.jpg" />
    </div>
    </#if>
    </div> 

    问题出现了
         自从使用了动态的图片,轮播图的图片高度没有占满“350px” ,图片的上下都有空白。非常可恶。

    猜测
         后端代码的问题。
         经过对比2种情况生成的HTML,完全一样,除了图片地址不一样。

    不知道,经过了多久的Chrome查看元素,突然意识到是不是图片有问题了。

    去查看图片,发现高度只有250。尼玛,真把老子当250了,坑爹货啊。

    因此,事实证明,图片上传后,经过了压缩,高度变成了250了。

    期间,我也debug SpringMVC图片上传的代码,进入到后台的时候,图片已经变小了。因此,图片变小是WebUploader图片上传组件干的好事。

    网上搜索WebUploader的资料,“WebUploader图片压缩” ,零散地找到了一些资料。
     
    WebUploader的官网打开很慢,通过百度快照,看了 WebUploader API文档。

    有这么一点内容:

     
    compress {Object} [可选]
    配置压缩的图片的选项。如果此选项为false, 则图片在上传前不进行压缩。

    默认为:

    {
        1600,
        height: 1600,

        // 图片质量,只有type为`image/jpeg`的时候才有效。
        quality: 90,

        // 是否允许放大,如果想要生成小图的时候不失真,此选项应该设置为false.
        allowMagnify: false,

        // 是否允许裁剪。
        crop: false,

        // 是否保留头部meta信息。
        preserveHeaders: true,

        // 如果发现压缩后文件大小比原来还大,则使用原来图片
        // 此属性可能会影响图片自动纠正功能
        noCompressIfLarger: false,

        // 单位字节,如果图片大小小于此值,不会采用压缩。
        compressSize: 0
    }

    可以清楚地知道,这个组件有压缩功能,在满足一定的条件下会压缩。

    为了方便,直接在upload.js中增加
     compress:false,” 不压缩,这个时候,上传图片就是“原样”了。
    至于 上面配置的“1600px”,我猜测是图片的宽度和高度达到一定条件就压缩。

    总结: 
    kinMaxShow轮播组件没有问题,WebUploader看到图片太大很不爽,就启用了压缩。

    解决问题的思路:发现了问题,分析问题的类型,猜测,验证。网上搜资料,找准关键词。
    本次搜索关键词“WebUploader 压缩” 。

    小雷-正式开始第2次创业的旅途
    2015年3月18日 23时
    湖北-武汉-循礼门 
  • 相关阅读:
    第一个只出现一次的字符
    把数组排成最小的数
    计算机系统结构 | 期末复习总结学习笔记
    《网络协议分析及编程》 复习搜整
    Oracle PL/SQL DBA 编程实践基础
    你的人生,就是被这 9 个金句毁掉的
    编译原理学习笔记·语法分析(LL(1)分析法/算符优先分析法OPG)及例子详解
    oracle中执行execute的时候报异常ORA-01031的解决办法
    编译原理学习笔记·关于四种文法的理解以及 如何根据语言描述给出正则式或相应文法
    大范围内高效查找回文质数(回文数猜想)
  • 原文地址:https://www.cnblogs.com/qitian1/p/6462818.html
Copyright © 2020-2023  润新知