數(shù)據(jù)庫實體類：

package com.easy.kotlin.picturecrawler.entityimport java.util.* import javax.persistence.*@Entity @Table(indexes = arrayOf(Index(name = "idx_url", unique = true, columnList = "url"),Index(name = "idx_category", unique = false, columnList = "category"))) class Image {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)var id: Long = -1@Versionvar version: Int = 0@Column(length = 255, unique = true, nullable = false)var category: String = ""var isFavorite: Int = 0@Column(length = 255, unique = true, nullable = false)var url: String = ""var gmtCreated: Date = Date()var gmtModified: Date = Date()var isDeleted: Int = 0 //1 Yes 0 Novar deletedDate: Date = Date()@Lobvar imageBlob: ByteArray = byteArrayOf()/* 0-Baidu 1-Gank */var sourceType: Int = 0override fun toString(): String {return "Image(id=$id, version=$version, category='$category', isFavorite=$isFavorite, url='$url', gmtCreated=$gmtCreated, gmtModified=$gmtModified, isDeleted=$isDeleted, deletedDate=$deletedDate)"} } 其中的 @Lob var imageBlob: ByteArray = byteArrayOf() 這個字段存儲圖片的 Base64內(nèi)容。

存庫代碼

val Image = Image()Image.category = "干貨集中營福利"Image.url = urlImage.sourceType = 1Image.imageBlob = getByteArray(url)logger.info("Image = ${Image}")imageRepository.save(Image)

其中的getByteArray(url) 函數(shù)：

private fun getByteArray(url: String): ByteArray {val urlObj = URL(url)return urlObj.readBytes()}

前端 html 展示圖片代碼：

{title: '圖片',field: 'imageBlob',align: 'center',valign: 'middle',formatter: function (value, row, index) {// var html = "<img onclick=downloadImage('" + value + "') width='100%' src='" + value + "'>"var html = '<img onclick="downBase64Image(this.src)" width="100%" src="https://img-blog.csdnimg.cn/2022010623525946996.jpg' + value + '"/>'return html}}

點擊下載 js ：

function downloadImage(src) {var $a = $("<a></a>").attr("href", src).attr("download", "sotu.png");$a[0].click(); }function downBase64Image(url) {var blob = base64Img2Blob(url);url = window.URL.createObjectURL(blob);var $a = $("<a></a>").attr("href", url).attr("download", "sotu.png");$a[0].click(); }function base64Img2Blob(code) {var parts = code.split(';base64,');var contentType = parts[0].split(':')[1];var raw = window.atob(parts[1]);var rawLength = raw.length;var uInt8Array = new Uint8Array(rawLength);for (var i = 0; i < rawLength; ++i) {uInt8Array[i] = raw.charCodeAt(i);}return new Blob([uInt8Array], {type: contentType}); }

或者：

function downloadFile(fileName, content) {var aLink = document.createElement('a');var blob = base64Img2Blob(content); //new Blob([content]);var evt = document.createEvent("HTMLEvents");evt.initEvent("click", false, false);//initEvent 不加后兩個參數(shù)在FF下會報錯aLink.download = fileName;aLink.href = URL.createObjectURL(blob);aLink.dispatchEvent(evt); }

總結(jié)

以上是生活随笔為你收集整理的MySQL 直接存储图片并在 html 页面中展示，点击下载的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。