今天晚上在改造轮播图。

原来的代码是这种

<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, 则图片在上传前不进行压缩。

默觉得:
{
    width: 1600,
    height: 1600,
    // 图片质量。仅仅有type为`image/jpeg`的时候才有效。
    quality: 90,
    // 是否同意放大,假设想要生成小图的时候不失真。此选项应该设置为false.
    allowMagnify: false,
    // 是否同意裁剪。
    crop: false,
    // 是否保留头部meta信息。

    preserveHeaders: true,
    // 假设发现压缩后文件大小比原来还大,则使用原来图片
    // 此属性可能会影响图片自己主动纠正功能
    noCompressIfLarger: false,
    // 单位字节,假设图片大小小于此值。不会採用压缩。
    compressSize: 0
}

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

为了方便,直接在upload.js中添加
“ compress:false,” 不压缩,这个时候。上传图片就是“原样”了。

至于 上面配置的“width:1600px”,我推測是图片的宽度和高度达到一定条件就压缩。

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

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

射线-的正式启动2创业旅程
2015年3月18日 23时间
湖北-武汉-循礼门 

妈蛋:kinMaxShow旋转木马异常,WebUploader图片上传坑爹,图像被压缩的更多相关文章

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

    今天晚上在改造轮播图. 原来的代码是这样的: <div> <img src="${static}/image/index/banner/`.jpg" /> ...

  2. 百度上传工具webuploader,图片上传附加参数

    项目中需要上传视频,图片等资源.最先做的是上传图片,开始在网上找了一款野鸡插件,可以实现图片上传预览(无需传到后台).但是最近这个插件出了莫名的问题,不易修复,一怒之下,还是决定找个大点的,靠谱的插件 ...

  3. WebUploader 图片上传控件使用范例

    ​官网 http://fex.baidu.com/webuploader/getting-started.html 其实官网写的挺详细的,看官网也可以了. 引入资源 使用Web Uploader文件上 ...

  4. WebUploader文件图片上传插件的使用

    最近在项目中用到了百度的文件图片上传插件WebUploader.分享给大家 需要在http://fex.baidu.com/webuploader/download.html点击打开链接下载WebUp ...

  5. java实现图片上传功能,并返回图片保存路径

    1.前端html <div class="form-group">     <label for="inputPassword3" class ...

  6. Asp.Net Mvc 使用WebUploader 多图片上传

    来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...

  7. 图片上传webuploader

    /** * 基于jquery的图片上传控件 */!function ($) { "use strict"; //定义上传事件 var upImgEvent = { fileQueu ...

  8. 图片上传组件webuploader

    前端组件webuploader 当时也是搞了很久参考这种demo,但是没记.现在事后大致总结下.直接上大概代码(我使用asp.net  MVC来做的): 执行顺序:(get)Record/Add——A ...

  9. easyui+webuploader+ckeditor实现插件式多图片上传-添加图片权限(图片上传人是谁,只能看到自己的图片)

    需求: 实现过程及思路 1.先页面布局 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=" ...

随机推荐

  1. HTTPS原理(转)

    HTTPS是什么 HTTPS全称为Hypertext Transfer Protocol over Secure Socket Layer,及以安全为目标的HTTP通道,简单说就是HTTP的安全版本. ...

  2. FZU 2113(数位dp)

    题目连接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=38054 题意:求区间[a,b]中包含'1'的个数. 分析:数位dp ...

  3. Spring框架简单介绍

    原文地址:  http://my.oschina.net/myriads/blog/37922 1.使用框架的意义与Spring的主要内容 随着软件结构的日益庞大,软件模块化趋势出现,软件开发也须要多 ...

  4. Python重写C语言程序100例--Part6

    ''' [程序41] 题目:学习static定义静态变量的使用方法 1.程序分析: 2.程序源码: ''' # python没有这个功能了,仅仅能这样了:) def varfunc(): var = ...

  5. LB 负载均衡的层次结构(转)

    作为后端应用的开发者,我们经常开发.调试.测试完我们的应用并发布到生产环境,用户就可以直接访问到我们的应用了.但对于互联网应用,在你的应用和用户之间还隔着一层低调的或厚或薄的负载均衡层软件,它们不显山 ...

  6. Java虚拟机几个命令行参数说明

    一.运行class文件 执行带main方法的class文件,Java虚拟机命令参数行为: java <CLASS文件名> 注意:CLASS文件名不要带文件后缀.class 例如: java ...

  7. 怎样从Hadoop安全模式中进入正常模式

    问题: 在Hadoop中,新建一个文件夹,报错了,提示mkdir: org.apache.hadoop.hdfs.server.namenode.SafeModeException: Cannot c ...

  8. Qt之QComboBox(基本应用、代理设置)

    QComboBox下来列表比较常用,用户可以通过选择不同的选项来实现不同的操作,如何实现自己的下拉列表呢? 很多人在问QComboBox如何设置选项的高度.代理等一些问题!今天就在此分享一下自己的一些 ...

  9. android平台TextView使用ImageSpan画廊GIF图像

    android-gif-drawable(https://github.com/koral--/android-gif-drawable/releases)开源项目---是一个蛮不错的android ...

  10. 【Unity Shaders】使用Unity Render Textures实现画面特效——画面特效中的亮度、饱和度和对照度

    本系列主要參考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同一时候会加上一点个人理解或拓展. 这里是本书全部的插图. 这里是本书所需的代码 ...