读取sqlserver数据库中varbinary(max)类型的内容,并将图片信息显示在前端页面
目录
1.varbinary(max)的说明
varbinary(max)
是一种SQL Server数据库字段类型,用于存储二进制数据,可以存储最大长度的二进制数据。以下是关于 varbinary(max)
的说明:
-
存储容量: 可以存储最大长度为 2^31-1 字节(即 2,147,483,647 字节),这使得它非常适合存储大型二进制数据,例如图片、音频或视频文件等。
-
用途: 主要用于存储不需要字符集或排序规则的二进制数据,通常是不需要进行文本排序或比较的数据。
-
与
varbinary
的区别:varbinary(max)
可以存储超过 8,000 字节的数据,而varbinary
有大小限制,最大长度为 8,000 字节。 -
数据处理: 在数据库中存储的二进制数据可以是任何类型的文件或数据流,通过数据库管理系统可以进行存储、检索和管理。
总结而言,varbinary(max)
是SQL Server中用于存储大型二进制数据的灵活且高容量的字段类型,适合于需要存储大型文件或二进制数据流的场景。
2.图片显示
①使用mybatis查询二进制数据
Object selImageInfo(@Param("docId") Integer docId, @Param("id") Integer id, @Param("docType") DocTypeEntity docType, @Param("dbName") String dataIndex);
<select id="selImageInfo" resultType="java.lang.Object">
SELECT
File_Images.fi_Image
FROM ${docType.tableName},File_Images
WHERE ${docType.tableName}.${docType.uniqueKey} = #{id}
and doc_id = #{docId}
and ${docType.tableName}.${dbName} = File_Images.fi_Id
</select>
查询结果返回Object类型,网上有说使用byte[]作为返回值,我使用的时候报错:
[B cannot be cast to [Ljava.lang.Object;"表示尝试将一个字节数组(字节数组在Java中表示为byte[])转换成Object数组,但这是不兼容的转换。
②将字节数组转换为base64格式的字符串
Object image = mapper.selImageInfo(docId, id, docType, column.getDataIndex());
String base64Encoded = Base64.getEncoder().encodeToString((byte[])image);
// ByteArrayInputStream bis = new ByteArrayInputStream((byte[])image);
// BufferedImage imageInfo = ImageIO.read(bis);
//
// // 缩放比例为0.5
// double scale = 0.5;
//
// int targetWidth = (int) (imageInfo.getWidth() * scale);
// int targetHeight = (int) (imageInfo.getHeight() * scale);
//
// BufferedImage resizedImage = new BufferedImage(targetWidth, targetHeight, imageInfo.getType());
// Image img = imageInfo.getScaledInstance(targetWidth, targetHeight, Image.SCALE_SMOOTH);
// resizedImage.createGraphics().drawImage(img, 0, 0, null);
//
// // 将图片转换为Base64
// ByteArrayOutputStream baos = new ByteArrayOutputStream();
// ImageIO.write(resizedImage, "jpg", baos);
// byte[] imageBytes = baos.toByteArray();
// String base64String = Base64.getEncoder().encodeToString(imageBytes);
将sql返回object变量强转为byte数组,然后转换为base64格式的字符串。
后面注释的代码的进行图片的缩放处理,也可以在前端控制图片的显示大小。
③显示图片
html
<a-modal v-model:visible="visible" @ok="handleOk" :hide-cancel="true" ok-text="关闭" width="50%">
<div style="height: 500px;">
<img class="centered-img" :src="imageSrc" alt="Image from database" />
</div>
</a-modal>
js
const cellClick = async (record: any, columnInfo: any, ev: any) => {
// 当点击的列信息为图片类型并且图片不为空时,则展示图片
if(columnInfo.colType == 16 && record[columnInfo.dataIndex]){
// 查询图片信息
const reqBody = {
docId:prop.docId,
id:record.id,
column:columnInfo
}
const res = await getImage(reqBody)
imageSrc.value = 'data:image/jpg;base64,' + res
visible.value = true
}
}
css
.centered-img {
display: block; /* 确保图像作为块级元素显示 */
margin: 0 auto; /* 设置左右外边距为自动,实现水平居中 */
width: 90%;
height: 90%;
}
将 'data:image/jpg;base64,'和后端传递的base64格式的字符串进行拼接,设置到img的src属性中,然后设置css控制显示图片的大小
3.总结
imageIO的使用
原文地址:https://blog.csdn.net/m0_72167535/article/details/140360489
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!