图片转为Base64太长进行二次压缩

import net.coobird.thumbnailator.Thumbnails;
import org.apache.commons.codec.binary.Base64;
import sun.misc.BASE64Decoder;

import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;

/**
     * 压缩base64编码至70k以内
     *
     * @param base64Img
     * @return
     */
    public static String resizeImageTo70K(String base64Img) {
        try {
            BASE64Decoder decoder = new BASE64Decoder();
            byte[] bytes1 = decoder.decodeBuffer(base64Img);
            InputStream stream = new ByteArrayInputStream(bytes1);
            BufferedImage src = ImageIO.read(stream);

            BufferedImage output = Thumbnails.of(src).size(1000, 600).asBufferedImage();
            String base64 = imageToBase64(output);
            if (base64.length() - base64.length() / 8 * 2 > 70000) {
                output = Thumbnails.of(output).scale(1 / (base64.length() / 70000)).asBufferedImage();
                base64 = imageToBase64(output);
            }
            return base64;
        } catch (Exception e) {
            return base64Img;
        }
    }

    /**
     * BufferedImage转换成base64,在这里需要设置图片格式,因为我需要jpg格式就设置了jpg
     */
    public static String imageToBase64(BufferedImage bufferedImage) {
        Base64 encoder = new Base64();
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        try {
            ImageIO.write(bufferedImage, "jpg", baos);
        } catch (IOException e) {
        }
        return new String(encoder.encode((baos.toByteArray())));
    }
<dependency>
    <groupId>net.coobird</groupId>
    <artifactId>thumbnailator</artifactId>
    <version>0.4.8</version>
</dependency>

入参为已经转为Base64的字符长串,转之前length():4526480,转之后为105672

PS:Base64编码转图片 - 一个工具箱 - 好用的在线工具都在这里!

<think>好的,我现在需要解决用户提到的UniApp中TabBar图片大小超过40KB的问题。首先,用户提到了引用[1],说明当背景图小于40KB时,UniApp在编译到不支持本地背景图的平台时会自动base64。但问题在于用户的图片超过了40KB,所以无法自动换,可能导致某些平台无法显示。 用户的目标是压缩TabBar图片到40KB以下,以利用自动换功能。首先,我应该考虑常见的图片压缩方法。比如使用工具如TinyPNG或在线压缩网站,这些工具能有效减小PNG/JPG文件大小而不明显损失质量。不过需要注意保持图片尺寸合适,比如TabBar图标一般不需要太大,可能用户用了过大的分辨率,调整尺寸到合适大小(如100x100像素)也能减少体积。 另外,引用[2]提到重复注入样式的问题,但这里用户的问题主要是图片大小,所以暂时不用处理样式注入。不过需要确保压缩后的图片在项目中正确引用,避免多次重复引入。 然后,考虑图片格式。如果图片有透明背景,可能需要用PNG,否则可以考虑成JPEG,因为JPEG通常压缩率更高。另外,WebP格式可能更好,但需要考虑UniApp支持的平台是否都兼容WebP。如果支持,换成WebP可以显著减小文件大小。 还有,引用[3]提到通过分包异步化减少主包大小,但用户的问题主要是图片大小,所以可能不需要分包处理,除非还有其他大文件。但作为补充建议,可以提到如果项目整体体积过大,可以考虑分包策略,但当前问题重点是图片压缩。 接下来,用户可能需要具体的操作步骤,比如使用哪些工具、如何调整尺寸、换格式等。同时,要提醒用户在压缩后检查图片显示效果,避免过度压缩导致模糊。另外,确认在UniApp配置文件(如pages.json)中正确引用压缩后的图片路径,避免路径错误。 可能的解决方案步骤: 1. 使用图片压缩工具(如TinyPNG)压缩图片。 2. 调整图片尺寸到合适大小。 3. 图片格式为WebP(如果平台支持)。 4. 手动换为base64并内联,但需注意维护性。 5. 检查配置文件中图片路径是否正确。 最后,要确保回答结构清晰,分点说明,并引用相关参考资料。同时,生成相关问题,帮助用户进一步解决可能遇到的问题,比如其他优化方法或处理不支持WebP的情况。</think>针对UniApp中TabBar图片大小超过40KB的问题,以下是分步解决方案: ### 一、直接压缩图片体积 1. **在线压缩工具** 使用[TinyPNG](https://tinypng.com/)或[Compressor.io](https://compressor.io/),可减少PNG/JPG体积50%-80%且保持清晰度。例如:原图60KB通过TinyPNG压缩后通常可降至30KB左右[^1]。 2. **调整图片尺寸** TabBar图标推荐尺寸为`50x50px`至`100x100px`。使用Photoshop或在线工具(如[PicResize](https://picresize.com/))缩小尺寸,可显著降低文件体积。 3. **格式换优化** - 若无透明度需求,将PNG转为JPEG(压缩率更高) - 支持WebP格式的平台可图片为WebP(体积比PNG小30%) ```bash # 使用命令行工具cwebp换PNG到WebP cwebp -q 80 input.png -o output.webp ``` --- ### 二、手动Base64编码(兼容性方案) 若仍需使用大尺寸图片,可手动将图片转为Base64并内联到CSS中: ```css .tabbar-icon { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...'); } ``` *注意:此方法会增加代码体积,适用于少量图片[^2]* --- ### 三、配置文件引用优化 在`pages.json`中确保使用压缩后的图片路径: ```json "tabBar": { "list": [{ "iconPath": "static/tabbar/home_compressed.png", "selectedIconPath": "static/tabbar/home-selected_compressed.webp" }] } ``` --- ### 四、进阶建议 1. **启用分包异步化** 若主包体积过大,可将非核心资源放入分包,参考引用[3]的分包策略降低主包压力[^3]。 2. **构建时自动压缩** 配置`vue.config.js`实现编译时自动压缩图片: ```javascript module.exports = { chainWebpack: (config) => { config.module .rule('images') .test(/\.(png|jpe?g|webp)$/) .use('image-webpack-loader') .loader('image-webpack-loader') .options({ bypassOnDebug: true }) } } ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值