通过google插件Thumbnails实现图片指定大小压缩

1、由于商户进件时,上游对图片大小有要求(500kb以下),而我们平台图片过大(10M以上),所以必须通过程序将图片压缩后再上传;

2、java api可以通过ImageIO实现图片压缩,但效果不好,图片压缩后出现变红现象,故舍弃;

3、测试谷歌Thumbnails插件后,觉得还不错,故选用该插件来实现;

4、谷歌插件固然好,能指定不同的参数进行压缩,例如:宽高(size)、缩放(scale)、旋转()、指定质量比(outputQuality),但不能指定图片占存大小进行压缩(如果可以,请留言告知我,感激不尽!),故自己实现了此功能;

代码功能:

1、指定源文件路径、目标文件路径、最大图片大小(单位kb)、递归压缩的比率(0-1之间,建议0.8),如果测试出现java OutOfMemoryError,大多是递归压缩比例设置有问题;

2、可以实现图片格式之间的互转,只需在源文件和目标文件路径指定即可;

3、通过测试可知,png转jpg图片占存大小变小,jgp转png图片占存大小变大;

引用的jar包:

thumbnailator-0.4.8.jar

代码如下:

[java]  view plain  copy
  1. import java.awt.image.BufferedImage;  
  2. import java.io.File;  
  3. import java.io.IOException;  
  4. import java.math.BigDecimal;  
  5.   
  6. import javax.imageio.ImageIO;  
  7.   
  8. import net.coobird.thumbnailator.Thumbnails;  
  9.   
  10. import org.apache.commons.lang3.StringUtils;  
  11.   
  12. public class PicUtils {  
  13.   
  14.     public static void main(String[] args) {  
  15.   
  16.         PicUtils.commpressPicForScale("C:\\Users\\123\\Desktop\\1.png",  
  17.                 "C:\\Users\\123\\Desktop\\12.jpg"5000.8); // 图片小于500kb  
  18.     }  
  19.   
  20.     /** 
  21.      * 根据指定大小和指定精度压缩图片 
  22.      *  
  23.      * @param srcPath 
  24.      *            源图片地址 
  25.      * @param desPath 
  26.      *            目标图片地址 
  27.      * @param desFilesize 
  28.      *            指定图片大小,单位kb 
  29.      * @param accuracy 
  30.      *            精度,递归压缩的比率,建议小于0.9 
  31.      * @return 
  32.      */  
  33.     public static String commpressPicForScale(String srcPath, String desPath,  
  34.             long desFileSize, double accuracy) {  
  35.         if (StringUtils.isEmpty(srcPath) || StringUtils.isEmpty(srcPath)) {  
  36.             return null;  
  37.         }  
  38.         if (!new File(srcPath).exists()) {  
  39.             return null;  
  40.         }  
  41.         try {  
  42.             File srcFile = new File(srcPath);  
  43.             long srcFileSize = srcFile.length();  
  44.             System.out.println("源图片:" + srcPath + ",大小:" + srcFileSize / 1024  
  45.                     + "kb");  
  46.   
  47.             // 1、先转换成jpg  
  48.             Thumbnails.of(srcPath).scale(1f).toFile(desPath);  
  49.             // 递归压缩,直到目标文件大小小于desFileSize  
  50.             commpressPicCycle(desPath, desFileSize, accuracy);  
  51.   
  52.             File desFile = new File(desPath);  
  53.             System.out.println("目标图片:" + desPath + ",大小" + desFile.length()  
  54.                     / 1024 + "kb");  
  55.             System.out.println("图片压缩完成!");  
  56.         } catch (Exception e) {  
  57.             e.printStackTrace();  
  58.             return null;  
  59.         }  
  60.         return desPath;  
  61.     }  
  62.   
  63.     private static void commpressPicCycle(String desPath, long desFileSize,  
  64.             double accuracy) throws IOException {  
  65.         File srcFileJPG = new File(desPath);  
  66.         long srcFileSizeJPG = srcFileJPG.length();  
  67.         // 2、判断大小,如果小于500kb,不压缩;如果大于等于500kb,压缩  
  68.         if (srcFileSizeJPG <= desFileSize * 1024) {  
  69.             return;  
  70.         }  
  71.         // 计算宽高  
  72.         BufferedImage bim = ImageIO.read(srcFileJPG);  
  73.         int srcWdith = bim.getWidth();  
  74.         int srcHeigth = bim.getHeight();  
  75.         int desWidth = new BigDecimal(srcWdith).multiply(  
  76.                 new BigDecimal(accuracy)).intValue();  
  77.         int desHeight = new BigDecimal(srcHeigth).multiply(  
  78.                 new BigDecimal(accuracy)).intValue();  
  79.   
  80.         Thumbnails.of(desPath).size(desWidth, desHeight)  
  81.                 .outputQuality(accuracy).toFile(desPath);  
  82.         commpressPicCycle(desPath, desFileSize, accuracy);  
  83.     }  
  84.   
  85. }  
<!--content begin--> <div class="hot">     <h2>最热视频</h2>     <video src="video/pian.mp4" controls></video>     <a href=" ">< img src="images/pic02.jpg" ></a >     <a href="#">< img src="images/pic03.jpg" ></a >     <a href="#">< img src="images/pic04.jpg" ></a >     <a href="#">< img src="images/pic05.jpg" ></a >     <a href="#">< img src="images/pic06.jpg" ></a > </div> <div class="share">     <h2>观影达人</h2>     <a href="#">         < img src="images/pic07.jpg" >         <div class="cur">             < img src="images/pic01.png" >             <h3>nosay</h3>             <p>视频: 34 订阅粉丝: 30112</p >             <span>订阅</span>         </div>     </a >     <a href="#">         < img src="images/pic07.jpg" >         <div class="cur">             < img src="images/pic02.png" >             <h3>nosay</h3>             <p>视频: 34 订阅粉丝: 30112</p >             <span>订阅</span>         </div>     </a >     <a href="#">         < img src="images/pic07.jpg" >         <div class="cur">             < img src="images/pic03.png" >             <h3>nosay</h3>             <p>视频: 34 订阅粉丝: 30112</p >             <span>订阅</span>         </div>     </a >     <a href="#">         < img src="images/pic07.jpg" >         <div class="cur">             < img src="images/pic04.png" >             <h3>nosay</h3>             <p>视频: 34 订阅粉丝: 30112</p >             <span>订阅</span>         </div>     </a > </div> <!--content end-->代码结构分析
03-13
<think>嗯,用户这次又给了一个HTML代码块,需要我分析结构。先看看他之前的历史对话,之前是关于横幅轮播的分析和改进建议,现在轮到内容区块了。用户可能是在开发一个影视相关的网站,需要优化代码结构和可访问性。 首先,我需要仔细阅读用户提供的代码。代码分为两部分,一个是class为"hot"的div,里面包含最热视频和一个视频元素,以及图片链接。另一个是class为"share"的div,里面是观影达人部分,有个链接,每个链接里包含图片、用户信息和订阅按钮。 接下来,按照之前的模式,我需要分结构分析,指出组成部分,然后列出问题,给出改进建议。用户之前的回复结构是分核心组成部分、关键问题、扩展建议等,这次应该保持一致性。 注意到代码中有一些明显的错误,比如`< img`标签前的空格,这不符合HTML语法,必须纠正。此外,很链接的href属性是空的或者#,可能需要修正为有效的URL或使用按钮元素,特别是交互元素如订阅按钮,用span可能不合适。 可访问性方面,图片缺少alt属性,这对屏幕阅读器用户不友好。另外,观影达人部分的所有内容都被包裹在a标签里,这可能不合适,尤其是当里面有个交互元素时,应该考虑使用更合适的标签结构,比如用div包裹,内部使用按钮。 另外,结构语义化不足,比如最热视频部分可以用section或article标签,而不是div。视频元素使用了controls属性,但可能需要添加更的属性如preload,以及为视频添加字幕轨道。 在观影达人部分,每个达人的信息重复,h3标签的内容都是"nosay",这可能是占位符,需要替换为实际数据。订阅按钮使用span,应该改为button元素,并添加ARIA属性以提高可访问性。 响应式设计方面,可能需要考虑图片和视频在不同屏幕尺寸下的适配,使用srcset或者picture元素。同时,视频部分最好提供种格式的源文件,使用source标签而非直接src属性。 性能方面,图片和视频应使用懒加载,添加loading="lazy"属性。此外,图片可能需要进行压缩优化,减少加载时间。 最后,建议用户将结构模块化,使用更语义化的HTML5元素,增强SEO和可访问性。可能还需要JavaScript来实现交互功能,比如订阅按钮的点击事件,但用户可能暂时不需要这部分,所以先集中在HTML结构的优化上。 总结下来,我需要分点列出结构分析,指出问题,给出具体的改进建议,并保持与之前的回复格式一致,使用中文,注意LaTeX公式的正确使用。</think>以下是对您提供的HTML代码结构的分析及改进建议,采用分层解析框架: $$代码整体结构 = 热门内容区 + 用户分享区$$ $$\begin{cases} hot \rightarrow 视频展示模块 \\ share \rightarrow 用户卡片模块 \end{cases}$$ 一、模块分解与功能解析 1. 最热视频区块 (`<div class="hot">`) $$模块构成 = 标题 + 主视频 + 缩略图导航$$ ```html 组件树 ├─标题:<h2>最热视频</h2> ├─视频播放器:<video>(含controls原生控件) └─缩略图组:5个<a>包裹的<img>(应为预览图导航) ``` 2. 用户分享区块 (`<div class="share">`) $$用户卡片 = 头像 + 信息面板 + 交互按钮$$ ```html 组件模式 <a href="#">   ├─用户头像:<img>(重复使用pic07.jpg)   └─信息容器:<div class="cur">       ├─标识图标:<img>(pic0[1-4].png)       ├─用户名:<h3>       ├─统计数据:<p>       └─订阅按钮:<span>(非标准交互元素) ``` 二、关键问题诊断 1. 语义缺陷 - 视频区块缺少语义容器:   $$建议方案 → 使用<figure>包裹视频及标题$$ - 用户卡片误用链接标签:   $$正确选择 → 应使用<article>代替<a>作为卡片容器$$ 2. 可访问性问题 - 图像缺失替代文本:   $$\forall <img> \Rightarrow 必须添加alt属性$$ - 交互元素不规范:   $$订阅按钮<span> → 应改为<button>$$ 3. 代码规范问题 ```html 高频错误模式: < img → 应修正为<img(删除余空格) href=" " → 空链接需修正为#或真实地址 重复图片资源:pic07.jpg在处重复使用 ``` 三、改进方案示范 1. 优化后的视频区块 ```html <section class="video-hot" aria-label="热门视频专区">   <header>     <h2>最热视频</h2>     <figure>       <video controls preload="metadata"              poster="images/preview.jpg">         <source src="video/pian.mp4" type="video/mp4">         <track kind="captions" src="captions.vtt" srclang="zh">       </video>       <figcaption>当前热播视频</figcaption>     </figure>   </header>     <nav class="video-thumbnails">     <ul>       <li><a href="/video1"><img src="..." alt="视频1缩略图"></a></li>       ...其他缩略图...     </ul>   </nav> </section> ``` 2. 重构后的用户卡片 ```html <div class="creators" role="list">   <article class="creator-card" role="listitem">     <img src="images/avatar1.jpg"          alt="用户nosay的头像"          class="avatar">     <div class="profile">       <h3>nosay</h3>       <dl class="stats">         <dt>视频数</dt><dd>34</dd>         <dt>订阅数</dt><dd>30112</dd>       </dl>       <button class="subscribe-btn"               aria-label="订阅nosay">         <span aria-hidden="true">✓</span> 已订阅       </button>     </div>   </article>   ...其他用户卡片... </div> ``` 四、增强功能建议 1. 视频区块优化 $$增强功能 = 预览悬浮层 + 分集选择器$$ ```html <div class="video-extras">   <div class="hover-preview" data-video="preview.mp4"></div>   <select class="episode-selector">     <option>第1集</option>     ...   </select> </div> ``` 2. 用户卡片交互 $$增强交互 = 关注状态管理 + 社交分享$$ ```javascript // 伪代码示例 document.querySelectorAll('.subscribe-btn').forEach(btn => {   btn.addEventListener('click', (e) => {     e.target.classList.toggle('subscribed');     e.target.textContent = e.target.classList.contains('subscribed')       ? '✓ 已订阅'       : '订阅';   }); }); ``` 五、性能优化方案 1. 资源加载策略 $$优化公式 = 懒加载 + 响应式图片$$ ```html <img src="placeholder.jpg"      data-src="content.jpg"      loading="lazy"      srcset="small.jpg 480w, medium.jpg 800w"      sizes="(max-width: 600px) 480px, 800px"      alt="优化后的图片描述"> ``` 2. 视频交付优化 $$视频交付 = 自适应码流 + 格式兼容$$ ```html <video controls>   <source src="video.webm" type="video/webm">   <source src="video.mp4" type="video/mp4">   <p>您的浏览器不支持HTML5视频</p> </video> ``` 如果需要更深入的代码分层架构分析或具体样式实现方案,请告知具体需求方向。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值