妈蛋：kinMaxShow旋转木马异常，WebUploader图片上传坑爹，图像被压缩

今天晚上在改造轮播图。

原来的代码是这种：

<div>

</div>

<div>

</div>

<div>

</div>

为了方便管理。轮播图后台能够管理。所曾经台的轮播图图片，应该从数据库中获得。

这个功能，就是两三分钟的事，马上就搞定了。

改造后的代码：

<#if bannerPhotoList??

&& bannerPhotoList?size gt 0 >
<#list

bannerPhotoList as item>

<div>

</div>

</#list> <#else>

<div>

</div>

<div>

</div>

<div>

</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时间
湖北-武汉-循礼门

转载于:https://www.cnblogs.com/bhlsheji/p/5041392.html

妈蛋：kinMaxShow旋转木马异常，WebUploader图片上传坑爹，图像被压缩相关推荐

妈蛋：kinMaxShow轮播图异常，WebUploader图片上传坑爹，图片被压缩了
2019独角兽企业重金招聘Python工程师标准>>> 今天晚上在改造轮播图. 原来的代码是这样的: <div> <img src="${static}/ ...
WebUploader图片上传实例
webuploader-1.1.5 图片上传实例本插件基于 webuploader插件进行了封装,提供了三种常用视图,并对常用上传功能进行了JS封装,视图,样式,业务逻辑都已封装(JS),可以直接 ...
webuploader结合php实现图片上传到本地和保存数据库
webuploader结合php实现图片上传到本地和保存数据库,核心功能是以下三点: 一.上传前图片预览二.上传图片到本地文件夹三.上传图片路径和图片对应的设备编号到mysql数据库 Webupl ...
WebUploader文件图片上传插件的使用
最近在项目中用到了百度的文件图片上传插件WebUploader.分享给大家需要在http://fex.baidu.com/webuploader/download.html点击打开链接下载WebUp ...
图片上传之webuploader和qiniuUploader
1.身份证上传(包括手持.正反面,即不同的上传按钮,单次上传一张图片) jade上传文件部分代码 .form-group.required.identifylabel(for="identi ...
使用WebUploader实现图片上传
前言: 案例使用的开发工具:eclipse 不足之处希望各位大佬们多多指教(￣▽￣*)顶 1. jar包 2. js文件 <link rel="stylesheet" typ ...
springMVC+WebUploader实现多图片上传
1.webuploader的文件下载链接:http://pan.baidu.com/s/1jIdty30 密码:un47 2.spring的静态资源映射 & ...
webuploader实现批量图片上传功能
这个功能是我来新公司做的第一个工作.因为新公司的一个项目是涉及到房产中介管理系统,所以需要提供用户批量上传图片的功能.于是在网上找到了webuploader插件,调用这个api功能. WebUploa ...
Java分布式二手房项目尚好房第五课图片上传及前端房源展示
尚好房:图片上传一.图片存储方案 1.介绍在实际开发中,我们会有很多处理不同功能的服务器.例如: 应用服务器:负责部署我们的应用数据库服务器:运行我们的数据库文件服务器:负责存储用户上传文件的 ...

妈蛋：kinMaxShow旋转木马异常，WebUploader图片上传坑爹，图像被压缩

妈蛋：kinMaxShow旋转木马异常，WebUploader图片上传坑爹，图像被压缩相关推荐

最新文章

热门文章