Java 图片流输出ByteArray字符串到前台转图片方法及问题处理

在某些情况下Rest API约定不允许通过流形式直接GET提供到客户端直接展示图片。如果是这样，那么就只能把后端生成的图片转成ByteArray返回给前台，让前台重新把它变成图片！

{
    "code": "200",
    "msg": "操作成功",
    "data": "iVBORw0KGgoAAAANSUhEUgAAAFAAAAAaCAIAAACvsEzwAAABxElEQVR42tWYS2rDMBCGtekJmgMU2l3PkCsUuuklCu0i9ycVqIhhHr/+kaWEGGFsvTyf5iW5XGevy+/P9aGuJnA5wvlYzJPAN2PeMXOds2Q//P55kkV2qA+tPD1/RCUl3HJmClh+u94tsBUOACvml6+3XtRHVdP59dstWeaSWh7M2Z8xsGQmgevMEbDFxnaR8+FGq2a0zJEBY2DJrOrvDKz0rFQtfXgHsJzQZd4IHDHP+TAAlmxKpI3AHbLNaJmtSbu0UiCJFD2QwGSyLNPx3QYwa9JDZhI4Mmm1EFKGvcA9aUW+quqPACsYBdzLYmBl4WppmaDVei40absFWubD9jWK0jhu1Z4qXIFXMkpLW3OZS2oruzZKzwHjPAxQ/4GB9t24J2ntQCZKu2kJv2Y3HmMfjtxdOSezoQeh0ta4Gdi2AuBIgIQPS3KrZOYEEzGnxg6PUMOe1GkpUotcgmlm8riHTYNkZoFdtShrzx5TswMjWVOLeAgYrHGKmR81xOANR7UWppOr4bsz85WylcrDS5QMRmX1BrLJcGZ247FEyViyKC9kmd3/MGPgSKXTqLy/8bEt+sfkruD4N+3tgV2MlJsMDfMPWxwKWHrFVh0AAAAASUVORK5CYII="
}

data中包含了一个PNG图片验证码的ByteArray。但是这个信息放在Base64转图片的在线工具上是不能成功的。原因是，这个ByteArray不完整。缺少了一个图片的头信息，因此解析不出来。

补全如下代码后，成功解析！

data:image/png;base64,

完整的Base64数据是这样的：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAaCAIAAACvsEzwAAABq0lEQVR42tWYvU7FMAyFs7Axs7CysCAegB2J52CH4b4/RIpkWbZ7ehwn90JlVW0SOfnin7htP2fX9+ULdIHev3m1CvB/xF4AfH3sMZfIbYCL2JXNMvxYVQL4/el+iO7lG/cB77IwZtMrXg68MF5KwNLi21+eP4eQSI93HyJ+drl3eX140yJqyR1p/Pb3u2GTZ23k8ZwC1rQhs6YywNmguD2wQI4BwM798pzhMBAC88Dhs4zZCnykyrSHebulMsoOYLM+7NVH/kwWhV2opAWATQKbi2EfyeHR6gPYMDPJvGrhU2A+ixpgvwYDOcfMAvswxkeUtrA+Wk4nMkYGu38EjOeigDX2BHCqkDIx7LEZYGDqBLC3sOkFwEyWDl+P0q8GNlGjB/tJtwN7mQD2JjUhDQyLjiWfG8NUyWwNAPZrwpVWyAwqrdCZpaVNfAAWgSdS9BHzZKW1AziVnJkpGO9jpq4C4+LGrHX3XwRGVQM7WjS4yZZZ5lX/BoKkNQ2MGXg3O9VcN7go3GVh/cmOP1/qsZNivoZLe2beg9b+9FoDDJaFmbP6QXVNOk4f8AuHtcj0arT+ywAAAABJRU5ErkJggg==

在网页上如何直接显示这个图片呢，它现在还是一堆看不懂的Base64代码吖！！！看下面。

<img id="img_prev" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAaCAIAAACvsEzwAAABq0lEQVR42tWYvU7FMAyFs7Axs7CysCAegB2J52CH4b4/RIpkWbZ7ehwn90JlVW0SOfnin7htP2fX9+ULdIHev3m1CvB/xF4AfH3sMZfIbYCL2JXNMvxYVQL4/el+iO7lG/cB77IwZtMrXg68MF5KwNLi21+eP4eQSI93HyJ+drl3eX140yJqyR1p/Pb3u2GTZ23k8ZwC1rQhs6YywNmguD2wQI4BwM798pzhMBAC88Dhs4zZCnykyrSHebulMsoOYLM+7NVH/kwWhV2opAWATQKbi2EfyeHR6gPYMDPJvGrhU2A+ixpgvwYDOcfMAvswxkeUtrA+Wk4nMkYGu38EjOeigDX2BHCqkDIx7LEZYGDqBLC3sOkFwEyWDl+P0q8GNlGjB/tJtwN7mQD2JjUhDQyLjiWfG8NUyWwNAPZrwpVWyAwqrdCZpaVNfAAWgSdS9BHzZKW1AziVnJkpGO9jpq4C4+LGrHX3XwRGVQM7WjS4yZZZ5lX/BoKkNQ2MGXg3O9VcN7go3GVh/cmOP1/qsZNivoZLe2beg9b+9FoDDJaFmbP6QXVNOk4f8AuHtcj0arT+ywAAAABJRU5ErkJggg==" style="max-width:100%;border: 1px solid gray;" data-bd-imgshare-binded="1">

据说Node.js有别的处理方式，这个我还没有了解过。HTML静态展示就是这样搞。

但这样转换对浏览器的兼容性暂时没有测试，如果有测试过的朋友不吝赐教。

Java 图片流输出ByteArray字符串到前台转图片方法及问题处理

猜你喜欢