Question

我正在制作“缩略图视图”页面。

我将缩略图存储在外部文件夹（C：/ temp / image）中，并从服务器以字节数据的形式获取。

现在我想将此数据转换为javascript图像并以HTML显示。

所以我尝试使用这些字节数据创建Blob URL。但是我收到错误“找不到文件”

这是我的代码。请让我知道我想念的东西

（这是Spring boot和angular.js）

服务

public List<Map<String, Object>> listRecentWithInfo( int userid) throws IOException, SerialException, SQLException {
    List<Map<String, Object>> recentList = dashboardDao.listRecentWithInfo( userid);

    for (Map<String, Object> map : recentList) {
        int dashboardid = (int) map.get( "DASHBOARDID");
        FileInputStream is = null;
        BufferedImage bi = null;
        ByteArrayOutputStream bao= null;
        byte[] imageByte = null;
        ResponseEntity<byte[]> res = null;
        HttpHeaders headers = new HttpHeaders();
        headers.setCacheControl(CacheControl.noCache().getHeaderValue());

        if (thumbnailDao.findOne( dashboardid) != null) {
            String path = thumbnailPath + thumbnailDao.getOne( dashboardid).getFileName();

            is = new FileInputStream(path);
            bi = ImageIO.read(is);
            System.out.println(bi.getType());
            bao = new ByteArrayOutputStream();
            ImageIO.write(bi, "png", bao);
            imageByte = bao.toByteArray();
            res = new ResponseEntity<>(imageByte, headers, HttpStatus.OK);
        }
        map.put("THUMBNAIL", res);
    }
    return recentList;
}

js

$http.get("app/dashboard/recentWithInfo").then( function( rtn) {
    rtn.data.map(item=> {
        if (item.THUMBNAIL) {

            var bytes = new Uint8Array(item.THUMBNAIL.body / 2);
            for (var i = 0; i < item.THUMBNAIL.body; i += 2) {
                bytes[i / 2] = parseInt(item.THUMBNAIL.body.substring(i, i + 2), /* base = */ 16);
            }

            // Make a Blob from the bytes
            var blob = new Blob([bytes], {type: 'image/png'});
            var imageUrl =  URL.createObjectURL(blob);
            URL.revokeObjectURL(imageUrl);
            item.THUMBNAIL = imageUrl;
        }
    });

    $scope.items = rtn.data;
        console.log(rtn.data);
    });
});

谢谢！

Answer 1

我自己解决了问题

我意识到我可以将字节数据转换为Base64

 "data:image/png;base64," + item.THUMBNAIL.body;

并且此BASE64编码的数据可用作HTML中的图像源！

如何在javascript中显示来自服务器的图像？

1 个答案: