微信公众号开发--善忘影视(十)

  |   0 评论   |   3,890 浏览

优化列表加载速度,列表图片压缩

如下图左边的图片 列表显示页

运行了一段时间后,发现打开公众号,或者网页的列表速度很慢,用chrome查看了一下加载时间, 主要是还是在加载图片上,毕竟列表加载那么大的图片,是一件很费时间的事情,现在我就来优化它。

主要分三个步骤 1. 获取列表图片(获取详情页中的海报图片) 2. 压缩图片 3. 上传云存储图片,保存路径到数据库中 3. 修改显示列表图片,显示压缩后的图片

获取列表图片

主要是通过定时器来获取列表数据,然后分析详情页的里面的图片地址,下载对应图片。 关键代码如下

List<MovieCrawl> movieCrawlList =  movieCrawlMapper.listNotDealImgByCreateTime();
        try {
            movieCrawlList.forEach(mc -> {
                String content = mc.getContent();
                if (StringUtils.isNotNull(content)) {
                    Document doc = Jsoup.parse(content);
                    Elements imgs = doc.select("img");
                    StringBuffer stringBuffer = new StringBuffer();
                    mc.setSmallPic("img/logo.jpg");
                    if (imgs.size() > 0) {
                        Iterator<Element> it = imgs.iterator();
                        String src = it.next().attr("src");
                        //mc.setFirstImg(src);
                        String smallPic = downloadFileResizeImg(src);
                        if (StringUtils.isNotNull(smallPic)) {
                            String ext = FileUtil.getExt(new File(smallPic).getName());
                            String key = UploadUtils.generateFilename("img/small", ext);
                            try {
                                uploadQiNiu.upload(smallPic,key);
                                mc.setSmallPic(key);
                            } catch (IOException e) {
                                logger.error(e.getMessage(), e);
                            }
                        }
                    }
                }
                movieCrawlMapper.updateByPrimaryKeySelective(mc);
            });
        } catch (Exception e) {
            logger.error(e.getMessage(), e);
        }

压缩图片

上面代码中String smallPic = downloadFileResizeImg(src); 就是表示下载图片 代码如下,里面还有压缩图片的代码

```public String downloadFileResizeImg(String url) { try { String uuid = UUIDUtils.getUUID(); URL u = new URL(url); URLConnection conn = u.openConnection(); //conn.connect(); //设置可以输出 conn.setDoOutput(true); //设置可以读取默认是true conn.setDoInput(true); //设置不适用缓存,因为我们的数据是实时更新的 conn.setUseCaches(false); //设置所有的http连接自动处理重定向 HttpURLConnection.setFollowRedirects(true); //设置本次连接自动处理重定向 conn.setAllowUserInteraction(true); //模拟ios 谷歌浏览器访问 conn.setRequestProperty("User-Agent", "Mozilla/5.0 (Macintosh; Intel Mac OS X 1075) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.64 Safari/537.11"); InputStream is = conn.getInputStream(); if (url.indexOf("?") > -1) { url = url.substring(0, url.indexOf("?")); } String filename = url.substring(url.lastIndexOf("/") + 1); filename = filename.replaceAll("[\-\::\<>|\?]", "_") .replaceAll("\s", "");

        filename = uuid + "_" + filename;
        System.out.print(filename);
    String downloadpath = ResourceBundleUtils.getAppAbstractPath();
    File t_file = new File(downloadpath + filename);

    OutputStream os = new FileOutputStream(t_file);
    int tmp = 0;
    while ((tmp = is.read()) != -1) {
        os.write(tmp);
    }
    os.close();
    is.close();


    String ext = FileUtil.getExt(filename);
    File deskFile = new File(downloadpath + uuid + "180180." + ext);


    isi.resizeFix(t_file, deskFile, 180, 180);

    return deskFile.getAbsolutePath();

} catch (IOException e) {
    e.printStackTrace();
} catch (Exception e) {
    e.printStackTrace();
}

return null;

}```

压缩图片代码isi.resizeFix(t_file, deskFile, 180, 180);

public static void resizeFix(File srcFile, File destFile, int boxWidth,
            int boxHeight) throws IOException, MagickException {
        ImageInfo info = new ImageInfo(srcFile.getAbsolutePath());
        MagickImage image = new MagickImage(info);
        // 计算缩小宽高
        Dimension dim = image.getDimension();
        int width = (int) dim.getWidth();
        int height = (int) dim.getHeight();
        int zoomWidth;
        int zoomHeight;
        if ((float) width / height > (float) boxWidth / boxHeight) {
            zoomWidth = boxWidth;
            zoomHeight = Math.round((float) boxWidth * height / width);
        } else {
            zoomWidth = Math.round((float) boxHeight * width / height);
            zoomHeight = boxHeight;
        }
        // 缩小
        MagickImage scaled = image.scaleImage(zoomWidth, zoomHeight);
        // 输出
        scaled.setFileName(destFile.getAbsolutePath());
        scaled.writeImage(info);
        scaled.destroyImages();
    }
    ```

####上传图片到云存储
我这里用的是七牛, 以前用的是阿里云的oss,现在不免费了,就先用用有一定免费额度的七牛了。都是有线程的api可以调用,不过七牛里面设置区域比较坑,在调用上传的时候记得加上这句。Config.zone = Zone.zone1();
不然总是返回然后设置zone的问题。

public void upload(String filePath, String key) throws IOException { try { Config.zone = Zone.zone1(); //调用put方法上传 Response res = uploadManager.put(filePath, key, getUpToken()); //打印返回的信息 System.out.println(res.toString()); } catch (QiniuException e) { Response r = e.response; // 请求失败时打印的异常的信息 System.out.println(r.toString()); try { //响应的文本信息 System.out.println(r.bodyString()); } catch (QiniuException e1) { //ignore } } } ```

最后修改对应显示的列表

<img class="weui_media_appmsg_thumb" src="${item.firstImg}" alt="">

评论

发表评论

validate