如何使用 Golang 和 gin-gonic 即时创建 HTML 中的 render/show 图像
How to render/show images in HTML created on the fly with Golang and gin-gonic
我正在生成 QR
代码,紧接着我需要在 HTML
中显示它们而不将它们另存为图像。
到目前为止我可以生成它们但是我在 HTML
中渲染它们时遇到问题
我这里有生成 QR
的 golang
代码和尝试呈现它们的 HTML
模板
golang
import (
"fmt"
"github.com/gin-gonic/gin"
qrcode "github.com/skip2/go-qrcode"
)
func renderQRExport(c *gin.Context){
var images [][]byte
var img []byte
var err error
for i := 0; i < 25; i++ {
img, err = qrcode.Encode("https://example.org", qrcode.Medium, 256)
images = append(images, img)
if err != nil {
fmt.Print(err)
}
}
render(c, gin.H{
"images": images,
}, "qr.html")
}
HTML 模板
<!doctype html>
<html class="no-js" lang="">
<head>
<title>QR export</title>
{{template "imports.html"}}
</head>
<body>
<div class="margin-body-log-in-worker">
<div class="row">
{{range .images}}
<div class="col-4 col-sm-4 col-md-3 col-xl-2 center">
<img src="data:image/png;base64,{{.image}}" class="img-fluid image-dashboard" />
</div>
{{end}}
</div>
</div>
</body>
</html>
我不能做的事情之一,正如他们在这篇文章中所说:
https://www.sanarias.com/blog/1214PlayingwithimagesinHTTPresponseingolang
还有编码方法本身说 "To serve over HTTP, remember to send a Content-Type: image/png header."
如何使用 gingonic
在请求中正确设置内容类型以及如何在 HTML
中正确解码?
感谢这篇文章,我解决了自己的问题:https://www.socketloop.com/tutorials/golang-encode-image-to-base64-example
问题是我需要使用 'imgBase64Str := base64.StdEncoding.EncodeToString(buf)'
将其编码为字符串
所以最终的代码如下:
Golang
func renderQRExport(c *gin.Context){
var images []string
var img []byte
var err error
for i := 0; i < 25; i++ {
img, err = qrcode.Encode("https://example.org", qrcode.Medium, 256)
img2 := base64.StdEncoding.EncodeToString(img)
images = append(images, img2)
if err != nil {
fmt.Print(err)
}
}
render(c, gin.H{
"images": images,
}, "qr.html")
}
HTML
<!doctype html>
<html class="no-js" lang="">
<head>
<title>QR export</title>
{{template "imports.html"}}
</head>
<body>
<div class="margin-body-log-in-worker">
<div class="row">
{{range .images}}
<div class="col-4 col-sm-4 col-md-3 col-xl-2 center">
<img src="data:image/png;base64,{{.}}" class="img-fluid image-dashboard" />
</div>
{{end}}
</div>
</div>
</body>
</html>
我正在生成 QR
代码,紧接着我需要在 HTML
中显示它们而不将它们另存为图像。
到目前为止我可以生成它们但是我在 HTML
我这里有生成 QR
的 golang
代码和尝试呈现它们的 HTML
模板
golang
import (
"fmt"
"github.com/gin-gonic/gin"
qrcode "github.com/skip2/go-qrcode"
)
func renderQRExport(c *gin.Context){
var images [][]byte
var img []byte
var err error
for i := 0; i < 25; i++ {
img, err = qrcode.Encode("https://example.org", qrcode.Medium, 256)
images = append(images, img)
if err != nil {
fmt.Print(err)
}
}
render(c, gin.H{
"images": images,
}, "qr.html")
}
HTML 模板
<!doctype html>
<html class="no-js" lang="">
<head>
<title>QR export</title>
{{template "imports.html"}}
</head>
<body>
<div class="margin-body-log-in-worker">
<div class="row">
{{range .images}}
<div class="col-4 col-sm-4 col-md-3 col-xl-2 center">
<img src="data:image/png;base64,{{.image}}" class="img-fluid image-dashboard" />
</div>
{{end}}
</div>
</div>
</body>
</html>
我不能做的事情之一,正如他们在这篇文章中所说:
https://www.sanarias.com/blog/1214PlayingwithimagesinHTTPresponseingolang
还有编码方法本身说 "To serve over HTTP, remember to send a Content-Type: image/png header."
如何使用 gingonic
在请求中正确设置内容类型以及如何在 HTML
中正确解码?
感谢这篇文章,我解决了自己的问题:https://www.socketloop.com/tutorials/golang-encode-image-to-base64-example
问题是我需要使用 'imgBase64Str := base64.StdEncoding.EncodeToString(buf)'
将其编码为字符串所以最终的代码如下:
Golang
func renderQRExport(c *gin.Context){
var images []string
var img []byte
var err error
for i := 0; i < 25; i++ {
img, err = qrcode.Encode("https://example.org", qrcode.Medium, 256)
img2 := base64.StdEncoding.EncodeToString(img)
images = append(images, img2)
if err != nil {
fmt.Print(err)
}
}
render(c, gin.H{
"images": images,
}, "qr.html")
}
HTML
<!doctype html>
<html class="no-js" lang="">
<head>
<title>QR export</title>
{{template "imports.html"}}
</head>
<body>
<div class="margin-body-log-in-worker">
<div class="row">
{{range .images}}
<div class="col-4 col-sm-4 col-md-3 col-xl-2 center">
<img src="data:image/png;base64,{{.}}" class="img-fluid image-dashboard" />
</div>
{{end}}
</div>
</div>
</body>
</html>